Um guia abrangente para renderização do lado do servidor no React

A renderização do lado do servidor no React é uma ferramenta poderosa para criar aplicações web dinâmicas. Ele permite que os desenvolvedores criem interfaces de usuário interativas e de alto desempenho sem depender da execução de JavaScript do lado do cliente. Ao utilizar componentes renderizados no lado do servidor em nossa base de código de aplicativo, podemos aproveitar tecnologias modernas como Node.js Lançado em Maio de 2009que fornece uma maneira otimizada de entregar conteúdo do back-end diretamente em nossa base de código de front-end.

Essa abordagem acelera o tempo de carregamento e oferece controle sem precedentes sobre o que é exibido em cada solicitação de página, ao mesmo tempo que nos fornece recursos como gerenciamento de estado que surgem naturalmente ao usar uma biblioteca como o React.

Este artigo explorará os benefícios de usar a renderização do lado do servidor no React, como ela funciona nos bastidores e a melhor forma de implementá-la em projetos existentes. Também veremos alguns dos desafios associados à renderização no lado do servidor, como otimização de desempenho e considerações de manutenção. Por fim, forneceremos dicas e truques úteis para começar a renderizar no lado do servidor no React hoje mesmo!

O que é renderização no lado do servidor?

Server Side Rendering (SSR) é usado para renderizar páginas da web no servidor antes de enviá-las ao cliente. Isso permite carregamentos de página mais rápidos, melhor desempenho e uma solução de renderização otimizada para SEO para aplicativos React. Além disso, o SSR pode proporcionar uma melhor experiência para usuários com conexões de internet mais lentas ou dispositivos com memória e poder de processamento limitados, realizando a renderização inicial dos componentes no servidor.

O SSR no React pode melhorar o tempo de carregamento da página, eliminando viagens de ida e volta desnecessárias entre cliente e servidor. A renderização do lado do servidor no React fornece mais controle sobre como o conteúdo aparece nas páginas de resultados do mecanismo de pesquisa (SERPs). Como os rastreadores de mecanismos de pesquisa dependem muito de JavaScript para indexar sites, sites construídos inteiramente com renderização do lado do cliente podem não aparecer corretamente nas SERPs devido à incapacidade de analisar o código JavaScript.

A renderização do lado do servidor, em comparação com a renderização do lado do cliente, ajuda a garantir a consistência em diferentes navegadores; já que grande parte do desenvolvimento web moderno depende muito de recursos específicos do navegador, como APIs ou manipuladores de eventos personalizados – esses tipos de recursos podem nem sempre se comportar corretamente quando renderizados apenas por meio de técnicas do lado do cliente, mas funcionarão normalmente se pré-renderizados por meio de métodos do lado do servidor de antemão.

As principais vantagens e desvantagens da renderização do lado do servidor com React são as seguintes:

Implementando renderização no lado do servidor no React

Vamos agora nos aprofundar um pouco mais em como a renderização do lado do servidor funciona em Next.js e Express.js, explorando um caso de uso onde ela pode ser particularmente útil.

Caso de uso: um site de comércio eletrônico

Vamos considerar um caso de uso em que a renderização no lado do servidor pode ser particularmente útil.

Um site de comércio eletrônico normalmente possui muitas páginas. Cada página exibe um produto ou categoria de produto. Além disso, essas páginas costumam ser dinâmicas e atualizadas com frequência, por isso é importante garantir que sejam facilmente descobertas pelos mecanismos de busca e acessíveis a todos os usuários.

Para conseguir isso, você pode construir seu site de comércio eletrônico com renderização do lado do servidor em Next.js ou Express.js. Essa abordagem permitiria gerar uma marcação HTML para cada página do servidor. Assim, facilitando o rastreamento e a indexação do conteúdo pelos mecanismos de pesquisa.

Implementando renderização no lado do servidor usando Next.js

Vamos agora ver como podemos implementar a renderização do lado do servidor em Next.js para um site de comércio eletrônico.

Etapa 1: crie um novo projeto Next.js

Para começar, você terá que criar um novo projeto Next.js executando os seguintes comandos em seu terminal:

npx create-next-app my-ecommerce-app
cd my-ecommerce-app

Etapa 2: adicione as dependências necessárias

Em seguida, você precisará adicionar as seguintes dependências ao seu projeto:

npm install react react-dom next

Esta é a aparência do package.json agora.

{
"name": "my-ecommerce-app",
"version": "0.1.0",
"private": true,
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},
"dependencies": {
  "@next/font": "13.1.6",
  "eslint": "8.34.0",
  "eslint-config-next": "13.1.6",
  "next": "13.1.6",
  "react": "18.2.0",
  "react-dom": "18.2.0"
}
}

Observe as versões dos pacotes mencionados acima, pois foram usadas quando este guia foi criado.

Etapa 3: definir a configuração do ambiente

Definiremos agora uma variável de ambiente a ser armazenada em um arquivo .env.local, que armazena definições de configuração que podem ser usadas em diferentes ambientes (por exemplo, desenvolvimento, teste, produção).

Para definir uma variável de ambiente em seu projeto. Você terá que criar um arquivo chamado .env.local na raiz do diretório do seu projeto e adicionar uma linha como a seguinte:

API_URL=

É importante observar que você não deve fazer check-in desse arquivo no controle de origem, pois ele pode conter informações confidenciais, como credenciais de banco de dados ou chaves de API.

Em vez disso, você pode criar um arquivo de modelo chamado .env.example que contém valores de espaço reservado para suas variáveis ​​de ambiente e verificar esse arquivo no controle de origem. Outros desenvolvedores podem então copiar este arquivo e preencher os valores das variáveis ​​de ambiente.

Etapa 4: crie uma nova página

Next.js usa um sistema de roteamento baseado em arquivo, o que significa que um arquivo no diretório de páginas representa cada página do seu aplicativo. Para criar uma nova página, basta criar um novo arquivo no diretório da página com o caminho da URL desejada. Por exemplo, para criar uma página exibindo uma lista de produtos, você pode criar um arquivo chamado pages/products/index.js.

Neste arquivo, você pode definir um componente React que será renderizado quando o usuário visitar o caminho URL /products. Aqui está um exemplo de componente que busca uma lista de produtos de uma API e os exibe em uma lista:

function ProductsPage  {
  const (products, setProducts) = useState( )

  useEffect(  => {
    async function fetchProducts  {
      const res = await fetch('/api/products')
      const products = await res.json 
      setProducts(products)
    }
    fetchProducts 
  },  )

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  )
}

export default ProductsPage

Etapa 5: crie um endpoint de API

Para buscar a lista de produtos, usamos um endpoint de API em /api/products. Next.js fornece um sistema de roteamento de API integrado que facilita a criação de endpoints de API sem servidor.

Para criar um endpoint de API, crie um novo arquivo no diretório pages/api. Por exemplo, para criar um endpoint de API que retorne uma lista de produtos, você pode criar um arquivo chamado pages/api/products.js.

Neste arquivo você pode definir uma função que será executada quando o usuário solicitar o endpoint da API. Para os fins deste guia, usaremos um exemplo de função que busca uma lista de produtos de uma API simulada:

const products = (  { id: 1, name: 'Product 1' },  { id: 2, name: 'Product 2' },  { id: 3, name: 'Product 3' },)

export default function handler(req, res) {
  res.status(200).json(products)
}

Etapa 6: atualize a página para usar a renderização do lado do servidor

Por padrão, Next.js usa renderização do lado do cliente (CSR) para renderizar páginas, o que significa que o código JavaScript é executado no navegador do usuário. Para mudar para a renderização do lado do servidor (SSR), você precisará atualizar o componente da página para usar uma função getServerSideProps.

A função getServerSideProps é uma função especial executada no servidor antes da página ser renderizada. Ele pode ser usado para buscar dados de uma API ou banco de dados e retorná-los como acessórios para o componente da página.

Aqui está uma versão atualizada do arquivo pages/products/index.js que usa getServerSideProps para buscar a lista de produtos no servidor:

import { useState } from 'react'

function ProductsPage({ products }) {
  const (loading, setLoading) = useState(false)

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  )
}

export async function getServerSideProps  {
  const res = await fetch(`${process.env.API_URL}/api/products`)
  const products = await res.json 
  return { props: { products } }
}

export default ProductsPage

Observe que movemos o gancho useState para o estado de carregamento para fora da função getServerSideProps, pois ele também precisa ser inicializado no cliente.

Etapa 7: inicie o servidor de desenvolvimento

Agora você pode iniciar o servidor de desenvolvimento executando o seguinte comando em seu terminal:

npm run dev

Isso iniciará um servidor de desenvolvimento local em .

Etapa 8: teste o aplicativo

Agora você pode testar o aplicativo visitando o caminho da URL /products em seu navegador. Você deverá ver uma lista de produtos exibidos na página.

Se você visualizar o código-fonte da página em seu navegador, também verá que a lista de produtos está incluída na marcação HTML, o que significa que a página foi renderizada no servidor.

Parabéns, agora você sabe como implementar a renderização do lado do servidor em um aplicativo Next.js!

Implementando renderização no lado do servidor usando Express.js

Vejamos agora como podemos implementar o mesmo caso de uso em um aplicativo Express.js:

Etapa 1: crie um novo aplicativo Express.js

Para começar, você terá que criar um novo diretório para o seu projeto e executar o seguinte comando no seu terminal:

npm init

Agora você pode ver um arquivo package.json no diretório do seu projeto.

Em seguida, instale o Express.js e as dependências necessárias executando o seguinte comando:

npm install express react react-dom next

Esta é a aparência do package.json agora.

{
"name": "express-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
  "express": "^4.18.2",
  "next": "^13.1.6",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}
}

Observe as versões dos pacotes mencionados acima, pois foram usadas quando este guia foi criado.

Etapa 2: definir a configuração do ambiente

Definiremos agora uma variável de ambiente a ser armazenada em um arquivo .env.local, que armazena definições de configuração que podem ser usadas em diferentes ambientes (por exemplo, desenvolvimento, teste, produção).

Para definir uma variável de ambiente em seu projeto. Você terá que criar um arquivo chamado .env.local na raiz do diretório do seu projeto e adicionar uma linha como a seguinte:

API_URL=

É importante observar que você não deve fazer check-in desse arquivo no controle de origem, pois ele pode conter informações confidenciais, como credenciais de banco de dados ou chaves de API.

Em vez disso, você pode criar um arquivo de modelo chamado .env.example que contém valores de espaço reservado para suas variáveis ​​de ambiente e verificar esse arquivo no controle de origem. Outros desenvolvedores podem então copiar este arquivo e preencher os valores das variáveis ​​de ambiente.

Etapa 3: configurar o servidor

Agora crie um novo arquivo chamado server.js na raiz do diretório do seu projeto e adicione o seguinte código:

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler 

app.prepare .then(  => {
  const server = express 

  server.get(" (req, res) => {
    return app.render(req, res, '/home')
  })

  server.get(" (req, res) => {
    return app.render(req, res, "
  })


  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on ')
  })
})

Este código configura um servidor Express.js que escuta solicitações recebidas na porta 3000. O objeto app é uma instância do aplicativo Next.js, que usamos para renderizar páginas em resposta a solicitações.

Neste exemplo, configuramos duas rotas: / e /produtos. Quando chega uma solicitação para qualquer uma dessas rotas, o servidor chama app.render para renderizar a página correspondente. Se a rota solicitada não corresponder a nenhuma delas, o servidor recorre à função handle, que atende a página apropriada usando a renderização do lado do cliente.

Etapa 4: crie a página inicial

Crie um novo arquivo chamado pages/home.js em um diretório chamado pages na raiz do diretório do seu projeto e adicione o seguinte código:

import Link from 'next/link'

function HomePage  {
  return (
    <div>
      <h1>Welcome to our e-commerce website!</h1>
      <Link href="
        <a>View our products</a>
      </Link>
    </div>
  )
}

export default HomePage

Este código define uma página inicial simples que exibe uma mensagem de boas-vindas e um link para visualizar a página de produtos.

Etapa 5: crie a página de produtos

Crie um novo arquivo chamado pages/products.js no diretório de páginas e adicione o seguinte código:

import { useEffect, useState } from 'react';

function ProductsPage  {
const (products, setProducts) = useState( );

useEffect(  => {
  async function fetchProducts  {
    const response = await fetch('/api/products');
    const data = await response.json ;
    setProducts(data.products);
  }

  fetchProducts ;
},  );

return (
  <div>
    <h1>Products</h1>
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  </div>
);
}

export default ProductsPage;

Este código define uma página de produtos que exibe uma lista de produtos obtidos de um endpoint de API. O gancho useEffect é usado para gerenciar o estado e buscar dados do servidor. Quando o componente é montado, o gancho useEffect chama a função fetchProducts para recuperar os produtos da API.

Etapa 6: crie o endpoint da API

Agora você terá que adicionar um endpoint de API para produtos no arquivo server.js presente na raiz do diretório do seu projeto e adicionar o seguinte código:

  server.get('/api/products', (req, res) => {
    const products = (
      { id: 1, name: 'Product 1' },
      { id: 2, name: 'Product 2' },
      { id: 3, name: 'Product 3' },
    );
  
    res.status(200).json({ products });
  });

Este código define um endpoint de API que retorna uma lista de produtos. Este endpoint buscaria dados de um banco de dados ou outra fonte de dados em um cenário do mundo real.

O server.js atualizado deve ter a seguinte aparência:

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler 

app.prepare .then(  => {
  const server = express 

  server.get(" (req, res) => {
    return app.render(req, res, '/home')
  })

  server.get(" (req, res) => {
    return app.render(req, res, "
  })

  server.get('/api/products', (req, res) => {
    const products = (
      { id: 1, name: 'Product 1' },
      { id: 2, name: 'Product 2' },
      { id: 3, name: 'Product 3' },
    );
  
    res.status(200).json({ products });
  });


  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on ')
  })
})

Etapa 7: inicie o servidor

Inicie o servidor Express.js executando o seguinte comando em seu terminal:

nó server.js

Isso iniciará o servidor e o disponibilizará em .

Ao navegar para /, você deverá ver a página inicial com um link para a página de produtos.

Clicar no link levará você à página de produtos, exibindo uma lista de produtos obtidos do endpoint da API.

Parabéns, agora você sabe como implementar a renderização do lado do servidor em um aplicativo Next.js e Express.js!

Renderização do lado do servidor: SEO x desempenho

A renderização do lado do servidor (SSR) pode trazer benefícios de SEO e de desempenho, mas pode haver compensações.

Benefícios de SEO

• O SSR melhora o SEO, tornando mais fácil para os mecanismos de pesquisa rastrear e indexar conteúdo.
• O SSR envia HTML totalmente renderizado ao cliente, facilitando a compreensão do conteúdo pelos mecanismos de busca.
• Os mecanismos de pesquisa podem classificar as páginas SSR em uma posição mais elevada porque proporcionam uma melhor experiência ao usuário.
• O SSR pode ajudar a garantir que todo o conteúdo da página esteja visível para os mecanismos de pesquisa, incluindo o conteúdo gerado por JavaScript.

Benefícios de desempenho

• O CSR pode oferecer tempos de carregamento inicial da página mais rápidos porque o navegador pode começar a renderizar a página assim que receber os arquivos HTML e JavaScript iniciais.
• O SSR pode ser mais lento para carregamentos iniciais da página porque o servidor precisa renderizar o HTML, CSS e JavaScript antes de enviá-lo ao cliente.
• Depois que a página é carregada, a navegação subsequente no site pode ser mais rápida porque o servidor já fez o trabalho de renderização.
• O SSR pode reduzir o processamento do lado do cliente, o que beneficiaria dispositivos mais lentos.
• O SSR pode ajudar a reduzir o número de solicitações de rede necessárias para carregar uma página, melhorando o desempenho.

Compensações

• A compensação entre SEO e desempenho pode não ser significativa para alguns sites.
• Para sites complexos com muito conteúdo dinâmico, o impacto no desempenho do SSR pode superar os benefícios do SEO.
• A SSR pode ser mais difícil de implementar e manter do que a RSE, aumentando os custos de desenvolvimento.

Pensamentos finais

Concluindo, a renderização do lado do servidor no React oferece uma solução poderosa para a criação de aplicativos web dinâmicos e de alto desempenho. Podemos otimizar as velocidades de carregamento de páginas, fornecer uma experiência melhor para usuários com dispositivos mais lentos ou poder de processamento limitado e manter a consistência em vários navegadores, renderizando páginas da web no servidor antes de entregá-las ao cliente.

Embora alguns desafios estejam associados à renderização no lado do servidor, como maior complexidade e considerações de manutenção, tecnologias modernas como Next.js e Express.js facilitaram a implementação e a otimização. Com estratégias de cache e suporte de infraestrutura adequado, a renderização no servidor pode melhorar muito a experiência geral do usuário e fornecer uma solução mais amigável para SEO para sites complexos, como plataformas de comércio eletrônico.

No geral, a renderização do lado do servidor deve ser considerada uma ferramenta valiosa no kit de ferramentas do desenvolvedor React, especialmente para projetos com grandes quantidades de conteúdo dinâmico ou lógica de back-end pesada. Ele pode fornecer benefícios consideráveis ​​em desempenho, experiência do usuário e otimização de mecanismos de pesquisa se o design e a implementação adequados forem cuidados.

À medida que o React continua a ganhar popularidade, é crucial ter desenvolvedores qualificados e experientes para dar vida aos seus projetos. Você pode querer verificar isso para entender como contratar um desenvolvedor React que possa fornecer soluções de alta qualidade adaptadas às suas necessidades.

Perguntas frequentes (FAQ)

A renderização do lado do servidor React é mais rápida?

A renderização do lado do servidor React pode ser mais rápida do que a renderização do lado do cliente em determinados cenários. Por exemplo, se seu aplicativo tiver uma grande quantidade de conteúdo ou dados que precisam ser carregados antes de renderizar a página, o SSR poderá fornecer um tempo de carregamento inicial mais rápido do que o CSR. No entanto, nos casos em que a maior parte do conteúdo é gerada dinamicamente por JavaScript, o CSR pode ser mais rápido.

SSR vale a pena?

Se o SSR vale ou não a pena, depende das necessidades e requisitos específicos da sua aplicação. O SSR pode fornecer benefícios como tempos de carregamento iniciais aprimorados, melhor SEO e desempenho aprimorado em dispositivos de baixo custo ou conexões de rede lentas. No entanto, a implementação de SSR também pode adicionar complexidade à sua aplicação e pode não ser necessária para todos os casos de uso.

O Facebook é um CSR ou SSR?

O Facebook usa uma combinação de CSR e SSR em suas aplicações. Eles usam SSR para o carregamento inicial de algumas de suas páginas, como o feed de notícias, mas dependem fortemente de CSR para atualizações e interações dinâmicas.

Quando devo usar o SSR?

O SSR pode ser útil em vários cenários, inclusive quando você tem uma grande quantidade de dados ou conteúdo para carregar, para melhorar o SEO ou para melhorar o desempenho em conexões de rede lentas. O SSR também pode ser útil para aplicativos que exigem um alto nível de acessibilidade ou para aplicativos que precisam ser renderizados em dispositivos de baixo custo. No entanto, o SSR pode adicionar complexidade e sobrecarga à sua aplicação, por isso é importante considerar cuidadosamente as vantagens e desvantagens antes de decidir usá-lo.

Se você gostou deste artigo sobre React, confira estes tópicos;

• Melhores práticas de reação
• Bibliotecas de componentes React UI
• Os 6 melhores IDEs e editores React
• Reagir vs Backbone JS
• Por que o React é tão popular?
• O que você precisa saber sobre reagir
• Reagir WebSockets: Tutorial