2a:["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O Partial Pre-Rendering, que evoluiu para Cache Components, permite: header, menu, footers e partes estáticas sejam fixados em poucos bytes para todo mundo; blocos dinâmicos (recomendações, feeds, dashboards) continuam mudando sem afetar o resto da tela. O segredo? A página é dividida em zonas – cada trecho recebe o tipo de renderização ideal para ele."}] 2b:["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-green-500/10 border-green-500/20 text-green-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-green-400","children":[["$","span",null,{"children":"✅"}],"Dica"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Use Partial Pre-Rendering para construir aplicativos com mudança rápida de estado, sem sacrificar SEO nem UX: marketing, ecommerce, SaaS, blogs e muito mais."}]]}]]}] 2c:["$","section","4",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Como funcionam os Cache Components no Next 16?"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Os Cache Components são a evolução do conceito. Agora, ao ativar a flag dos Cache Components no next.config.js, você instrui quais partes podem ser armazenadas e compartilhadas de requisição em requisição, enquanto outros blocos da mesma página continuam dinâmicos como sempre. Parou de ser tudo ou nada."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-blue-500/10 border-blue-500/20 text-blue-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-blue-400","children":[["$","span",null,{"children":"ℹ️"}],"Atenção"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O nome mudou, mas o princípio é o mesmo: segure no cache o que nunca muda e libere processamento só para o que realmente importa. Isso alivia builds, economiza servidor e faz milagres no Google PageSpeed."}]]}]]}]]]}] 2d:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Alavancando performance: quando usar estático, dinâmico ou misto?"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Estático: use para menus, logotipos, footers, conteúdos evergreen e qualquer bloco que não muda fácil. Dinâmico: para personalização, feeds, listas de produtos, dashboards, autenticação. Misto: a página usa ambos e reage melhor mesmo sob pressão ou tráfego altíssimo."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-yellow-500/10 border-yellow-500/20 text-yellow-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-yellow-400","children":[["$","span",null,{"children":"⚠️"}],"Atenção"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Nem tudo deve ser dinâmico! O erro mais comum dos devs iniciantes em SSR é abrir mão do conteúdo estático – e com isso perder velocidade, SEO e aumentar instabilidade."}]]}]]}]]]}] 2e:["$","section","6",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Ativando Cache Components: o passo-a-passo essencial"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"1. No seu next.config.js adicione cacheComponents: true na seção experimental. 2. Separe seus componentes pensando o que de fato muda (dinâmico) e o que fica igual (estático). 3. Use funções nativas do Next para informar onde cada bloco deve ser cacheado – sem mexer em SSR/SS