O Poder do ISR para E-commerces: Como renderizar 1 Milhão de SKUs sem derrubar o Banco de Dados

Construir um E-commerce ou um catálogo B2B para centenas de usuários é fácil. Qualquer tecnologia antiga consegue entregar. Mas o verdadeiro teste de fogo para a sua arquitetura de software acontece na Black Friday.

Quando 50.000 pessoas acessam simultaneamente a página do produto "iPhone 16 Pro", o que o seu servidor faz? Se ele for ao banco de dados (como PostgreSQL ou MySQL) consultar o nome do produto, o preço e o estoque 50.000 vezes no mesmo segundo, o seu sistema vai colapsar. E não importa o quão cara seja a sua máquina na AWS; o custo será gigantesco e o banco fatalmente vai cair.

Para estancar esse sangramento, o Next.js nos entregou uma das armas arquiteturais mais poderosas da década: o ISR (Incremental Static Regeneration).

Neste artigo, vamos dissecar o que é o ISR e como ele permite que o seu E-commerce corporativo rode como páginas HTML estáticas ultrarrápidas, sem nunca mostrar um preço desatualizado.

---

1. A Armadilha do SSR (Server-Side Rendering)

Durante anos, o SSR foi o Santo Graal. Quando um cliente abria a página de um produto, o servidor Node.js buscava os dados mais frescos no banco de dados, montava o HTML e enviava. O SEO (Google) adorava, o usuário via o dado atualizado, mas havia um custo.

O SSR exige processamento em tempo real a cada requisição. Se o tráfego quadruplicar, a sua conta de servidor e o consumo do banco de dados também quadruplicam. O gargalo da infraestrutura sempre foi a comunicação com o banco de dados.

2. A Virada de Chave: ISR (Regeneração Estática Incremental)

O ISR muda a regra do jogo. Em vez de calcular a página para cada usuário, o servidor pega a página do iPhone e a "congela" em um HTML puro (Cache) distribuído na CDN global da Vercel.

Quando 50.000 usuários tentam acessar o iPhone, a Vercel entrega o HTML estático que já está pronto na velocidade da luz. O banco de dados recebe zero impacto.

Mas e se o gerente de vendas mudar o preço do iPhone no ERP de R$ 9.000 para R$ 8.500? É aqui que a mágica "Incremental" acontece.

O Next.js fica escutando em background. Ele só reconstrói a página HTML uma única vez nos bastidores quando o preço muda, e então substitui silenciosamente o arquivo congelado antigo pelo novo. O usuário nunca vê telas de carregamento.

---

3. Mão no Código: ISR Baseado em Tempo

No App Router do Next.js moderno, configurar o ISR padrão é assustadoramente simples. Abaixo, temos um exemplo de Clean Code de uma página de produto que bate em uma API ou banco de dados de um ERP legadão (que é lento e caro de ser acessado toda hora).

// src/app/produto/[id]/page.tsx
import { notFound } from 'next/navigation';

interface ProductData {
  id: string;
  name: string;
  price: number;
}

// 1. Simulação da chamada pesada e demorada ao ERP
async function getProductFromERP(id: string): Promise<ProductData> {
  const res = await fetch(`https://api.meu-erp.com/products/${id}`, {
    // A MÁGICA ACONTECE AQUI:
    // O Next.js vai guardar o resultado desta requisição em cache.
    // A cada 60 segundos (no máximo), se alguém acessar a página, ele faz
    // uma única nova busca no ERP em background para atualizar o cache.
    next: { revalidate: 60 } 
  });
  
  if (!res.ok) return null;
  return res.json();
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  // Mesmo que 1 milhão de pessoas entrem aqui, o getProductFromERP 
  // será chamado no máximo 1 vez por minuto.
  const product = await getProductFromERP(params.id);

  if (!product) {
    notFound();
  }

  return (
    <div className="p-10">
      <h1 className="text-4xl font-bold">{product.name}</h1>
      <p className="text-2xl text-green-500 font-semibold mt-4">
        R$ {product.price.toFixed(2)}
      </p>
      <button className="bg-blue-600 text-white mt-6 px-8 py-3 rounded">
        Comprar Agora
      </button>
    </div>
  );
}

Neste modelo, o seu banco de dados "respira". Independentemente do tráfego, a carga do seu banco está restrita a uma chamada por minuto por página acessada.

---

4. O Nível Ouro: On-Demand Revalidation (via Webhook)

O ISR temporal (ex: 60 segundos) é fantástico para estoques e portais de notícias. Mas em sistemas corporativos sensíveis, se um preço cair de R$ 9.000 para R$ 900 por erro humano no ERP, você não quer esperar nem 60 segundos com o cache desatualizado. Você quer que a tela mude imediatamente.

Para isso, nós usamos o On-Demand Revalidation (Revalidação sob demanda). Nós criamos uma rota segura que o seu ERP (Protheus, SAP, Bling) pode "chamar" avisando que o preço mudou.

// src/app/api/revalidate-product/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { revalidatePath } from 'next/cache';

// 1. Essa API não deve rodar no Edge, pois o revalidatePath 
// exige a arquitetura completa do Next.js Serverless.
export async function POST(request: NextRequest) {
  try {
    // 2. Proteção agressiva. Apenas o nosso ERP pode chamar isso
    const secret = request.headers.get('x-revalidate-token');
    if (secret !== process.env.REVALIDATION_SECRET_TOKEN) {
      return NextResponse.json({ message: 'Token Inválido' }, { status: 401 });
    }

    // 3. Pegamos qual produto sofreu alteração no ERP
    const body = await request.json();
    const productId = body.product_id;

    if (!productId) {
      return NextResponse.json(
        { message: 'ID do produto é obrigatório' }, 
        { status: 400 }
      );
    }

    // 4. O Golpe Final: O Next.js destrói o cache antigo desta página específica
    // e na próxima vez que ela for acessada, vai exibir o HTML novinho!
    revalidatePath(`/produto/${productId}`);

    return NextResponse.json({ revalidated: true, now: Date.now() });

  } catch (err) {
    return NextResponse.json(
      { message: 'Erro interno ao revalidar' }, 
      { status: 500 }
    );
  }
}

Quando o seu ERP disparar essa API, a Vercel vai purgar o cache do produto específico em milissegundos. Assim, o seu site tem a resiliência infinita de um site estático e a precisão comercial de um sistema em tempo real, atingindo a Maturidade do SaaS Perfeito.

---

Escale Sem Surpresas

O que derruba negócios digitais na sexta-feira de Black Friday raramente é a falta de processador. O que derruba as empresas é o gargalo na arquitetura de acesso a dados. Dominar o ISR é a diferença entre chorar com o site fora do ar perdendo vendas, e ir dormir sabendo que a sua infraestrutura aguenta o triplo da carga exigida.