Server-side rendering (SSR) com ReactJS e Next.js

React 22 de Mai de 2018

Se você programa em ReactJS já deveria saber que mesmo trazendo grande flexibilidade para o front-end, a biblioteca possui muitos problemas com motores de busca (SEO), por isso, nesse post vamos falar sobre SSR (server-side rendering).

Isso acontece porque, como o React busca as informações para exibição em tela de uma API externa, os mesmos são totalmente dependentes do Javascript que é automaticamente desabilitado pelo processo de indexação dos motores de busca.

O processo de SSR é possível graças ao Javascript funcionar também no ambiente back-end com o NodeJS e poder entender o fluxo de funcionamento de uma aplicação construída com React.

Com o processo de SSR (server-side rendering) nós conseguimos fazer com que o NodeJS faça a renderização do nosso componente antes da resposta ao cliente chegar, ou seja, todo conteúdo necessário para o componente ser exibido em tela chega pronto ao front-end.

O que é Next.js?

O Next.js é a ferramenta mais adotada pela comunidade do React para realização do server-side rendering.

O processo é muito simples e não precisamos sequer entender de NodeJS para começarmos. Todo código da nossa aplicação será em ReactJS da mesma forma que construímos quando estamos utilizando client-side rendering (modelo padrão) e isso é um dos pontos que faz do Next uma ferramenta fantástica.

Iniciando com o Next.JS

Para começarmos a criar nossa aplicação com Next.js vamos precisar de 3 principais dependências, por isso, em uma nova pasta execute os seguintes comandos:

yarn init -y
yarn add react react-dom next

// Observação: Utilize o NPM se preferir

Agora com o projeto criado, vamos criar nossa primeira página, por isso, crie uma pasta chamada pages dentro da raiz do projeto e um arquivoindex.js dentro da mesma.

Nesse arquivo, vamos configurar um componente em ReactJS simples:

import React, { Component } from 'react';

export default class Home extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

Pronto, já temos nossa primeira página que será renderizada pelo back-end no NodeJS. Para conseguirmos visualizar essa funcionamento precisamos configurar um novo script no nosso arquivo package.json, por isso, abra-o e adicione a seguinte linha na propriedade scripts:

"scripts": {
  "dev": "next"
}

Agora, em seu terminal, execute o comando yarn dev (ou npm run dev). Alguns segundos depois, acesse seu navegador no endereço http://localhost:3000.

Você provavelmente verá a mensagem “Hello World” que adicionamos no componente, mas até agora nada de muito fantástico, certo? Então vamos fazer um teste. Nas ferramentas de desenvolvedor do chrome, nas configurações, desabilite o Javascript:

Agora, recarregue a página. Você verá que o componente ReactJS foi renderizado da mesma forma sem ter o Javascript habilitado pelo lado do cliente, ou seja, a magia do Next.js está nesse detalhe, todo processamento do React foi feito no lado do back-end e por isso conseguimos ter sua renderização em tela.

Legal, agora vamos dar um passo adiante. Criaremos uma requisição à uma API REST para ver o Next.js em prática com esse tipo de funcionalidades.

Antes disso, vamos adicionar uma nova dependência ao nosso projeto:

yarn add isomorphic-fetch

Como o Next.js utiliza ambientes front-end e back-end ao mesmo tempo, essa lib padroniza o funcionamento da API fetch nesses dois cenários.

Habilite novamente o Javascript e no seu componente index.js altere o código para o seguinte:

import React, { Component } from "react";
import "isomorphic-fetch";

export default class Home extends Component {
  static getInitialProps = async () => {
    const response = await fetch(
      "https://api.github.com/orgs/rocketseat/repos"
    );

    return { repositories: await response.json() };
  };

  render() {
    return (
      <div>
        {this.props.repositories.map(repo => (
          <h1 key={repo.id}>{repo.name}</h1>
        ))}
      </div>
    );
  }
}

O que alteramos aqui é que agora possuímos um método estático chamado getInitialProps que é responsável por fazer qualquer ação assíncrona que precisa ser realizada antes do componente ser exibido em tela como, por exemplo, uma chamada à API REST.

Nesse caso estamos buscando os repositórios da Rocketseat no Github e repassando como uma propriedade repositories para nosso componente que utiliza de um map para exibí-los em tela.

Aqui você pode fazer o mesmo teste, desabilitar o Javascript e ver como esse funcionamento se mantém já que tudo isso está rodando do lado do servidor.

Concluindo

Se você já programa em ReactJS e quer utilizar o Next.js terá muita facilidade. Os melhores casos de uso para o Next.js, na minha opinião, são websites, blogs, portais, e-commerces, ou seja, qualquer aplicação que precise desfrutar da flexibilidade do ReactJS somada à indexação de motores de busca.

Algo que não mencionei nesse post é a parte de roteamento no Next.js que é muito bacana já que apenas a primeira página é renderizada do lado do servidor, enquanto que as seguintes são geradas no front-end da mesma forma que fazemos com o react em um SPA (single-page application).

Se você tiver interesse em ver isso na prática é só ver esse vídeo: