Static Site Generation (SSG)

É a geração das páginas estaticamente no momento que a nossa aplicação ocorre o build. Quando me refiro a página estática para aqueles que não têm conhecimento, estou dizendo que nenhum servidor interfere na montagem daquela página, e também que o lado do cliente não interfere.

Por conta das páginas pré-renderizadas o tempo de carregamento é muito mais rápido.

Outra vantagem é a segurança, já que a página é estática e não tem interação direta com o servidor

Abaixo mostro um exemplo utilizando NextJS, já que é um framework React que tem suporte a SSG.

// page.tsx

import ListaTodos from './components/ListaTodos';

export default async function Home() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos');

  const todos = await res.json();
  return (
    <div>
      <h1>Lista de Produtos</h1>
      <ListaTodos todos={todos} />
    </div>
  );
}

O conteúdo mostrado para o usuário ao acessar a página será de HTML puro. No código acima o async direto no componente HOME para efetuar a busca dos dados, assim ele buscará durante o tempo do build sendo gerado uma página estática.

O fetch gera conteúdo antes do deploy fazendo ele ser estático automaticamente.

// components/ListaTodos.tsx

export default function ListaTodos({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

A partir da versão 13 do Next.JS (com o APP Router) não é mais preciso usar o getStaticProps para gerar páginas estáticas. O SSG simplifica e integra diretamente no componente da página. Ao usar o fetch direto no componente, ele gera as páginas estaticamente por padrão.

Nota: Código feito usando a versão 14 do Next.JS

Single Page Application (SPA)

Quando o usuário navegar por uma aplicação na qual ela carrega uma única pagina HTML. Que dinamicamente tem seu conteúdo atualizado no decorrer que o usuário a utiliza, sem precisar ter um recarregamento completo da página do servidor. Abaixo mostro uma aplicação SPA com roteamento.

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

function Home() {
  return <h1>Página Inicial</h1>;
}

function Contact() {
  return <h1>Contato</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Início</Link> <Link to="/contact">Contato</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

Ao utilizar o Router ele gerencia o roteamento do lado do cliente e observar a url para renderizar o componente correto sem ter a necessidade de recarregar a página. O Routes e Route definem as rotas da aplicação e quais componentes devem ser renderizados em cada uma.

A um outro conceito chamado MPA que é quando o usuário navega entre uma página e outra e toda vez ocorre uma requisição para o servidor solicitando a nova página HTML.

Dependendo do projeto e do grau de complexidade da aplicação o ideal é utilizar o SPA. Por exemplo em casos na qual é necessária uma navegação frequente como aplicações interativas ou dashboards operacionais/administrativos. Aplicações com necessitam de atualizações em tempo real como um sistema de rastreamento veicular.

Portanto antes de iniciar seu projeto análise com calma qual arquitetura será necessária utilizar.

Server-Side Rendering (SSR)

O SSR é uma técnica de renderização de conteúdo que as aplicações web usam. O servidor gera a página (HTML) antes de enviá-la para o cliente (Navegador), assim melhorando o desempenho da página em questão, pois o conteúdo já está pronto para ser mostrado no browser.

Uma das vantagens de se usar o SSR é o SEO, que os motores de busca consideram muito importante, pois entregam a página já montada para o navegador, permitindo uma melhor indexação. Outra vantagem importante é a otimização por conta da página já carregar com o conteúdo do lado do servidor. Sendo assim melhorando a experiência principalmente daqueles que possuem conexões lentas.

É possível implementar o SSR utilizando ExpressJS e NodeJS, e também apenas com o NextJS. Abaixo mostro um exemplo utilizando NextJS.

import React from 'react';

const currentTime = new Date().toLocaleTimeString();

function App() {
  return (
    <div>
      <p>Hora atual do servidor: {currentTime}</p>
    </div>
  );
}

export default App;

Ao fazer uma requisição em uma função assíncrona, o NextJS entende que o conteúdo deve ser renderizado do lado do servidor cada vez que ocorre uma requisição. No exemplo acima, o servidor executa a lógica de pegar a hora atual, monta um HTML e envia para o cliente, que mostra no front (Navegador).