next-cache-components

Visão Geral

O que é next-cache-components?

next-cache-components é uma skill para Next.js 16+ que habilita estratégias avançadas de cache para componentes React. Ao ativar Cache Components, os desenvolvedores podem combinar conteúdo estático, em cache e dinâmico dentro de uma única rota, melhorando o desempenho e a flexibilidade em aplicações frontend. Essa skill é ideal para equipes que constroem apps web escaláveis com Next.js e desejam controle granular sobre renderização e atualização de dados.

Quem deve usar next-cache-components?

Essa skill é destinada a desenvolvedores frontend que trabalham com Next.js 16 ou superior. É especialmente útil para quem faz deploy na Vercel ou plataformas similares, e para projetos onde otimizar a velocidade de renderização e controlar o tempo de vida do cache são essenciais. Se seu app precisa equilibrar conteúdo estático, dados em cache e atualizações em tempo real, next-cache-components oferece uma solução prática.

Problemas resolvidos pelo next-cache-components

• Habilita Partial Prerendering (PPR) para rotas com conteúdo misto
• Permite cache de dados assíncronos com tempos de vida e tags customizadas
• Simplifica o gerenciamento de componentes estáticos, em cache e dinâmicos
• Melhora o desempenho frontend e a experiência do usuário

Como Usar

Passos para Instalação

• Instale a skill usando o comando:
  npx skills add https://github.com/vercel-labs/next-skills --skill next-cache-components
• Consulte o arquivo SKILL.md para um resumo conciso e exemplos práticos.
• Explore arquivos adicionais como README.md, AGENTS.md e metadata.json para contexto mais aprofundado.

Ativando Cache Components

• No seu next.config.ts, configure:

  import type { NextConfig } from 'next'
  
  const nextConfig: NextConfig = {
    cacheComponents: true,
  }
  
  export default nextConfig
  

• Isso substitui a flag anterior experimental.ppr e ativa Cache Components para seu projeto.

Tipos de Conteúdo Suportados

Estático (Auto-Prerenderizado)

• Use código síncrono e cálculos puros para conteúdo renderizado em tempo de build.
• Exemplo:

  export default function Page() {
    return (
      <header>
        <h1>Our Blog</h1>
        <nav>...</nav>
      </header>
    )
  }
  

Em Cache (diretiva use cache)

• Para dados assíncronos que não precisam ser buscados a cada requisição, use a diretiva use cache e defina o tempo de cache com cacheLife.
• Exemplo:

  async function BlogPosts() {
    'use cache'
    cacheLife('hours')
  
    const posts = await db.posts.findMany()
    return <PostList posts={posts} />
  }
  

Dinâmico (Suspense)

• Para dados que precisam estar sempre atualizados, envolva os componentes com o Suspense do React.
• Exemplo:

  import { Suspense } from 'react'
  
  export default function Page() {
    return (
      <>
        <BlogPosts />  {/* Em cache */}
        <Suspense fallback={<p>Loading...</p>}>
          <UserPreferences />  {/* Dinâmico */}
        </Suspense>
      </>
    )
  }
  

Adaptando ao Seu Projeto

• Use a skill como referência e adapte seu fluxo de trabalho ao seu repositório e ferramentas. Evite copiar literalmente; integre estratégias de cache que atendam às necessidades do seu app.

Perguntas Frequentes

Onde encontro exemplos práticos?

Confira o arquivo SKILL.md para exemplos claros de código e explicações. A aba Files oferece acesso à árvore completa de arquivos, incluindo referências e scripts auxiliares.

next-cache-components é compatível com versões antigas do Next.js?

Não, essa skill é projetada para Next.js 16 ou superior. Para versões anteriores, considere estratégias alternativas de cache.

Como controlo o tempo de vida e as tags do cache?

Use as diretivas cacheLife e cacheTag dentro das funções dos seus componentes para definir durações e tags customizadas. Veja os exemplos no SKILL.md para a sintaxe.

Quando devo usar Suspense para conteúdo dinâmico?

Use Suspense quando precisar de dados em tempo de execução que devem estar sempre atualizados, como preferências do usuário ou informações baseadas em sessão.

next-cache-components é adequado para meu projeto?

Se seu app exige uma mistura de conteúdo estático, em cache e dinâmico em uma única rota e você usa Next.js 16+, essa skill é uma ótima escolha. Para sites puramente estáticos ou apps sem necessidade de dados assíncronos, estratégias de renderização mais simples podem ser suficientes.