Compreendendo os métodos de renderização Next.js: CSR, SSR, SSG, ISR

Descubra como esses métodos de entrega de quatro páginas diferem e quando usar cada um.

Renderização é o processo de conversão do código React em HTML. O método de renderização escolhido depende dos dados com os quais você está trabalhando e do quanto você se preocupa com o desempenho.

No Next.js, a renderização é muito versátil. Você pode renderizar páginas do lado do cliente ou do servidor, de forma estática ou incremental.

Dê uma olhada em como esses métodos funcionam e como cada um funciona.

Renderização do lado do servidor

Com a renderização do lado do servidor (SSR), quando um usuário visita uma página da web, o navegador envia uma solicitação dessa página ao servidor. O servidor busca os dados necessários do banco de dados, se necessário, e os envia junto com o conteúdo da página para o navegador. O navegador então o exibe para o usuário.

O navegador faz essa solicitação para cada link em que o usuário clica, o que significa que o servidor sempre processa a solicitação.

Isso pode reduzir o desempenho do site. No entanto, a renderização no lado do servidor é perfeita para páginas que consomem dados dinâmicos.

Use getServerSideProps para reconstruir a página sempre que um usuário a solicitar.

export default function Home({ data }) {
  return (
    <main>
      // Use data
    </main>
  );
}
 
export async function getServerSideProps() {
  // Fetch data from external api
 const res = await fetch('https://.../data')
  const data = await res.json()
 
  // Will be passed to the page component as props
  return { props: { data } }
}

getServerSideProps só roda no servidor e é assim que funciona:

Quando um usuário acessa a página diretamente, ela é executada no momento da solicitação e a página é pré-renderizada com os adereços que ela retorna.
Quando um usuário acessa a página através de um link Próximo, o navegador envia uma solicitação ao servidor que o executa.

Na nova versão, você pode optar pela renderização do lado do servidor usando buscas dinâmicas de dados em uma página ou layout.

As buscas dinâmicas de dados são solicitações fetch() que desativam especificamente o armazenamento em cache, definindo a opção de cache como “no-store”.

fetch('https://...', { cache: 'no-store' });

Como alternativa, defina revalidar como 0:

fetch('https://...', { next: { revalidate: 0 } });

Este recurso está atualmente em versão beta, portanto, lembre-se disso. Você pode ler mais sobre buscas dinâmicas de dados na documentação beta do Next.js 13.

Renderização do lado do cliente

Você deve usar a renderização do lado do cliente (CSR) quando precisar atualizar dados com frequência ou quando não quiser pré-renderizar sua página. Você pode implementar CSR no nível da página ou do componente. No nível da página, Next.js busca dados em tempo de execução e, quando feito no nível do componente, busca dados na montagem. Por causa disso, a RSE pode contribuir para diminuir o desempenho.

Use o gancho useEffect() para renderizar páginas no cliente assim:

import { useState, useEffect } from 'react'
function Home() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)
 
  useEffect(() => {
    setLoading(true)
 
    fetch('/api/get-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
 
  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No data</p>
 
  return (
    <div>
      // Use data
    </div>
  )
}

Você também pode usar o gancho SWR. Ele armazena os dados em cache e os revalida caso fiquem obsoletos.

import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Home() {
  const { data, error } = useSWR('/api/data', fetcher)
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <div>
      // Use data
    </div>
  )
}

No Next.js 13, você precisa usar um componente cliente adicionando a diretiva “use client” na parte superior do arquivo.

"use client";
export default () => {
  return (
      <div>
       // Client component
      </div>
  );
};

A diferença entre SSR e CSR é que os dados são buscados em cada solicitação de página no servidor no SSR, enquanto os dados são buscados no lado do cliente no CSR.

Geração de site estático

Com a geração de site estático (SSG), a página busca dados uma vez durante o tempo de construção. As páginas geradas estáticas são muito rápidas e têm bom desempenho porque todas as páginas são construídas previamente. O SSG é, portanto, perfeito para páginas que usam conteúdo estático, como páginas de vendas ou blogs.

Em Next.js, você deve exportar a função getStaticProps na página que deseja renderizar estaticamente.

export default function Home({ data }) {
  return (
    <main>
      // Use data
    </main>
  );
}
 
export async function getStaticProps() {
  // Fetch data from external API at build time
  const res = await fetch('https://.../data') 
  const data = await res.json()
 
  // Will be passed to the page component as props
 return { props: { data } }
}

Você também pode consultar o banco de dados dentro de getStaticProps.

export async function getStaticProps() {
  // Call function to fetch data from database
  const data = await getDataFromDB()
  return { props: { data } }
}

No Next.js 13, a renderização estática é o padrão e o conteúdo é buscado e armazenado em cache, a menos que você desative a opção de cache.

async function getData() {
  const res = await fetch('https://.../data');
  return res.json();
}
export default async function Home() {
  const data = await getData();
  return (
    <main>
      // Use data
    </main>
  );
}

Saiba mais sobre renderização estática em Next.js 13 na documentação.

Geração Estática Incremental

Há momentos em que você deseja usar o SSG, mas também deseja atualizar o conteúdo regularmente. É aqui que a geração estática incremental (ISG) ajuda.

O ISG permite que você crie ou atualize páginas estáticas depois de construí-las após o intervalo de tempo especificado. Dessa forma, você não precisa reconstruir o site inteiro, apenas as páginas que precisam dele.

O ISG mantém os benefícios do SSG com o benefício adicional de fornecer conteúdo atualizado aos usuários. O ISG é perfeito para aquelas páginas do seu site que consomem dados variáveis. Por exemplo, você pode usar ISR para renderizar postagens de blog de forma que o blog permaneça atualizado quando você edita postagens ou adiciona novas.

Para usar o ISR, adicione a propriedade revalidate à função getStaticProps em uma página.

export async function getStaticProps() {
  const res = await fetch('https://.../data')
  const data = await res.json()
 
  return {
    props: {
      data,
    },
    revalidate: 60
  }
}

Aqui, Next.js tentará reconstruir a página quando uma solicitação chegar após 60 segundos. A próxima solicitação resultará em uma resposta com a página atualizada.

No Next.js 13, use revalidate na busca assim:

fetch('https://.../data', { next: { revalidate: 60 } });

Você pode definir o intervalo de tempo de acordo com o que funcionar melhor com seus dados.

Como escolher um método de renderização

Até agora você aprendeu sobre os quatro métodos de renderização em Next.js – CSR, SSR, SSG e ISG. Cada um desses métodos é apropriado para diferentes situações. O CSR é útil para páginas que precisam de dados atualizados, onde um SEO forte não é uma preocupação. O SSR também é ótimo para páginas que consomem dados dinâmicos, mas é mais amigável ao SEO.