ISR é um método de renderização híbrido no Next.js, que é útil para SEO e melhorando a experiência do usuário. Neste artigo, explicarei como o ISR funciona no Next.js, mostrar exemplos de implementação do ISR no roteador da página e no roteador de aplicativos e, finalmente, abordar algumas perguntas comuns sobre o ISR no próximo.js.

O que é ISR?

ISR é um método de renderização híbrido no próximo.js. Regenera páginas estáticas em intervalos específicos, o que ajuda no SEO e melhora a experiência do usuário, mantendo o conteúdo atualizado sem reconstruir o site inteiro.

Como o ISR melhora o SEO e a experiência do usuário?

Se você usou o react.js ou um aplicativo de página única tradicional (spa), sabe que normalmente existe apenas um arquivo html em um spa. Quando um usuário visita um site de spa pela primeira vez, o spa envia um arquivo HTML mínimo (no React, isso geralmente é index.html). Depois disso, ele busca CSS, JavaScript e outros recursos necessários para a página solicitada. Esses recursos são então renderizados e combinados no HTML quando atingem o cliente (o navegador). No entanto, como mencionado anteriormente, o arquivo HTML inicial enviado por um spa contém pouco ou nenhum conteúdo.

agora, imagine um bot do Google solicitando o site em vez de um usuário. Embora os bots modernos do Google possam executar o JavaScript para recuperar o conteúdo, confiar apenas nisso ainda pode impactar negativamente o SEO. O bot pode ver o HTML inicial vazio, o que pode atrasar a indexação do conteúdo da página, potencialmente prejudicando suas classificações de pesquisa.

Next.js resolve isso usando técnicas de renderização do lado do servidor, como a pré-renderização do servidor. Falaremos sobre a renderização em detalhes mais tarde, mas aqui está uma breve visão geral. Com a pré-renderização do servidor, o HTML para cada rota é gerado no servidor e enviado diretamente ao cliente. Os arquivos CSS e JavaScript são normalmente incluídos e armazenados em cache.

Então, quando um usuário ou botão do Google visita o site, eles vêem imediatamente uma página totalmente renderizada. Isso melhora o SEO porque o BOT do Google pode ver instantaneamente o conteúdo no HTML. Ele também aprimora a experiência do usuário acelerando as cargas de página, o que significa que os usuários não precisam esperar que o conteúdo seja carregado dinamicamente.

Como funciona o ISR?

Se você quiser entender melhor como o ISR (regeneração estática incremental) funciona, deixe -me explicar com um exemplo. Imagine que você é um administrador que gerencia uma lista de blogs em seu site. Você não deseja reconstruir seu projeto toda vez que postar um novo blog. Em vez disso, você deseja que a página da sua lista de blogs atualize automaticamente, digamos, a cada 60 segundos. Então, quando você escreve um novo blog, deseja que ele apareça sem reconstruir manualmente seu projeto. É para onde entra o ISR. Embora você possa usar métodos como SSR (renderização do lado do servidor), se você deseja que seu site seja atualizado em intervalos específicos, o ISR é o caminho a percorrer. Falaremos sobre o SSR mais tarde.

! Você constrói seu projeto pela primeira vez e o timer de reavalidação inicia. Um usuário visita seu site, vai para a página da lista de blogs e vê a lista atual de blogs. Enquanto isso, você publica uma nova postagem no blog, mas como ainda restam 20 segundos na janela de 60 segundos, novos usuários que visitam o site ainda não verão o novo blog.

Depois que os 60 segundos acabarem, o ISR verifica novos dados, vê que há uma nova postagem no blog e regenera a página estática com o conteúdo atualizado. Em seguida, armazena em cache a nova versão no servidor. Aqui está algo importante a ser observado: enquanto o ISR está regenerando a página, os usuários ainda veem a versão antiga até que a nova esteja pronta. Então, após o término do ISR, todos os novos visitantes verão a página atualizada, mas os usuários que já estavam no site antes da reavalidação ainda verão a página antiga, a menos que a atualize.

Outra coisa importante a lembrar é que, quando você constrói seu site usando o NPM Run Build, a página estática inicial é gerada pelo SSG (geração estática do site), não ISR. Após a primeira construção, o ISR entra em ação para lidar com o processo de regeneração. Além disso, o ISR não regenera todo o seu site; Ele apenas regenera a página específica onde o ISR é implementado. Então, quando a ISR se regenera, apenas essa página específica é atualizada, não todo o projeto.

Como implementar ISR no roteador de aplicativos

Para implementar o ISR (regeneração estática incremental) no roteador de aplicativos, é importante saber que o ISR deve ser usado nos componentes do servidor, não nos componentes do cliente. Isso ocorre porque o ISR é um método de renderização de servidor, não do lado do cliente. Portanto, você deve colocar ISR em arquivos como aplicativo/blog/página.tsx ou app/blog/page.jsx.

Um ponto -chave a lembrar é que, se você não chamar sua API no componente do servidor em que a opção Revalidate está definida, o ISR não funcionará. O componente do servidor deve ser capaz de buscar novos dados para regenerar a página; caso contrário, nenhuma atualização ocorrerá.

Para ativar o ISR, tudo o que você precisa fazer é adicionar a propriedade Revalidate ao método de busca. Se você preferir usar axios em vez de buscar, ainda pode usá -lo configurando a solicitação da mesma forma, mas por enquanto continuarei usando o busca. Talvez mais tarde eu explique como fazer isso com axios.

forneci exemplo com o arquivo TSX e JSX Fiel:

Este é o exemplo de implementação no arquivo tsx

Este é o exemplo de implementação no arquivo jsx:

Como implementar o ISR no roteador da página?

Para implementar o ISR no roteador da página, você deve exportar o GetStaticProps do seu componente e adicionar a propriedade Revalidate a esta função. Essa função é executada apenas durante a renderização do lado do servidor; portanto, você precisa chamar sua API no getStaticProps. Conforme mencionado na seção anterior, você pode usar o busca ou o Axios para buscar seus dados, mas lembre -se de que a chamada da API deve ser feita dentro do GetStaticProps, ou então ISR não funcionará.

Novamente, esta função é executada no servidor, não no cliente. Aqui está um exemplo a serem demonstrado:

Este é o exemplo de implementação no arquivo tsx:

Este é o exemplo de implementação no arquivo jsx:

Conclusão

ISR em Next.js é um método de renderização do servidor que melhora o SEO e a experiência do usuário.

Você pode criar seu componente usando outros métodos como SSR ou SSG, mas às vezes o ISR é necessário para casos de uso específicos.

você precisa ter um bom entendimento do que é ISR, como ele funciona e como implementá -lo no roteador de página e no roteador de aplicativos. Neste artigo, tentei explicá -lo o mais claramente possível, e o atualizei mais tarde se puder explicar ainda melhor. Se alguma coisa não estiver clara, informe -me deixando um comentário e eu fornecerei mais esclarecimentos.

Obrigado por ler este blog, e espero que você tenha gostado!