O cache é uma ferramenta poderosa, mas pode se tornar um problema quando começa a trabalhar contra você. Desde sua estreia na versão 13, o cache agressivo padrão do Next.js tem causado dados desatualizados, incompatibilidades com fontes de backend e comportamentos inconsistentes.

O Next.js 15 introduz o Dynamic IO caching, uma forma mais flexível e granular de controlar o que é armazenado em cache. Isso equilibra desempenho e frescor dos dados sem forçar os desenvolvedores a escolher entre cache completo ou nenhum cache.

Problemas com cache no Next.js

O cache do Next.js não depende de um único mecanismo. Em vez disso, utiliza múltiplas estratégias, incluindo cache de dados e memoização de requisições. Embora eficaz, isso pode resultar em cache excessivo, ignorando mudanças dinâmicas e servindo dados desatualizados.

Por exemplo, uma aplicação simples que faz uma requisição assíncrona a uma API pode acabar servindo dados em cache em vez de dados atualizados.

async function fetchImage() {
  const req = await fetch(
    `https://api.unsplash.com/photos/random?client_id=${apiKey}`
  );
  const res = await req.json();
  return {
    imageURL: res.urls.full,
  };
}

Por padrão, o Next.js irá armazenar em cache esta página, mesmo que busque conteúdo dinâmico. Para evitar isso, é possível adicionar cache: 'no-store' à chamada de busca.

async function fetchImage() {
  const req = await fetch(
    `https://api.unsplash.com/photos/random?client_id=${apiKey}`,
    {
      cache: "no-store",
    }
  );
  const res = await req.json();
  return {
    imageURL: res.urls.full,
  };
}

Introduzindo o Dynamic IO

O Dynamic IO é um recurso experimental no Next.js 15 que inverte o modelo de cache padrão. Em vez de armazenar em cache todas as operações assíncronas, ele permite que você escolha o que armazenar. Isso oferece controle sobre a frescura dos dados sem precisar contornar os padrões do framework.

npm install next@canary

Para habilitar o Dynamic IO, adicione a flag experimental dynamicIO no arquivo next.config.ts e defina como true.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

O uso do Dynamic IO permite que o Next.js trate a página como dinâmica por padrão, garantindo dados atualizados sem camadas de cache.

Conclusão

O Dynamic IO representa uma evolução significativa na forma como o cache é tratado no Next.js, abordando pontos problemáticos de cache excessivo e permitindo fluxos de trabalho mais intencionais e orientados para o desempenho.