Desvendando o Nextjs (SSR, SSG e ISR)

O que é Nextjs?

O Nextjs é um framework baseado em Reactjs.

Como dito na própria doc, é um framework pronto para produção. O Nextjs consegue tratar de assuntos para agilizar o processo de dev ao deploy, como otimização de imagens, sistema de roteamento, zero configuração, SSR, SSG e ISR e muitas outras coisas que fazem o Nextjs ser uma das principais escolhas do mercado hoje em dia.

Principais características

O Nextjs tem uma vasta lista de características que o fazem ser tão escolhido e utilizado no mercado. Entre elas estão SSR, SSG e ISR.

Afinal, o que é SSR, SSG e ISR?

SSR

É a sigla para Server Side Rendering, ou Renderização do Lado do Servidor.

O SSR inverte o processo de renderização, trazendo uma parte do esforço de renderização de aplicações SPA para o servidor, de maneira similar ao carregamento tradicional.

O SSR pode fornecer aos usuários um carregamento mais eficiente da aplicação, já que parte da renderização é feita no servidor. Além da possibilidade de melhoria da performance, o SSR ajuda a lidar com alguns problemas de SEO (como indexação), já que parte da aplicação ainda é carregada pelo servidor.

A imagem acima é um exemplo de SSR comum como Wordpress e Magento

A imagem acima é como o SSR funciona com o Nextjs.

Como usar com o Nextjs?

Se você exportar uma função chamada getServerSideProps(Server-Side Rendering) de uma página, o Next.js irá pré-renderizar esta página em cada solicitação usando os dados retornados por getServerSideProps.

SSG

SSG é uma página que não é gerada em tempo de execução de uma aplicação web, diferente das páginas dinâmicas o conteúdo é fixo; SSG é a geração de páginas estáticas.

Com SSG você pode configurar de quanto em quanto tempo será feita uma nova requisição ao servidor, vejamos um exemplo: imagine um site que recebe poucas alterações(Landing page de sua empresa), ou alterações de tempos em tempos; quando a sua aplicação é requisitada por um cliente(usuário final), não existe a necessidade de regerar a aplicação em tempo de execução já que não houve mudanças no ‘website’, resumindo caso seu site mude apenas a cada 5 dias, a primeira requisição feita ao seu ‘website’ será feita normalmente, e as outras infinitas requisições que forem feitas por infinitos clientes dentro desse intervalo serão buscadas em uma espécie de "cache da sua aplicação no servidor".

Como usar no Nextjs?

Se você exportar uma função chamada getStaticProps(Static Site Generation) de uma página, o Next.js irá pré-renderizar esta página no momento da compilação usando as props retornadas por getStaticProps.

Quando usar getStaticProps?

Você deve usar getStaticProps:

·        Os dados necessários para renderizar a página está disponível no tempo de criação antes da solicitação de um usuário

·        Os dados vêm de um CMS headless.

·        A página deve ser pré-renderizada (para SEO) e ser muito rápida — getStaticProps HTML e JSON arquivos, ambos podem ser armazenados em cache por um CDN para desempenho

·        Os dados podem ser armazenados em cache publicamente (não específicos do usuário). Essa condição pode ser ignorada em determinada situação específica usando um Middleware para reescrever o caminho.

ISR

A Regeneração Estática Incremental (ISR) permite que você crie ou atualize conteúdo sem reimplantar seu site. O ISR tem três benefícios principais para os desenvolvedores: melhor desempenho, segurança aprimorada e tempos de compilação mais rápidos.

Melhor desempenho: as páginas estáticas podem ser consistentemente rápidas armazenando em cache as páginas geradas em todas as regiões da Edge Network da Vercel e persistindo os arquivos em armazenamento durável

Segurança aprimorada: as funções de renderização ISR são usadas para gerar páginas e não têm acesso ao arquivo de entrada request, o que evita o cache acidental de dados do usuário para aumentar a segurança

Compilações mais rápidas: as páginas podem adiar a geração sob solicitação ou por meio de uma API em vez de durante a compilação, ajudando a manter os tempos de compilação rápidos à medida que seu aplicativo cresce.

Como usar no Nextjs?

O Next.js permite que você crie ou atualize páginas estáticas depois de criar seu site. A Regeneração Estática Incremental (ISR) permite que você use a geração estática por página, sem precisar reconstruir todo o site. Com o ISR, você pode manter os benefícios da estática enquanto escala para milhões de páginas.

Para usar o ISR, adicione o revalidateprop a getStaticProps:

Em suma, temos uma ferramenta extremamente poderosa para a construção de diversos tipos de projetos. E com funcionalidades que vão facilitar ainda mais a nossa vida de dev. E para saber mais, não deixem de entrar na documentação do Nextjs que lá vocês vão encontrar exemplos e muitos mais sobre como aplicar e entender todos esses conceitos que falamos aqui.

Referencias:

Desvendando Next.js do ZERO (SSG, SSR, ISR e mais) - Decode #013 : https://www.youtube.com/watch?v=2LS6rP3ykJk

Documentação Nextjs: https://nextjs.org/docs/getting-started

NextJS: por que usar?: https://www.alura.com.br/artigos/next-js-vantagens?gclid=CjwKCAjwzNOaBhAcEiwAD7Tb6EFA6m_gFpaRIypCR0dSeq6YVhzfA516e8r7cf22RtU527n66_3jKhoCVo4QAvD_BwE

SPA e SSR: quais as diferenças? : https://www.treinaweb.com.br/blog/spa-e-ssr-quais-as-diferencas#:~:text=SSR%20%C3%A9%20a%20sigla%20para,tentando%20manter%20suas%20principais%20vantagens.

getServerSideProps: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

O que é SPA, SSR E SSG: https://www.linkedin.com/pulse/o-que-%C3%A9-spa-ssr-e-ssg-marcos-vinicius-lima/?originalSubdomain=pt