Conhecendo Next.js e seu poderoso server-side rendering (SSR)

Afinal, o que é Next.js?

Lançado em 2016 por Guilherme Rauch, o Next.js é um framework web que visa agilizar o processo de construção de um React app, o qual oferece diversas ferramentas que economizam horas de desenvolvimento desnecessárias. Entre essas ferramentas, podemos destacar: componentes para rota, WebPack já configurado para React, transpilação do ES6 e ES7, além do poderoso suporte ao SSR (Server Side Rendering).

Analisando o SSR com uma perspectiva SEO

SEO (Search Engine Optimization) é um conjunto de técnicas que visa posicionar uma página nos primeiros resultados de mecanismos de busca online (como o Google), ou seja, a partir dele que a página será indexada para o usuário.

Vamos usar de exemplo um artigo, como esse por exemplo, porém imagine que estamos utilizando React no lado do front-end. Quando acessada, a página realizará requisições para determinada API, buscando as informações desse artigo, e então mostrar em tela. O tempo que ocorre entre este acesso, carregar as informações do artigo da API, e mostrar ao usuário, mesmo que seja quase instantâneo, o Google não espera, ou seja, durante esse intervalo o conteúdo do arquivo não existe para ele. Isso acontece pois os mecanismos de busca não baixam o JavaScript no primeiro momento de indexação. Com o SSR, antes desse conteúdo chegar ao usuário ele será renderizado pelo NodeJS, e as informações do arquivo serão reconhecidas instantaneamente pelo Google ou outros motores de busca.

Fonte: ERCAN, Gökhan. Javascript SEO: What is SSR/CSR? Advantages and Disadvantages. 10 Jun, 2020

Mãos na massa!

Agora que entendemos um pouco melhor como o SSR e o Next.js se comportam, vamos entender na prática como isso funciona.

Para criar o seu projeto, rode esse código no terminal:

npm init -y
# ou
yarn init -y

Depois de terminado, instale o “next”, “react” e “react-dom” no seu projeto:

npm install next react react-dom
# ou
yarn add next react react-dom

Abra o arquivo “package.json” e configure seus scripts dessa forma:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next dev",
    "build": "next build", 
    "start": "next start" 
},

Aqui configuramos os scripts para rodarem nossa aplicação nas três fases de desenvolvimento:

“dev” — Roda nosso servidor de desenvolvimento. O Next faz toda a configuração do NodeJS pra gente, ou seja, não há a necessidade de conhecer conceitos desta tecnologia para continuar desenvolvendo nessa aplicação;

“build” — Faz o build da aplicação para entrar em produção;

“start” — Inicia o servidor Node quando já estiver em produção.

Crie o diretório “pages” em seu projeto, em seguida, crie o arquivo “index.js”:

Agora chegamos na parte interessante, observe o seguinte trecho de código:

import React from 'react'
export const PaginaInicial = () => {
     return <h1> Olá Mundo! </h1>
}
export default PaginaInicial

Você deve estar se perguntando: “Certo, um trecho simples de olá mundo utilizando React, o que isso tem a ver?”. O Next.js é um framework construído sobre React e possui uma característica importante, o código passa a ser executado pelo NodeJS, no back-end!

Podemos melhorar ainda mais, além de códigos estáticos, podemos fazer requisições para API externas no back-end utilizando essa tecnologia:

import React from 'react'
export const PaginaInicial = ({ mensagem }) => {
    return <h1> {mensagem} </h1>
}

PaginaInicial.getInitialProps = async () => {
// Aqui você pode fazer requisições assíncronas para uma API externa
     return {
         mensagem: "Olá Mundo!"
     }
}
export default PaginaInicial

Faça o teste! suba sua aplicação e a acesse pelo browser com o JavaScript desabilitado. Observe que mesmo utilizando React, no primeiro momento o Next usa o servidor para renderizar o html.

Finalizando

Esta foi a ponta do iceberg de tudo que o Next.js pode oferecer. Além do SSR, conseguimos configurar páginas estáticas (SSG — Static Site Generation), programar usando Typescript, e utilizar CSS-in-JS (Styled-jsx, Styled Components, emotion, etc), que por sinal, trazem muitos benefícios para a estrutura do Next em si.

Como já mencionado, o Next.js é zero configuration, ou seja, ferramentas como fast refresh, hot reloading, code splitting, já vem configuradas por padrão, não tendo mais a necessidade de se preocupar no que utilizar ou como utilizar, podendo focar no produto a ser entregue. Isso não quer dizer que quando seja o caso, o desenvolvedor não possa configurar o que precisar. O Next é completamente extensível, podemos operar da forma que ele vem configurado, ou podemos fazer alterações no babel, no WebPack ou nos plugins sem problemas.

Parece perfeito, não é mesmo? Mas é utilizado no mercado? Sim, empresas como GitHub, Twitch, Netflix, Uber, entre outros utilizam essa ferramenta, e a tendência desse número é aumentar. No entanto, não ache que encontrou a “bala de prata” para todos os seus problemas. Cada caso possui uma necessidade, e cabe ao desenvolvedor, junto com o cliente, encontrar a tecnologia mais adequada para resolver o problema proposto.