Construindo Single Page Applications (SPA) com Next.js

O Next.js é um framework React robusto que oferece várias ferramentas para criar aplicações web modernas e otimizadas, como renderização no servidor (SSR) e geração de páginas estáticas (SSG). No entanto, ele também suporta a criação de Single Page Applications (SPA), proporcionando a flexibilidade de escolher a melhor estratégia de renderização para cada necessidade.

Neste post, vamos explorar como o Next.js pode ser utilizado para criar uma SPA, entender as vantagens dessa abordagem e discutir as melhores práticas para garantir uma experiência de usuário suave e de alto desempenho.

O que é uma Single Page Application (SPA)?

Uma SPA é uma aplicação web onde a navegação entre páginas acontece sem a necessidade de recarregar a página inteira. Isso é feito por meio de atualizações dinâmicas de conteúdo, carregando apenas os dados necessários via API, o que proporciona uma navegação rápida e uma experiência de usuário mais fluida.

Por que usar Next.js para SPAs?

Embora o Next.js seja mais conhecido por suas capacidades de SSR (Server-Side Rendering) e SSG (Static Site Generation), ele também pode ser configurado para funcionar como uma SPA. Aqui estão alguns dos motivos para usar Next.js como base para uma SPA:

1. Roteamento Integrado: O sistema de roteamento baseado em arquivos do Next.js facilita a criação e o gerenciamento de rotas.
2. Otimização Automática: Mesmo em uma SPA, o Next.js aplica otimizações automáticas, como carregamento preguiçoso (lazy loading) e divisão de código (code splitting).
3. API Routes: O Next.js oferece suporte nativo a rotas de API, facilitando a integração com back-ends ou serviços externos.
4. Facilidade de Migração: Começar com uma SPA no Next.js não significa que você está preso a essa abordagem. No futuro, se necessário, é possível migrar partes do aplicativo para SSR ou SSG sem uma grande reescrita.

Como Criar uma SPA com Next.js

Por padrão, o Next.js suporta renderização no lado do cliente (Client-Side Rendering - CSR), que é o comportamento típico de uma SPA. Vamos ver como configurar uma aplicação Next.js para funcionar exclusivamente como uma SPA.

1. Criando o Projeto Next.js

Comece criando um projeto Next.js com o seguinte comando:

npx create-next-app@latest my-spa
cd my-spa
npm run dev

Isso cria um esqueleto de projeto Next.js e inicia o servidor de desenvolvimento na URL http://localhost:3000.

2. Desabilitando SSR e Focando em CSR

Por padrão, o Next.js tenta renderizar o conteúdo do lado do servidor, o que pode não ser o comportamento desejado para uma SPA. Para garantir que a renderização aconteça somente no lado do cliente, você pode utilizar o useEffect ou o método dynamic com o atributo ssr: false.

Exemplo 1: Uso do useEffect para CSR

Aqui está um exemplo simples de como garantir que a renderização ocorra no lado do cliente:

import { useState, useEffect } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Simula chamada de API
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  if (!data) return <div>Carregando...</div>;

  return (
    <div>
      <h1>Dados da API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Neste exemplo, o componente é renderizado apenas no cliente, usando o useEffect para buscar dados após a montagem do componente.

Exemplo 2: Uso de next/dynamic para CSR

O método dynamic do Next.js permite carregar componentes de maneira assíncrona e pode ser configurado para desabilitar a renderização no servidor.

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/MyComponent'), { ssr: false });

export default function Home() {
  return (
    <div>
      <h1>SPA com Next.js</h1>
      <MyComponent />
    </div>
  );
}

Aqui, o componente MyComponent será carregado apenas no lado do cliente.

3. Configuração de Rotas em SPA

O Next.js possui um sistema de rotas baseado na estrutura de diretórios. Em uma SPA, você deseja que a navegação entre "páginas" seja tratada de maneira dinâmica, sem recarregar a página inteira.

A navegação em SPAs no Next.js pode ser feita usando o componente Link da biblioteca:

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

Ao usar o componente Link, o Next.js gerencia automaticamente a navegação entre as páginas, sem recarregar o navegador.

4. Carregamento de Dados com Rotas de API

As rotas de API são uma maneira eficiente de gerenciar chamadas de back-end em uma SPA Next.js. Você pode criar uma rota de API em pages/api/data.js para simular um endpoint:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Então, no lado do cliente, essa rota pode ser chamada diretamente:

useEffect(() => {

  fetch('/api/data')

    .then(response => response.json())

    .then(data => setData(data));

}, []);

1. Otimizações de Desempenho

Apesar de criar uma SPA com Next.js ser simples, há algumas práticas que ajudam a otimizar o desempenho da aplicação:

• Lazy Loading de Componentes: Carregar componentes sob demanda reduz o peso inicial da aplicação.
• Code Splitting Automático: O Next.js cuida automaticamente da divisão de código, carregando apenas o que é necessário para a página atual.
• Cache de API: Para evitar chamadas repetitivas à API, você pode usar bibliotecas como SWR ou React Query para cachear e revalidar dados de maneira eficiente.

Quando Usar SPA no Next.js?

Optar por uma SPA em vez de SSR ou SSG depende do caso de uso da aplicação:

• Aplicações Interativas: SPAs são ideais para dashboards, painéis administrativos e aplicações com muita interação do usuário, onde o conteúdo muda com frequência.
• Experiência Parecida com Apps Móveis: Se você deseja criar uma aplicação web que se comporte de maneira similar a um aplicativo móvel, uma SPA pode ser a melhor escolha.

Conclusão

Embora o Next.js seja amplamente conhecido por suas capacidades de renderização no servidor e geração estática, ele também é uma ferramenta poderosa para criar Single Page Applications (SPAs). Com seus recursos de roteamento eficiente, APIs integradas e suporte a renderização no lado do cliente, o Next.js oferece a flexibilidade para que os desenvolvedores possam criar aplicações rápidas e dinâmicas, otimizadas para qualquer cenário de uso.

Com a configuração correta e as práticas de otimização, é possível tirar o máximo proveito do Next.js para construir SPAs altamente performáticas e escaláveis.