Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.

A 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 lado do servidor, de forma estática ou incremental.

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

Renderização no 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 processa a solicitação todas as vezes.

instagram viewer

Isso pode reduzir o desempenho do site. No entanto, a renderização do 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.

exportarpadrãofunçãoLar({ dados }) {
retornar (
<principal>
 // Usardados
</main>
 );
}
exportarassíncronofunçãogetServerSideProps() {
// Busca dados da API externa
const res = aguardam buscar('https://.../data')
const dados = aguardam res.json()
// Será passado para o componente da página como props
retornar { adereços: { dados } }
}

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

  • Quando um usuário acessa a página diretamente, ela é executada no momento da solicitação e a página é pré-renderizada com os props que ela retorna.
  • Quando um usuário acessa a página por meio 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 de dados dinâmicos em uma página ou layout.

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

buscar('https://...', { cache: 'sem loja' });

Como alternativa, defina revalidate como 0:

buscar('https://...', { próximo: { revalidar: 0 } });

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

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 o CSR no nível da página ou no nível do componente. No nível da página, o Next.js busca dados no tempo de execução e, quando feito no nível do componente, busca dados na montagem. Por causa disso, o CSR pode contribuir para diminuir o desempenho.

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

importar { useState, useEffect } de 'reagir'
funçãoLar() {
const [data, setData] = useState(nulo)
const [isLoading, setLoading] = useState(falso)
useEffect(() => {
 setCarregando(verdadeiro)


buscar('/api/get-data')
 .então((res) => res.json())
 .então((dados) => {
 setData (dados)
 setCarregando(falso)
 })
 }, [])


if (está carregando) return <p>Carregando...</p>
 se (!dados) retornar <p>sem dados</p>
retornar (
<div>
 // Usardados
</div>
 )
}

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

importar usar SWR de 'swr'
buscador const = (...args) => buscar(...args).then((res) => res.json())
funçãoLar() {
const { dados, erro } = useSWR('/api/dados', buscador)
 se (erro) retornar <div>Falha ao carregar</div>
 se (!dados) retornar <div>Carregando...</div>
retornar (
<div>
 // Usardados
</div>
 )
}

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

"usarcliente";
exportarpadrão () => {
retornar (
<div>
// Componente cliente
</div>
 );
};

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

Geração de Site Estático

Com geração de site estático (SSG), a página busca dados uma vez durante o tempo de construção. As páginas geradas por estática 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.

exportarpadrãofunçãoLar({ dados }) {
retornar (
<principal>
 // Usardados
</main>
 );
}
exportarassíncronofunçãogetStaticProps() {
// Busca dados da API externa no tempo de compilação
const res = aguardam buscar('https://.../data') 
const dados = aguardam res.json()
// Será passado para o componente da página como props
retornar { adereços: { dados } }
}

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

exportarassíncronofunçãogetStaticProps() {
 // Chamarfunçãoparabuscardadosdebase de dados
const dados = aguardam getDataFromDB()
retornar { adereços: { dados } }
}

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

assíncronofunçãoObter dados() {
const res = aguardam buscar('https://.../data');
retornar res.json();
}
exportarpadrãoassíncronofunçãoLar() {
const dados = aguardam Obter dados();
retornar (
<principal>
 // Usardados
</main>
 );
}

Aprender mais sobre renderização estática em Next.js 13 dos documentos.

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 todo o site, apenas as páginas que precisam.

O ISG retém os benefícios do SSG com o benefício adicional de fornecer conteúdo atualizado aos usuários. O ISG é perfeito para as páginas do seu site que consomem dados variáveis. Por exemplo, você pode usar ISR para renderizar postagens de blog de modo que o blog fique atualizado quando você editar postagens ou adicionar novas.

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

exportarassíncronofunçãogetStaticProps() {
const res = aguardam buscar('https://.../data')
const dados = aguardam res.json()
retornar {
 adereços: {
 dados,
 },
 revalidar: 60
 }
}

Aqui, o 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:

buscar('https://.../data', { próximo: { revalidar: 60 } });

Você pode definir o intervalo de tempo para 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 compatível com SEO.

O SSG é adequado para páginas cujos dados são principalmente estáticos, enquanto o ISG é melhor para páginas que contêm dados que você deseja atualizar em intervalos. SSG e ISG são ótimos em termos de desempenho e SEO, pois os dados são pré-buscados e você pode armazená-los em cache.