DEV Community

Cover image for Construindo Single Page Applications (SPA) com Next.js
Lucas Pereira de Souza
Lucas Pereira de Souza

Posted on

3

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.

Image description

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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!' });
}
Enter fullscreen mode Exit fullscreen mode

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

useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);
Enter fullscreen mode Exit fullscreen mode

5. 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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay