Quando a gente faz a transição do React Vanilla para um novo Framework, é muito comum termos que abstrair e mudar o jeito que temos que pensar nos processos. Para fazer esse blog junto do Mateus, utilizamos o NextJS 13, a coisa que eu mais me perguntava sobre como funcionava era o modo de pensar e executar as rotas dinâmicas da aplicação.

Conceitos do NextJS novos para quem está fazendo a transição do React Vanilla

Um conceito muito falado do Next que pega a gente de primeira é o tal do Static Render e o Server Side Render. Dois conceitos importantíssimos pra que possamos fazer a utilização de todo o potencial do Next.

Em resumo:

• Static Render: O Next renderiza todas as suas páginas no momento de realizar o build do seu projeto. Funciona muito bem para conteúdos que não são super dinâmicos, como landing pages, blogs (esse blog utiliza esse formato de render) e páginas de empresas, por exemplo.
• Server Side Render: Aqui o Next roda numa instância do servidor utilizando o Node, e quando alguém solicita uma informação, o servidor Node realiza todas as funções de fetch do conteúdo, compila em um HTML estático, e envia para o solicitante.

Além dessas duas novas formas, o clássico Client Side Render é uma opção.

Se você se perguntou se podemos mesclar estratégias, sim, isso é possível. E o desempenho da aplicação pode se utilizar de diferentes estratégias para atingir uma performance melhor.

Tá, mas e como o Next sabe quais URLs ele vai montar no Static Render?

Quando li a primeira vez o conceito de Static Render, isso me parece muito interessante! Mas a coisa que eu não conseguia entender era como o Next saberia quais páginas renderizar. Já que são rotas dinâmicas, temos infinitas possibilidades. Como ele sabe o que fazer? Da seguinte maneira, que me pareceu muito inteligente:

GenerateStaticParams()

No final da sua página dinâmica, no caso deste blog, src/posts/[slug]/page.tsx, utilizamos a função generateStaticParams do Next. Ela irá realizar uma chamada para a API da sua aplicação e irá verificar quantas unidades de páginas dinâmicas com seus respectivos links serão renderizadas na hora do build.

1export async function generateStaticParams() {
2
3  const data = await fetch('LINK DA SUA API AQUI');
4
5  const posts = await data.json());
6
7  return posts.map((post) => ({ slug: post.slug, })); 
8
9}

O que essa função faz?

• Acessa sua API no link onde ela retorna toda a lista de posts/páginas que sua aplicação terá que usarão o mesmo layout da sua página dinâmica.
• Realiza um map no retorno da sua API e gera um objeto com todos os nomes dos slugs (título do post ou página sem espaços e com caracteres ASCII, por exemplo: eu-sou-um-exemplo-de-slug) ou ids das páginas que sua aplicação terá. Você pode escolher usar slugs ou ids para gerar as rotas dinâmicas.

Agora, você se perguntar, se a página é gerada no momento do build de forma estática, ela ira atualizar quando existir novos dados? A resposta é: Não! Mas, temos como resolver esse problema! Com o revalidation do NextJS. Para saber mais sobre isso, veja nossa publicação: Como revalidar páginas estáticas no Next.js usando ISR

Conclusão

O Next traz muitas ferramentas que fazem com que otimizemos o modo de desenvolver aplicações, e junto disso, maior performance para elas. Quando comecei a estudar a ferramenta, esse ponto sempre me gerava dúvida e a forma como ele resolve o problema é muito interessante!

O Next é um mundo novo e muito divertido de se aprender para quem gosta de desenvolvimento Front-end. Recomendo a todos que curtem React! 😄