Construindo aplicações SSR com React, React Router e Vite
9 min9 minutos de leitura
9 min9 minutos de leitura
No mundo do desenvolvimento web, duas abordagens reinam: SPAs (single page applications) que renderizam no lado do cliente e SSR (server side rendering) que renderiza páginas no servidor.
Autor(a)
Vinicios Neves
Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Portugal e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Com o SSR em ascensão, frameworks como Next.js e Remix conquistaram popularidade.
Mas e se você deseja migrar seu projeto React para SSR sem se prender a um framework específico?
É aí que entra o poder do Vite e do plugin Vike!
Como iniciar a aplicação
Bom, pra configurar uma aplicação usando Vite, mas do que fazer SSR, nós vamos usar um plugin chamado “Vike” (o nome antigo dele era vite-plugin-ssr e você pode ainda ver algumas referências antigas a ele por esse nome). Bora lá?
Repare que eu deixei explícita a versão, para que você possa tirar o maior proveito desse conteúdo. O resultado vai ser algo assim:
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ Project name: · the-office
Scaffolding project in /Users/vinny/Desktop/the-office...
✔ Select a boilerplate: · react
Done. Now run:
cd the-office/
npm install (or pnpm install / yarn install)
npm run dev (or pnpm run dev / yarn dev)
Para o Project name eu respondi the-office e para Select a boilerplate eu selecionei react.
Agora podemos acessar a pasta recém-criada e instalar as dependências conforme sugerido:
cd the-office
E depois:
npm install
Por fim, levantamos o servidor de desenvolvimento executando:
E agora que deu tudo certo na inicialização do nosso projeto, vamos entender o que tem nele.
Como analisar o projeto
Pasta pages
A pasta pages é o coração do sistema de roteamento do Vike. Cada subpasta ou arquivo dentro dela representa uma rota na aplicação.
O Vike utiliza um sistema de roteamento baseado em arquivos, o que significa que a estrutura de pastas e arquivos dentro de pages mapeia diretamente para as URLs da sua aplicação.
Vamos entender cada uma delas:
about: esta subpasta contém os arquivos relacionados à página 'sobre' (/about);
code.css: um arquivo de estilo CSS específico para a página 'sobre';
index.page.jsx: o componente React que é renderizado quando os usuários acessam /about no navegador.
index: esta subpasta representa a raiz do site ou a página inicial;
Counter.jsx: um exemplo de componente React;
index.page.jsx: o componente React que é renderizado na raiz do site (/).
Pasta renderer
A pasta renderer contém arquivos que definem como as páginas são processadas e renderizadas, tanto no lado do servidor quanto no cliente.
Essa pasta pode conter componentes globais, estilos, e lógicas de renderização padrão. Dentro dela encontramos:
Link.jsx: um componente para criar links de navegação entre páginas, respeitando o roteamento do lado do cliente;
PageShell.css e PageShell.jsx: definem um "shell" ou layout comum, que podem ser utilizados em todas as páginas para manter a consistência no estilo e na estrutura;
PropTypeValues.js: define valores comuns de PropTypes reutilizados em vários componentes;
_default.page.client.jsx e _default.page.server.jsx: componentes especiais que definem comportamentos padrão de renderização no lado do cliente e servidor, respectivamente;
_error.page.jsx: um componente que é renderizado quando ocorre um erro durante a navegação ou a renderização de uma página;
usePageContext.jsx: um hook personalizado para acessar o contexto da página atual, útil para passar dados e estados entre o servidor e o cliente.
Pasta server
A pasta server contém arquivos que configuram e inicializam o servidor da aplicação.
Essa configuração inclui o roteamento no servidor, a integração com APIs, e a renderização inicial das páginas no lado do servidor. Nela temos:
index.js: o ponto de entrada (entry point) do servidor, responsável por inicializar e configurar o servidor Vike;
root.js: um arquivo que pode ser usado para definir rotas de servidor personalizadas, middleware, ou para configurar a integração com sistemas externos.
Roteamento
No Vike o roteamento é, principalmente, gerenciado pelo sistema de arquivos dentro da pasta pages.
O nome de cada arquivo ou subpasta define a rota correspondente na aplicação. Arquivos especiais, como _default.page.client.jsx e _default.page.server.jsx, permitem definir comportamentos padrão de renderização que são aplicados a todas as páginas.
A navegação entre as páginas é feita sem recarregar a página inteira, graças ao roteamento do lado do cliente implementado no Link.jsx e outros mecanismos do próprio Vike.
Server Routing ou Client Routing?
O Vike oferece suporte tanto para o Server Routing (recarregamento completo do HTML ao navegar pela página) quanto para o Client Routing (alterações/hidratações no DOM ao navegar pela página).
O parâmetro productId está disponível em pageContext.routeParams.productId.
As Route Functions nos dão total flexibilidade para implementar lógicas de roteamento avançadas, por exemplo, guardas de rota:
// /pages/product/edit/+route.js// Este arquivo define a rota de /pages/product/edit/+Page.jsimport { resolveRoute } from'vike/routing'exportdefaultasync (pageContext) => {
// Garantir que /product/@id/edit possa ser acessado apenas por administradoresif (!pageContext.user.isAdmin) {
returnfalse
}
// Podemos usar o resolvedor de String de Rota do VikereturnresolveRoute('/product/@id/edit', pageContext.urlPathname)
}
Como obter dados
Existem várias formas de obter dados em aplicações que usam o Vike, vamos destacar as mais utilizadas: data() e useData():
data()
A forma mais simples de buscar dados é usar o hookdata() do Vike e o hookuseData() para obter dentro de componentes. Veja o exemplo a seguir:
// /pages/movies/@id/+data.js// Ambiente: servidorexport { data }
import fetch from'node-fetch'asyncfunctiondata(pageContext) {
const { id } = pageContext.routeParamsconst response = awaitfetch(https://star-wars.brillout.com/api/films/${id}.json)let filme = await response.json()
// filme é serializado e passado para o cliente. Portanto, escolhemos apenas os// dados que o cliente precisa para minimizar o que é enviado pela rede.
filme = { title: filme.title, release_date: filme.release_date }
O @id no caminho /pages/movie/@id/+data.js indica um parâmetro de rota, e o seu valor fica disponível dentro do pageContext.routeParams.id (veja a documentação de Guias > Roteamento para mais informações).
useData()
importReactfrom'react';
import { useData } from'vike-react/useData';
functionTodoList() {
// Supondo que `useData()` retorne os dados necessários para o componente, incluindo a lista de tarefasconst { todos } = useData();
return (
<div><h1>Lista de Tarefas</h1><ul>
{todos.map(todo => (
<likey={todo.id}style={{textDecoration:todo.completed ? 'line-through' : 'none' }}>
{todo.title}
</li>
))}
);
}
;
useData() possui pacotes específicos para cada framework/biblioteca (vike-react no nosso caso).
O hook data() é utilizado apenas para buscar os dados iniciais de uma página (os dados SSR).
Ao escolher uma ferramenta para desenvolver aplicações web, o panorama inclui opções como Vike, Remix, Next.js, Gatsby e a combinação de React com React Router.
Cada uma tem suas características, projetadas para atender a diferentes necessidades e preferências de desenvolvimento.
Vike se destaca por sua flexibilidade e abordagem inovadora com suporte a múltiplos frameworks, como Vue, React e Svelte.
Ideal para quem busca otimizações específicas de desempenho e está aberto a explorar novas metodologias, como a ideia de ilhas, que carrega apenas os componentes necessários, melhorando o tempo de carregamento.
Remix, por outro lado, foca na renderização no servidor e no carregamento progressivo de dados, priorizando uma experiência da pessoa usuária suave desde o carregamento inicial.
É uma ótima escolha para aplicações que dependem fortemente de dados dinâmicos e querem otimizar a primeira interação do usuário.
Next.js já é bem estabelecido entre desenvolvedores React, oferecendo uma solução completa com renderização estática e do lado do servidor.
Sua vasta comunidade e ecossistema o tornam ideal para quem busca uma solução robusta e comprovada, especialmente para projetos que se beneficiam de SEO e otimizações automáticas.
Gatsby se sobressai na geração de sites estáticos, sendo perfeito para sites que não mudam frequentemente, como blogs e portfólios.
Com otimizações prontas para SEO e performance, Gatsby é a escolha certa para projetos focados em velocidade de carregamento e conteúdo estático.
Por fim, a combinação de React e React Router é a velha conhecida para criar SPAs.
Enquanto permite um controle granular sobre a experiência do usuário e o roteamento, pode não oferecer as mesmas otimizações de desempenho do Vike.
Essa escolha é ideal para quem já está confortável com React e busca uma solução confiável e bem testada para aplicações dinâmicas.
Conclusão
A decisão entre Vike e as outras opções deve ser baseadas nas especificidades do projeto, como necessidades de desempenho, SEO, dinamicidade do conteúdo e familiaridade da equipe com as tecnologias.
Cada ferramenta tem seu lugar, cabendo a você decidir qual se encaixa melhor no contexto do seu projeto.
Se você quiser mergulhar nesse mundo de performance e otimização, super recomendo a formação React: maximizando a performance de Aplicações, em que o instrutor Pedro compartilha várias técnicas que ele usa no dia a dia de trabalho.
