[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"post:\u002Fpt\u002Fpost\u002Fastro-arquitetura-de-ilhas-performance-e-onde-o-framework-realmente-se-encaixa":3,"categories-pt":2610},{"post":4,"related":2535,"translations":2608,"resolved":17},{"id":5,"slug":6,"title":7,"excerpt":8,"image":9,"featured":10,"groupId":11,"publishedAt":12,"readingTime":13,"views":14,"author":15,"category":18,"tags":22,"contentJson":29,"metaTitle":2532,"metaDescription":2533,"updatedAt":2534},"bf825d04-3586-4b66-8427-6afc5ceaad98","astro-arquitetura-de-ilhas-performance-e-onde-o-framework-realmente-se-encaixa","Astro: Arquitetura de Ilhas, Performance e Onde o Framework Realmente Se Encaixa","O Astro desafia o status quo dos frameworks modernos ao priorizar HTML estático e isolar a interatividade em ilhas de código independentes.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785718482980-featured-6cgkhm.webp",false,"cb62459e-7ace-43d3-a545-661c5695e925","2026-08-03T00:54:54.243681+00:00",41,83,{"name":16,"avatar":17},"Genildo Souza",null,{"slug":19,"name":20,"color":21},"code-development","Programação & Dev","#8b5cf6",[23,26],{"slug":24,"name":25},"javascript","JavaScript",{"slug":27,"name":28},"typescript","TypeScript",{"type":30,"content":31},"doc",[32,43,52,59,65,72,78,84,90,96,102,108,114,150,156,162,168,177,196,202,214,363,368,389,408,410,416,422,428,438,448,482,499,524,540,550,556,562,595,602,619,648,653,661,669,685,692,704,712,735,747,755,763,770,813,825,841,857,867,877,883,889,890,896,902,926,932,939,945,975,982,1020,1027,1034,1051,1057,1092,1100,1127,1134,1141,1147,1153,1372,1378,1379,1385,1397,1403,1415,1421,1427,1433,1440,1446,1452,1468,1475,1482,1499,1505,1522,1566,1573,1580,1622,1628,1634,1657,1663,1673,1680,1686,1719,1745,1783,1789,1795,1801,1835,1841,1884,1885,1891,1902,1918,1924,1930,1960,1966,1972,1984,1991,2009,2021,2027,2044,2050,2056,2062,2174,2180,2191,2197,2198,2204,2210,2221,2227,2228,2234,2250,2256,2263,2269,2276,2292,2299,2316,2323,2329,2335,2341,2342,2348,2529],{"type":33,"attrs":34},"summaryBox",{"id":35,"items":36,"title":42},"sum_ccq8s89d",[37,38,39,40,41],"O Astro prioriza a entrega de HTML estático, enviando JavaScript ao navegador apenas para componentes que exigem interatividade.","A arquitetura de ilhas permite isolar componentes interativos, reduzindo drasticamente o peso das páginas e o custo de hidratação.","O framework é agnóstico, permitindo o uso simultâneo de diferentes tecnologias como React, Svelte e Vue na mesma página.","Diretivas de hidratação como client:visible e client:idle oferecem controle preciso sobre o carregamento de scripts no cliente.","A estrutura baseada em HTML puro facilita a indexação por buscadores e melhora a eficiência de processamento por agentes de IA.","Arquitetura de Ilhas no Astro",{"type":44,"attrs":45,"content":48},"heading",{"id":46,"level":47},"h_8v2x4yf4",2,[49],{"text":50,"type":51},"1. Introdução e Conceitos","text",{"type":53,"attrs":54,"content":56},"paragraph",{"id":55},"p_wm2b276p",[57],{"text":58,"type":51},"Todo framework carrega uma aposta sobre o que a web deveria ser. React apostou em componentes e estado. Next.js apostou em renderização híbrida centrada em aplicações. O Astro fez uma aposta diferente: a maior parte do que colocamos na tela nunca precisou de JavaScript, então o framework deveria começar do zero absoluto de código no cliente e só adicionar o que for estritamente necessário.",{"type":53,"attrs":60,"content":62},{"id":61},"p_29dj8ddk",[63],{"text":64,"type":51},"Essa frase resume o projeto inteiro. O Astro é um framework para construir sites orientados a conteúdo — blogs, documentação, e-commerce, marketing, portfólios — que compila páginas em HTML estático por padrão e só envia JavaScript para o navegador quando um componente explicitamente pede interatividade.",{"type":44,"attrs":66,"content":69},{"id":67,"level":68},"h_aq4sia0v",3,[70],{"text":71,"type":51},"1.1 O problema que o Astro resolve",{"type":53,"attrs":73,"content":75},{"id":74},"p_pgy105nh",[76],{"text":77,"type":51},"Frameworks como React, Vue e Svelte nasceram para construir aplicações: dashboards, ferramentas internas, produtos SaaS. Quando usados para montar um site de conteúdo, eles carregam consigo um custo que não combina com o problema — o runtime inteiro do framework, o hidratador, o roteador, muitas vezes dezenas ou centenas de kilobytes de JavaScript, mesmo que 90% da página seja texto estático. Esse excesso tem nome: a \"taxa de JavaScript\" que o usuário paga antes de conseguir interagir com uma página que, na prática, quase não precisa de interação nenhuma.",{"type":53,"attrs":79,"content":81},{"id":80},"p_eri36irj",[82],{"text":83,"type":51},"O Astro inverte a pergunta. Em vez de \"como faço essa aplicação JavaScript renderizar também no servidor\", ele pergunta \"como eu mantenho a página em HTML puro e abro exceções pontuais para JavaScript\". A diferença parece sutil, mas muda a arquitetura inteira do framework.",{"type":53,"attrs":85,"content":87},{"id":86},"p_dbv6ctmb",[88],{"text":89,"type":51},"Essa decisão resolve um segundo problema, tão real quanto o primeiro, embora raramente discutido no mesmo fôlego: o custo de servir conteúdo para quem lê sem executar JavaScript. Cada vez mais desse tráfego não vem de um navegador com um humano do outro lado, e sim de agentes de IA — crawlers de treinamento, sistemas de busca que respondem em tempo real, assistentes que navegam páginas em nome de alguém. Esse tipo de cliente não espera hidratação e não roda scripts: ele lê o HTML que chega e extrai dali o que precisa. Uma página que já nasce como HTML limpo e completo, sem depender de JavaScript para existir, custa uma fração dos tokens para ser processada por esses agentes — a mesma arquitetura que elimina o excesso de JavaScript para o navegador reduz, pelo mesmo motivo estrutural, o custo de leitura por máquina. É o mesmo pilar, servindo dois públicos.",{"type":44,"attrs":91,"content":93},{"id":92,"level":68},"h_rzw1929l",[94],{"text":95,"type":51},"1.2 Arquitetura de Ilhas (Islands Architecture)",{"type":53,"attrs":97,"content":99},{"id":98},"p_iuy7fjjc",[100],{"text":101,"type":51},"O termo \"component island\" foi cunhado em 2019 por Katie Sylor-Miller, então arquiteta de front-end do Etsy, e detalhado no ano seguinte por Jason Miller, criador do Preact. O Astro foi o primeiro framework mainstream a construir esse padrão como base de sua arquitetura, e não como otimização posterior.",{"type":53,"attrs":103,"content":105},{"id":104},"p_qxmgfxg1",[106],{"text":107,"type":51},"A ideia central: a página é renderizada quase inteiramente como HTML estático no build ou no servidor. Dentro dela, certos componentes — as ilhas — são isolados e hidratados individualmente no cliente, cada um com seu próprio pedaço de JavaScript, independente dos demais. Uma ilha não sabe que a outra existe, a menos que você explicitamente as conecte.",{"type":53,"attrs":109,"content":111},{"id":110},"p_eblr6s2z",[112],{"text":113,"type":51},"Isso resolve dois problemas ao mesmo tempo:",{"type":115,"attrs":116,"content":119},"bulletList",{"id":117,"tight":118},"ul_tja11tcs",true,[120,136],{"type":121,"attrs":122,"content":124},"listItem",{"id":123},"li_7ffoprtl",[125],{"type":53,"attrs":126,"content":128},{"id":127},"p_fb9v6vbz",[129,134],{"text":130,"type":51,"marks":131},"Payload mínimo.",[132],{"type":133},"bold",{"text":135,"type":51}," Se a página tem um carrossel de imagens e um formulário de newsletter, só o JavaScript desses dois componentes é enviado — não o framework inteiro, não o roteador, não a lógica de hidratação de partes que já são HTML morto.",{"type":121,"attrs":137,"content":139},{"id":138},"li_v5rmntoc",[140],{"type":53,"attrs":141,"content":143},{"id":142},"p_tx40hvc9",[144,148],{"text":145,"type":51,"marks":146},"Isolamento de falhas e de framework.",[147],{"type":133},{"text":149,"type":51}," Como cada ilha hidrata de forma independente, é possível ter um carrossel em Svelte e um formulário em React na mesma página, cada um dentro de seu próprio limite. O Astro nasceu agnóstico de framework de UI e continua assim.",{"type":151,"attrs":152},"imageFigure",{"id":153,"alt":17,"src":154,"caption":155},"fig_2nk4b7dg","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Fcontent\u002F1785717955380-content-b3jbbq.webp","Diagrama payload tradicional vs astro",{"type":53,"attrs":157,"content":159},{"id":158},"p_2ki2ezas",[160],{"text":161,"type":51},"O ganho fica claro quando se compara o payload lado a lado: numa SPA tradicional, o usuário paga o custo de runtime, roteador e hidratação antes mesmo de poder interagir com uma página que, na prática, é majoritariamente texto. No Astro, esse custo praticamente desaparece — o HTML é a saída natural do framework, não uma etapa intermediária a caminho do JavaScript.",{"type":53,"attrs":163,"content":165},{"id":164},"p_zaa3ip0u",[166],{"text":167,"type":51},"Na prática, uma página Astro tem esta cara:",{"type":169,"attrs":170,"content":174},"codeBlock",{"id":171,"language":172,"highlighted":173},"code_lwcj4b0o","astro","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Findex.astro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Este bloco roda apenas no servidor\u002Fbuild. Nunca chega ao navegador.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Layout \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Flayouts\u002FLayout.astro'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Newsletter \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002FNewsletter.jsx'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F componente React\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Contador \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002FContador.astro'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> produtos\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'https:\u002F\u002Fapi.loja.com\u002Fprodutos'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">then\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> r.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">json\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Layout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Loja\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Astro\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Catálogo<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    {produtos.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{p.nome} — R$ {p.preco.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">toFixed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    ))}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  <!-- Ilha de interatividade: só este componente envia JS ao cliente -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Newsletter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> client:visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Layout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[175],{"text":176,"type":51},"---\n\u002F\u002F src\u002Fpages\u002Findex.astro\n\u002F\u002F Este bloco roda apenas no servidor\u002Fbuild. Nunca chega ao navegador.\nimport Layout from '..\u002Flayouts\u002FLayout.astro';\nimport Newsletter from '..\u002Fcomponents\u002FNewsletter.jsx'; \u002F\u002F componente React\nimport Contador from '..\u002Fcomponents\u002FContador.astro';\n\nconst produtos = await fetch('https:\u002F\u002Fapi.loja.com\u002Fprodutos').then(r => r.json());\n---\n\n\u003CLayout title=\"Loja Astro\">\n  \u003Ch1>Catálogo\u003C\u002Fh1>\n\n  \u003Cul>\n    {produtos.map((p) => (\n      \u003Cli>{p.nome} — R$ {p.preco.toFixed(2)}\u003C\u002Fli>\n    ))}\n  \u003C\u002Ful>\n\n  \u003C!-- Ilha de interatividade: só este componente envia JS ao cliente -->\n  \u003CNewsletter client:visible \u002F>\n\u003C\u002FLayout>\n",{"type":53,"attrs":178,"content":180},{"id":179},"p_h64jtv07",[181,183,188,190,194],{"text":182,"type":51},"Repare no que acontece aqui: a lista de produtos é buscada no servidor e renderizada como HTML puro — nenhum JavaScript de listagem chega ao navegador. O componente ",{"text":184,"type":51,"marks":185},"Newsletter",[186],{"type":187},"code",{"text":189,"type":51},", escrito em React, é a única ilha da página, e ela só é hidratada quando entra na viewport, graças à diretiva ",{"text":191,"type":51,"marks":192},"client:visible",[193],{"type":187},{"text":195,"type":51},".",{"type":44,"attrs":197,"content":199},{"id":198,"level":68},"h_w6so3qay",[200],{"text":201,"type":51},"1.3 As diretivas de hidratação: o controle fino que define o Astro",{"type":53,"attrs":203,"content":205},{"id":204},"p_c71db84n",[206,208,212],{"text":207,"type":51},"O que torna a arquitetura de ilhas prática, e não apenas conceitual, é o conjunto de diretivas ",{"text":209,"type":51,"marks":210},"client:*",[211],{"type":187},{"text":213,"type":51}," que controlam quando e como cada ilha ganha vida no navegador:",{"type":215,"attrs":216,"content":218},"table",{"id":217},"tbl_5mkz53bk",[219,242,265,293,319,341],{"type":220,"content":221},"tableRow",[222,233],{"type":223,"attrs":224,"content":226},"tableHeader",{"align":17,"colspan":225,"rowspan":225,"colwidth":17},1,[227],{"type":53,"attrs":228,"content":230},{"id":229},"p_fbcrm3x6",[231],{"text":232,"type":51},"Diretiva",{"type":223,"attrs":234,"content":235},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[236],{"type":53,"attrs":237,"content":239},{"id":238},"p_47ncxmth",[240],{"text":241,"type":51},"Quando hidrata",{"type":220,"content":243},[244,256],{"type":245,"attrs":246,"content":247},"tableCell",{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[248],{"type":53,"attrs":249,"content":251},{"id":250},"p_n0nvkn0v",[252],{"text":253,"type":51,"marks":254},"client:load",[255],{"type":187},{"type":245,"attrs":257,"content":258},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[259],{"type":53,"attrs":260,"content":262},{"id":261},"p_gk4aw032",[263],{"text":264,"type":51},"Imediatamente, assim que a página carrega",{"type":220,"content":266},[267,278],{"type":245,"attrs":268,"content":269},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[270],{"type":53,"attrs":271,"content":273},{"id":272},"p_6yh4rtd0",[274],{"text":275,"type":51,"marks":276},"client:idle",[277],{"type":187},{"type":245,"attrs":279,"content":280},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[281],{"type":53,"attrs":282,"content":284},{"id":283},"p_6oj5wvos",[285,287,291],{"text":286,"type":51},"Quando o navegador estiver ocioso (",{"text":288,"type":51,"marks":289},"requestIdleCallback",[290],{"type":187},{"text":292,"type":51},")",{"type":220,"content":294},[295,305],{"type":245,"attrs":296,"content":297},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[298],{"type":53,"attrs":299,"content":301},{"id":300},"p_vjnkdbm5",[302],{"text":191,"type":51,"marks":303},[304],{"type":187},{"type":245,"attrs":306,"content":307},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[308],{"type":53,"attrs":309,"content":311},{"id":310},"p_qwf8i3m2",[312,314,318],{"text":313,"type":51},"Quando o componente entra na viewport (",{"text":315,"type":51,"marks":316},"IntersectionObserver",[317],{"type":187},{"text":292,"type":51},{"type":220,"content":320},[321,332],{"type":245,"attrs":322,"content":323},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[324],{"type":53,"attrs":325,"content":327},{"id":326},"p_1apaxy8e",[328],{"text":329,"type":51,"marks":330},"client:media={query}",[331],{"type":187},{"type":245,"attrs":333,"content":334},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[335],{"type":53,"attrs":336,"content":338},{"id":337},"p_rf0nelni",[339],{"text":340,"type":51},"Quando um media query CSS é satisfeito (ex.: só em telas grandes)",{"type":220,"content":342},[343,354],{"type":245,"attrs":344,"content":345},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[346],{"type":53,"attrs":347,"content":349},{"id":348},"p_5lec3wiv",[350],{"text":351,"type":51,"marks":352},"client:only={\"react\"}",[353],{"type":187},{"type":245,"attrs":355,"content":356},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[357],{"type":53,"attrs":358,"content":360},{"id":359},"p_srqfmz7d",[361],{"text":362,"type":51},"Renderiza somente no cliente, pulando o HTML do servidor",{"type":151,"attrs":364},{"id":365,"alt":17,"src":366,"caption":367},"fig_dbruoj43","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Fcontent\u002F1785718065909-content-yalbob.webp","As quatro diretivas de hidratação do Astro representadas como gatilhos: client:load (acionamento crítico e imediato), client:idle (aguarda ociosidade do navegador), client:visible (aciona ao entrar na viewport) e client:media (baseado em media query)",{"type":53,"attrs":369,"content":371},{"id":370},"p_037phld5",[372,374,377,379,382,384,387],{"text":373,"type":51},"Essa granularidade é o que separa o Astro de uma simples \"SSG com React embutido\". Um site típico de e-commerce pode ter um menu que hidrata com ",{"text":275,"type":51,"marks":375},[376],{"type":187},{"text":378,"type":51}," (não é crítico), um carrinho de compras com ",{"text":253,"type":51,"marks":380},[381],{"type":187},{"text":383,"type":51}," (crítico desde o primeiro momento) e um widget de recomendações que só hidrata com ",{"text":191,"type":51,"marks":385},[386],{"type":187},{"text":388,"type":51},", porque o usuário pode nem rolar até ele.",{"type":53,"attrs":390,"content":392},{"id":391},"p_xku3su18",[393,395,399,401,406],{"text":394,"type":51},"Em 2024 o Astro introduziu as ",{"text":396,"type":51,"marks":397},"Server Islands",[398],{"type":133},{"text":400,"type":51},", que estendem essa lógica para o servidor: um componente pode ser marcado como adiado, com um HTML de ",{"text":402,"type":51,"marks":403},"fallback",[404],{"type":405},"italic",{"text":407,"type":51}," enviado imediatamente enquanto o servidor busca dados dinâmicos ou por usuário (um contador de carrinho, uma saudação personalizada) em segundo plano, sem bloquear o restante da página. Isso resolve uma limitação clássica das ilhas clássicas: páginas com algum trecho que depende de dados por requisição já não precisam escolher entre esperar tudo ou jogar tudo para o cliente.",{"type":409},"horizontalRule",{"type":44,"attrs":411,"content":413},{"id":412,"level":68},"h_jlv5v7r8",[414],{"text":415,"type":51},"2. Análise Comparativa: Onde o Astro Vence e Onde Ele Sofre",{"type":53,"attrs":417,"content":419},{"id":418},"p_nibxmbzu",[420],{"text":421,"type":51},"Nenhuma arquitetura resolve todos os problemas igualmente bem — e um artigo técnico que promete o contrário não merece confiança. A separação entre onde a aposta do Astro compensa e onde ela cobra um preço começa aqui, sem meio-termo.",{"type":44,"attrs":423,"content":425},{"id":424,"level":68},"h_46i7ows4",[426],{"text":427,"type":51},"2.1 Pontos fortes",{"type":53,"attrs":429,"content":431},{"id":430},"p_ue8fq6l7",[432,436],{"text":433,"type":51,"marks":434},"Performance por padrão.",[435],{"type":133},{"text":437,"type":51}," Como o HTML é a saída natural do framework e o JavaScript é opt-in, projetos Astro tendem a começar com métricas de Core Web Vitals — LCP, TBT, CLS — sensivelmente melhores do que equivalentes em frameworks centrados em SPA, sem que o time precise configurar nada de especial para isso. A frase que resume a filosofia, retirada da própria documentação do projeto, é direta: deveria ser quase impossível construir um site lento com o Astro.",{"type":53,"attrs":439,"content":441},{"id":440},"p_bnxqz1s3",[442,446],{"text":443,"type":51,"marks":444},"SEO.",[445],{"type":133},{"text":447,"type":51}," Motores de busca indexam HTML renderizado; conteúdo que depende de hidratação no cliente para aparecer é historicamente mais arriscado para rastreamento e indexação, mesmo com as melhorias recentes dos crawlers. Como o Astro entrega HTML completo por padrão — sem depender de JavaScript para o conteúdo principal existir — o SEO técnico vem de graça, sem exigir estratégias paralelas de renderização.",{"type":53,"attrs":449,"content":451},{"id":450},"p_r61ru5dx",[452,456,458,462,464,468,470,474,476,480],{"text":453,"type":51,"marks":454},"Um contraponto se impõe aqui, porque é fácil exagerar a diferença.",[455],{"type":405},{"text":457,"type":51}," Frameworks como o Next.js, com App Router e Server Components, também são capazes de entregar HTML completo e bem indexável — a diferença não está em \"quem consegue\" SEO forte, mas em quanto esforço é preciso para chegar lá. No Astro, HTML pronto é o caminho de menor resistência: é o que acontece quando você não faz nada de especial. No Next.js, o mesmo resultado depende de decisões corretas ao longo do caminho — cuidado com o limite de ",{"text":459,"type":51,"marks":460},"\"use client\"",[461],{"type":187},{"text":463,"type":51},", atenção a quando ",{"text":465,"type":51,"marks":466},"generateMetadata",[467],{"type":187},{"text":469,"type":51}," depende de dados dinâmicos como cookies ou headers (o que pode virar gargalo e atrasar os metadados se não for tratado, como discutimos na Seção 4.4 sobre PPR), e garantia de que conteúdo dentro de um ",{"text":471,"type":51,"marks":472},"\u003CSuspense>",[473],{"type":187},{"text":475,"type":51}," não fique ausente para crawlers que não esperam o ",{"text":477,"type":51,"marks":478},"streaming",[479],{"type":405},{"text":481,"type":51}," terminar.",{"type":53,"attrs":483,"content":485},{"id":484},"p_pxh6prdt",[486,488,491,493,497],{"text":487,"type":51},"Na prática, o Google e os crawlers mais importantes hoje executam JavaScript e resolvem ",{"text":477,"type":51,"marks":489},[490],{"type":405},{"text":492,"type":51}," razoavelmente bem, então a diferença de indexação pura tende a ser menor do que era há alguns anos. Mas motores de busca menores, bots que geram ",{"text":494,"type":51,"marks":495},"preview",[496],{"type":405},{"text":498,"type":51}," de link (Open Graph, Twitter Cards), scrapers de SEO técnico e ferramentas de monitoramento — que frequentemente não executam JavaScript — continuam se beneficiando muito mais de HTML pronto de imediato. É por isso que um teste rápido em Astro costuma \"parecer\" mais nativo: ele não é tecnicamente impossível de igualar em outro framework, mas é o resultado padrão em vez de um objetivo que precisa ser configurado.",{"type":53,"attrs":500,"content":502},{"id":501},"p_hdapbeqh",[503,507,512,516,518,522],{"text":504,"type":51,"marks":505},"Zero ",[506],{"type":133},{"text":508,"type":51,"marks":509},"framework lock-in",[510,511],{"type":133},{"type":405},{"text":513,"type":51,"marks":514}," na camada de UI.",[515],{"type":133},{"text":517,"type":51}," Um projeto pode ter componentes ",{"text":519,"type":51,"marks":520},".astro",[521],{"type":187},{"text":523,"type":51},", React, Vue, Svelte e Solid coexistindo. Isso viabiliza migrações incrementais: uma equipe que quer sair de um stack legado pode reescrever seção por seção, sem parar tudo para uma reescrita completa.",{"type":53,"attrs":525,"content":527},{"id":526},"p_6la4hgg4",[528,532,534,538],{"text":529,"type":51,"marks":530},"Content Collections com tipagem.",[531],{"type":133},{"text":533,"type":51}," Para sites com muito conteúdo em Markdown\u002FMDX, o Astro oferece um sistema de coleções tipadas via Zod, em que o ",{"text":535,"type":51,"marks":536},"schema",[537],{"type":405},{"text":539,"type":51}," do frontmatter é validado em tempo de build. Um campo de data escrito errado ou um título ausente vira erro de build, não bug em produção.",{"type":53,"attrs":541,"content":543},{"id":542},"p_oio4jpzq",[544,548],{"text":545,"type":51,"marks":546},"Portabilidade de deploy.",[547],{"type":133},{"text":549,"type":51}," Adaptadores oficiais para Node, Cloudflare, Vercel, Netlify e Deno colocam o Astro numa posição relativamente neutra em relação a provedor — importante para equipes que não querem acoplar a arquitetura de front-end a um único serviço de hospedagem.",{"type":44,"attrs":551,"content":553},{"id":552,"level":68},"h_ip8b32ox",[554],{"text":555,"type":51},"2.2 Pontos fracos",{"type":53,"attrs":557,"content":559},{"id":558},"p_jjn6a8po",[560],{"text":561,"type":51},"Aqui é onde a honestidade técnica importa mais do que o entusiasmo de lançamento.",{"type":53,"attrs":563,"content":565},{"id":564},"p_21pbxeka",[566,570,572,576,578,582,584,588,590,594],{"text":567,"type":51,"marks":568},"Aplicações altamente interativas sofrem com o modelo de ilhas.",[569],{"type":133},{"text":571,"type":51}," Um dashboard analítico com dezenas de widgets conectados por estado compartilhado, atualizações em tempo real via WebSocket e navegação client-side densa é exatamente o cenário em que a arquitetura de ilhas — pensada para isolamento — começa a trabalhar contra você. Ilhas são independentes por design; orquestrar estado global entre múltiplas ilhas exige soluções externas (nanostores, Zustand exposto via ",{"text":573,"type":51,"marks":574},"window",[575],{"type":187},{"text":577,"type":51},", um ",{"text":579,"type":51,"marks":580},"event bus",[581],{"type":405},{"text":583,"type":51},") que o React ou o Vue resolveriam nativamente com um único ",{"text":585,"type":51,"marks":586},"Context",[587],{"type":187},{"text":589,"type":51}," ou ",{"text":591,"type":51,"marks":592},"store",[593],{"type":187},{"text":195,"type":51},{"type":44,"attrs":596,"content":599},{"id":597,"level":598},"h_jscc42de",4,[600],{"text":601,"type":51},"O antídoto na prática: Nanostores como terceiro lugar neutro",{"type":53,"attrs":603,"content":605},{"id":604},"p_pvc63haf",[606,608,611,613,617],{"text":607,"type":51},"O parágrafo anterior descreveu o problema em abstrato; vale ver a solução em código, porque é aqui que a teoria se torna decisão de engenharia. Concretamente: um botão \"Adicionar ao carrinho\", escrito em React, precisa avisar um widget de carrinho, escrito em Vue, de que um item foi adicionado. As duas ilhas rodam em árvores de renderização completamente separadas — não existe um ",{"text":585,"type":51,"marks":609},[610],{"type":187},{"text":612,"type":51}," do React ou uma ",{"text":614,"type":51,"marks":615},"provide\u002Finject",[616],{"type":187},{"text":618,"type":51}," do Vue que atravesse essa fronteira, porque, tecnicamente, não existe uma árvore de componentes única unindo as duas.",{"type":53,"attrs":620,"content":622},{"id":621},"p_vwoz1il6",[623,625,629,631,634,636,640,642,646],{"text":624,"type":51},"É exatamente esse o problema que a documentação oficial do Astro recomenda resolver com ",{"text":626,"type":51,"marks":627},"Nanostores",[628],{"type":133},{"text":630,"type":51},": uma biblioteca de gerenciamento de estado atômico, agnóstica de framework, que vive fora de qualquer árvore de renderização. Um ",{"text":591,"type":51,"marks":632},[633],{"type":405},{"text":635,"type":51}," do Nanostores não pertence ao React nem ao Vue — ele é só um objeto JavaScript em memória, no navegador, que qualquer ilha pode importar e assinar. Cada framework se conecta a ele por meio de um adaptador fino (",{"text":637,"type":51,"marks":638},"@nanostores\u002Freact",[639],{"type":187},{"text":641,"type":51},", ",{"text":643,"type":51,"marks":644},"@nanostores\u002Fvue",[645],{"type":187},{"text":647,"type":51},"), mas o estado em si não sabe, e não precisa saber, quem está ouvindo.",{"type":151,"attrs":649},{"id":650,"alt":17,"src":651,"caption":652},"fig_cx81epj0","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Fcontent\u002F1785718119471-content-mdzhvf.webp","Uma ilha React despacha uma mutação para o Nanostore, átomo central em memória fora da árvore de componentes; um adaptador local na ilha Vue capta essa mudança e engatilha reatividade. Nenhuma das ilhas sabe que a outra existe — o estado é o único ponto de contato",{"type":53,"attrs":654,"content":656},{"id":655},"p_sjwobjyu",[657],{"text":658,"type":51,"marks":659},"Instalar o Nanostores e os adaptadores",[660],{"type":133},{"type":169,"attrs":662,"content":666},{"id":663,"language":664,"highlighted":665},"code_2dug27p3","bash","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install nanostores @nanostores\u002Freact @nanostores\u002Fvue\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> astro add vue\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[667],{"text":668,"type":51},"npm install nanostores @nanostores\u002Freact @nanostores\u002Fvue\nnpx astro add vue\n",{"type":53,"attrs":670,"content":672},{"id":671},"p_2jp1ell0",[673,677,681],{"text":674,"type":51,"marks":675},"Criar o ",[676],{"type":133},{"text":591,"type":51,"marks":678},[679,680],{"type":133},{"type":405},{"text":682,"type":51,"marks":683}," compartilhado, fora de qualquer componente",[684],{"type":133},{"type":169,"attrs":686,"content":689},{"id":687,"language":27,"highlighted":688},"code_v4cik1c8","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fstores\u002Fcarrinho.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { atom } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'nanostores'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ItemCarrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  quantidade\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Este atom não pertence a nenhum framework. É só estado em memória,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F vivendo fora de qualquer árvore de renderização — React ou Vue.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> $carrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> atom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">ItemCarrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">[]>([]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> adicionarAoCarrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Omit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">ItemCarrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'quantidade'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> atual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> $carrinho.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> existente\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> atual.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">find\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">i\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> i.id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> item.id);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (existente) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    $carrinho.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      atual.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">i\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        i.id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> item.id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">i, quantidade: i.quantidade \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> i\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      )\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    $carrinho.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">([\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">atual, { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">item, quantidade: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[690],{"text":691,"type":51},"\u002F\u002F src\u002Fstores\u002Fcarrinho.ts\nimport { atom } from 'nanostores';\n\nexport interface ItemCarrinho {\n  id: string;\n  nome: string;\n  quantidade: number;\n}\n\n\u002F\u002F Este atom não pertence a nenhum framework. É só estado em memória,\n\u002F\u002F vivendo fora de qualquer árvore de renderização — React ou Vue.\nexport const $carrinho = atom\u003CItemCarrinho[]>([]);\n\nexport function adicionarAoCarrinho(item: Omit\u003CItemCarrinho, 'quantidade'>) {\n  const atual = $carrinho.get();\n  const existente = atual.find((i) => i.id === item.id);\n\n  if (existente) {\n    $carrinho.set(\n      atual.map((i) =>\n        i.id === item.id ? { ...i, quantidade: i.quantidade + 1 } : i\n      )\n    );\n  } else {\n    $carrinho.set([...atual, { ...item, quantidade: 1 }]);\n  }\n}\n",{"type":53,"attrs":693,"content":695},{"id":694},"p_euun0b16",[696,700],{"text":697,"type":51,"marks":698},"A ilha React que escreve no ",[699],{"type":133},{"text":591,"type":51,"marks":701},[702,703],{"type":133},{"type":405},{"type":169,"attrs":705,"content":709},{"id":706,"language":707,"highlighted":708},"code_c5u3mvqp","tsx","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fcomponents\u002FBotaoAdicionar.tsx\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { adicionarAoCarrinho } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fstores\u002Fcarrinho'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> BotaoAdicionar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> adicionarAoCarrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ id, nome })}>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      Adicionar {nome} ao carrinho\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[710],{"text":711,"type":51},"\u002F\u002F src\u002Fcomponents\u002FBotaoAdicionar.tsx\nimport { adicionarAoCarrinho } from '..\u002Fstores\u002Fcarrinho';\n\ninterface Props {\n  id: string;\n  nome: string;\n}\n\nexport default function BotaoAdicionar({ id, nome }: Props) {\n  return (\n    \u003Cbutton onClick={() => adicionarAoCarrinho({ id, nome })}>\n      Adicionar {nome} ao carrinho\n    \u003C\u002Fbutton>\n  );\n}\n",{"type":53,"attrs":713,"content":715},{"id":714},"p_btv26a3y",[716,718,722,724,728,730,733],{"text":717,"type":51},"Este componente nem precisa do hook ",{"text":719,"type":51,"marks":720},"useStore",[721],{"type":187},{"text":723,"type":51}," — ele só chama a função ",{"text":725,"type":51,"marks":726},"adicionarAoCarrinho",[727],{"type":187},{"text":729,"type":51},", que atualiza o ",{"text":591,"type":51,"marks":731},[732],{"type":405},{"text":734,"type":51},". Ele escreve no estado global, mas não precisa lê-lo.",{"type":53,"attrs":736,"content":738},{"id":737},"p_79d7idvz",[739,743],{"text":740,"type":51,"marks":741},"A ilha Vue que lê e reage ao ",[742],{"type":133},{"text":591,"type":51,"marks":744},[745,746],{"type":133},{"type":405},{"type":169,"attrs":748,"content":752},{"id":749,"language":750,"highlighted":751},"code_3nh3wkp4","vue","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- src\u002Fcomponents\u002FWidgetCarrinho.vue -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useStore\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\"> '@nanostores\u002Fvue';\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> $carrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\"> '..\u002Fstores\u002Fcarrinho';\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">\u002F\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useStore(),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> do\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> adaptador\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Vue,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> transforma\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> o\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> atom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> do\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Nanostores\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">\u002F\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> em\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> um\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> `ref`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> reativo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> do\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Vue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> —\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> sem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> que\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> o\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Vue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> precise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> saber\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">\u002F\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> que\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> o\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> estado\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> nasceu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fora\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> do\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> seu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> próprio\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> sistema\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> de\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> reatividade.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> carrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">useStore($carrinho);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\"><\u002Fscript\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\"><template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">  <aside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"widget-carrinho\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">    <h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Carrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ({{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> carrinho.length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> }})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\"><\u002Fh3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">      <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> carrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">item.id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        {{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> item.nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ×\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> {{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> item.quantidade\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">      <\u002Fli\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">    <\u002Ful\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">  <\u002Faside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\"><\u002Ftemplate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[753],{"text":754,"type":51},"\u003C!-- src\u002Fcomponents\u002FWidgetCarrinho.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { useStore } from '@nanostores\u002Fvue';\nimport { $carrinho } from '..\u002Fstores\u002Fcarrinho';\n\n\u002F\u002F useStore(), do adaptador Vue, transforma o atom do Nanostores\n\u002F\u002F em um `ref` reativo do Vue — sem que o Vue precise saber\n\u002F\u002F que o estado nasceu fora do seu próprio sistema de reatividade.\nconst carrinho = useStore($carrinho);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Caside class=\"widget-carrinho\">\n    \u003Ch3>Carrinho ({{ carrinho.length }})\u003C\u002Fh3>\n    \u003Cul>\n      \u003Cli v-for=\"item in carrinho\" :key=\"item.id\">\n        {{ item.nome }} × {{ item.quantidade }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",{"type":53,"attrs":756,"content":758},{"id":757},"p_d3osdcob",[759],{"text":760,"type":51,"marks":761},"Combinando as duas ilhas na mesma página",[762],{"type":133},{"type":169,"attrs":764,"content":767},{"id":765,"language":172,"highlighted":766},"code_5bg3g5ea","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Floja.astro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Layout \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Flayouts\u002FLayout.astro'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> BotaoAdicionar \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002FBotaoAdicionar.tsx'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> WidgetCarrinho \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002FWidgetCarrinho.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Layout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Loja\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Catálogo<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    <!-- Ilha 1: React. Só escreve no store. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">BotaoAdicionar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">prod-1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\" \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Teclado\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\" \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">client:load\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">BotaoAdicionar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">prod-2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\" \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Mouse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\" \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">client:load\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    <!-- Ilha 2: Vue. Só lê e reage ao store. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">WidgetCarrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> client:load\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Layout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[768],{"text":769,"type":51},"---\n\u002F\u002F src\u002Fpages\u002Floja.astro\nimport Layout from '..\u002Flayouts\u002FLayout.astro';\nimport BotaoAdicionar from '..\u002Fcomponents\u002FBotaoAdicionar.tsx';\nimport WidgetCarrinho from '..\u002Fcomponents\u002FWidgetCarrinho.vue';\n---\n\n\u003CLayout title=\"Loja\">\n  \u003Cmain>\n    \u003Ch1>Catálogo\u003C\u002Fh1>\n\n    \u003C!-- Ilha 1: React. Só escreve no store. -->\n    \u003CBotaoAdicionar id=\"prod-1\" nome=\"Teclado\" client:load \u002F>\n    \u003CBotaoAdicionar id=\"prod-2\" nome=\"Mouse\" client:load \u002F>\n\n    \u003C!-- Ilha 2: Vue. Só lê e reage ao store. -->\n    \u003CWidgetCarrinho client:load \u002F>\n  \u003C\u002Fmain>\n\u003C\u002FLayout>\n",{"type":53,"attrs":771,"content":773},{"id":772},"p_f4aoxeay",[774,776,779,780,784,786,789,791,794,796,799,801,805,807,811],{"text":775,"type":51},"Ao clicar em \"Adicionar Teclado ao carrinho\", nenhuma das duas ilhas conversa diretamente com a outra, e nenhuma delas sabe que a outra existe. O que acontece é isto: o componente React chama ",{"text":725,"type":51,"marks":777},[778],{"type":187},{"text":729,"type":51},{"text":781,"type":51,"marks":782},"atom",[783],{"type":187},{"text":785,"type":51}," do Nanostores; o ",{"text":781,"type":51,"marks":787},[788],{"type":187},{"text":790,"type":51},", por sua vez, emite um evento de mudança; o adaptador ",{"text":643,"type":51,"marks":792},[793],{"type":187},{"text":795,"type":51},", que está com uma assinatura ativa através de ",{"text":719,"type":51,"marks":797},[798],{"type":187},{"text":800,"type":51},", recebe essa notificação e marca o ",{"text":802,"type":51,"marks":803},"ref",[804],{"type":187},{"text":806,"type":51}," reativo do Vue como alterado; o Vue, seguindo seu próprio ciclo de reatividade normal, re-renderiza o ",{"text":808,"type":51,"marks":809},"\u003CWidgetCarrinho>",[810],{"type":187},{"text":812,"type":51}," — tudo isso sem que React e Vue tenham qualquer conhecimento um do outro.",{"type":53,"attrs":814,"content":816},{"id":815},"p_j9oj328v",[817,819,823],{"text":818,"type":51},"Esse é o ponto que vale reter: o Nanostores não é uma ponte ",{"text":820,"type":51,"marks":821},"entre",[822],{"type":405},{"text":824,"type":51}," React e Vue — é um terceiro lugar, neutro, fora de ambas as árvores de renderização, para onde os dois frameworks olham de forma independente. É a mesma filosofia da arquitetura de ilhas aplicada ao problema de estado: em vez de forçar duas ilhas a se conhecerem, cria-se um ponto de verdade compartilhado que nenhuma delas precisa \"possuir\".",{"type":53,"attrs":826,"content":828},{"id":827},"p_gq9alj7l",[829,833,835,839],{"text":830,"type":51,"marks":831},"Sem roteamento client-side nativo com estado preservado.",[832],{"type":133},{"text":834,"type":51}," Diferente de uma SPA, a navegação padrão do Astro recarrega o documento — o ",{"text":836,"type":51,"marks":837},"View Transitions API",[838],{"type":405},{"text":840,"type":51}," do Astro suaviza essa transição visualmente, mas o modelo mental continua sendo o de páginas, não o de uma aplicação de página única com estado de memória persistente entre rotas.",{"type":53,"attrs":842,"content":844},{"id":843},"p_h8j1rujg",[845,849,851,855],{"text":846,"type":51,"marks":847},"Autenticação e sessão exigem mais trabalho manual.",[848],{"type":133},{"text":850,"type":51}," Next.js, por ter middleware, ",{"text":852,"type":51,"marks":853},"server actions",[854],{"type":405},{"text":856,"type":51}," e um ecossistema mais maduro em torno de autenticação (NextAuth\u002FAuth.js foi construído pensando nele primeiro), reduz a distância entre \"preciso de login\" e \"login funcionando\". No Astro, isso normalmente significa integrar bibliotecas externas e escrever a lógica de sessão à mão.",{"type":53,"attrs":858,"content":860},{"id":859},"p_osmf4ezn",[861,865],{"text":862,"type":51,"marks":863},"Ecossistema de plugins menor.",[864],{"type":133},{"text":866,"type":51}," O Astro é mais novo e mais nichado que React\u002FNext.js. Para funcionalidades muito específicas, a chance de encontrar uma integração pronta e madura é menor, e a equipe frequentemente precisa escrever a ponte por conta própria.",{"type":53,"attrs":868,"content":870},{"id":869},"p_d0pt2u20",[871,875],{"text":872,"type":51,"marks":873},"Curva de decisão sobre \"quanto de aplicação\" o projeto tem.",[874],{"type":133},{"text":876,"type":51}," Projetos híbridos — um site majoritariamente estático com uma seção de aplicação completa (por exemplo, um painel de cliente logado) — obrigam a equipe a decidir onde termina o \"site Astro\" e começa a \"aplicação React embutida\". Essa costura, quando mal planejada, gera duas bases de código concorrendo pela mesma responsabilidade.",{"type":44,"attrs":878,"content":880},{"id":879,"level":68},"h_5pqqs4vz",[881],{"text":882,"type":51},"2.3 Uma forma direta de decidir",{"type":53,"attrs":884,"content":886},{"id":885},"p_vac7g9g5",[887],{"text":888,"type":51},"Uma regra prática, adotada por times experientes: se a pergunta \"isso é conteúdo ou é aplicação?\" tiver resposta clara e for majoritariamente \"conteúdo\", o Astro tende a compensar. Se a resposta for \"aplicação densa, com muito estado compartilhado e interações em tempo real\", frameworks como Next.js, Remix ou uma SPA em React puro resolvem com menos atrito. Muitos projetos reais, no entanto, são os dois ao mesmo tempo — e é exatamente aí que entram as seções seguintes.",{"type":409},{"type":44,"attrs":891,"content":893},{"id":892,"level":47},"h_j205ky3k",[894],{"text":895,"type":51},"3. Ecossistema e Integração",{"type":44,"attrs":897,"content":899},{"id":898,"level":68},"h_utdrjlo8",[900],{"text":901,"type":51},"3.1 Astro e Vite: motor, não coadjuvante",{"type":53,"attrs":903,"content":905},{"id":904},"p_wso13533",[906,908,912,914,918,920,924],{"text":907,"type":51},"O Astro não implementa seu próprio ",{"text":909,"type":51,"marks":910},"bundler",[911],{"type":405},{"text":913,"type":51},". Ele é construído sobre o ",{"text":915,"type":51,"marks":916},"Vite",[917],{"type":133},{"text":919,"type":51},", usando-o para dev server, HMR (Hot Module Replacement) e build de produção via Rollup. Isso significa que grande parte do ecossistema de plugins Vite funciona dentro de um projeto Astro sem adaptação, e que a experiência de desenvolvimento — recarregamento quase instantâneo, ",{"text":921,"type":51,"marks":922},"pre-bundling",[923],{"type":405},{"text":925,"type":51}," de dependências — é herdada diretamente do Vite.",{"type":53,"attrs":927,"content":929},{"id":928},"p_rcravxso",[930],{"text":931,"type":51},"Configurar o Astro é, em boa medida, configurar Vite com uma camada adicional por cima:",{"type":169,"attrs":933,"content":936},{"id":934,"language":24,"highlighted":935},"code_bz86sbxm","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F astro.config.mjs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { defineConfig } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'astro\u002Fconfig'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> react \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@astrojs\u002Freact'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> tailwind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@astrojs\u002Ftailwind'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> defineConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  integrations: [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">react\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(), \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">tailwind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  vite: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F Qualquer opção válida de Vite pode ser passada aqui\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    resolve: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      alias: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'@'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'\u002Fsrc'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[937],{"text":938,"type":51},"\u002F\u002F astro.config.mjs\nimport { defineConfig } from 'astro\u002Fconfig';\nimport react from '@astrojs\u002Freact';\nimport tailwind from '@astrojs\u002Ftailwind';\n\nexport default defineConfig({\n  integrations: [react(), tailwind()],\n  vite: {\n    \u002F\u002F Qualquer opção válida de Vite pode ser passada aqui\n    resolve: {\n      alias: { '@': '\u002Fsrc' },\n    },\n  },\n});\n",{"type":44,"attrs":940,"content":942},{"id":941,"level":68},"h_r4m6zj3q",[943],{"text":944,"type":51},"3.2 Integrando React (e outros frameworks de UI)",{"type":53,"attrs":946,"content":948},{"id":947},"p_0ohp2qt9",[949,951,955,957,961,963,967,969,973],{"text":950,"type":51},"A integração ",{"text":952,"type":51,"marks":953},"@astrojs\u002Freact",[954],{"type":187},{"text":956,"type":51}," é a ponte mais usada entre o modelo de ilhas e o ecossistema React. A instalação registra o ",{"text":958,"type":51,"marks":959},"renderer",[960],{"type":405},{"text":962,"type":51}," necessário para o Astro saber como hidratar componentes ",{"text":964,"type":51,"marks":965},".jsx",[966],{"type":187},{"text":968,"type":51},"\u002F",{"text":970,"type":51,"marks":971},".tsx",[972],{"type":187},{"text":974,"type":51}," como ilhas:",{"type":169,"attrs":976,"content":979},{"id":977,"language":664,"highlighted":978},"code_m3a3p53o","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> astro add react\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[980],{"text":981,"type":51},"npx astro add react\n",{"type":53,"attrs":983,"content":985},{"id":984},"p_axx91q6c",[986,988,992,994,998,999,1003,1005,1008,1010,1013,1015,1018],{"text":987,"type":51},"Isso adiciona a integração ao ",{"text":989,"type":51,"marks":990},"astro.config.mjs",[991],{"type":187},{"text":993,"type":51}," e instala ",{"text":995,"type":51,"marks":996},"react",[997],{"type":187},{"text":641,"type":51},{"text":1000,"type":51,"marks":1001},"react-dom",[1002],{"type":187},{"text":1004,"type":51}," e ",{"text":952,"type":51,"marks":1006},[1007],{"type":187},{"text":1009,"type":51}," automaticamente. A partir daí, qualquer componente React pode ser importado em um arquivo ",{"text":519,"type":51,"marks":1011},[1012],{"type":187},{"text":1014,"type":51}," e receber uma diretiva ",{"text":209,"type":51,"marks":1016},[1017],{"type":187},{"text":1019,"type":51},":",{"type":169,"attrs":1021,"content":1024},{"id":1022,"language":707,"highlighted":1023},"code_tv238u7v","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fcomponents\u002FContador.tsx\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { useState } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'react'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ContadorProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  valorInicial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Contador\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">valorInicial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ContadorProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">contagem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setContagem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useState\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(valorInicial);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> className\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"contador\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setContagem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">c\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> c \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)}>-<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{contagem}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setContagem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">c\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> c \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)}>+<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1025],{"text":1026,"type":51},"\u002F\u002F src\u002Fcomponents\u002FContador.tsx\nimport { useState } from 'react';\n\ninterface ContadorProps {\n  valorInicial?: number;\n}\n\nexport default function Contador({ valorInicial = 0 }: ContadorProps) {\n  const [contagem, setContagem] = useState(valorInicial);\n\n  return (\n    \u003Cdiv className=\"contador\">\n      \u003Cbutton onClick={() => setContagem((c) => c - 1)}>-\u003C\u002Fbutton>\n      \u003Cspan>{contagem}\u003C\u002Fspan>\n      \u003Cbutton onClick={() => setContagem((c) => c + 1)}>+\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":169,"attrs":1028,"content":1031},{"id":1029,"language":172,"highlighted":1030},"code_mfb46vtq","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Fproduto\u002F[id].astro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Contador \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002F..\u002Fcomponents\u002FContador.tsx'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">pt-BR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Produto<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    <!-- Só este componente carrega React no navegador, e só quando visível -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Contador\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> valorInicial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">={\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">} \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">client:visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1032],{"text":1033,"type":51},"---\n\u002F\u002F src\u002Fpages\u002Fproduto\u002F[id].astro\nimport Contador from '..\u002F..\u002Fcomponents\u002FContador.tsx';\n---\n\n\u003Chtml lang=\"pt-BR\">\n  \u003Cbody>\n    \u003Ch1>Produto\u003C\u002Fh1>\n    \u003C!-- Só este componente carrega React no navegador, e só quando visível -->\n    \u003CContador valorInicial={1} client:visible \u002F>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",{"type":53,"attrs":1035,"content":1037},{"id":1036},"p_g6p9xn52",[1038,1040,1043,1045,1049],{"text":1039,"type":51},"Note o detalhe: props passadas de ",{"text":519,"type":51,"marks":1041},[1042],{"type":187},{"text":1044,"type":51}," para o componente React são serializadas e reidratadas no cliente. Funções e objetos não serializáveis não atravessam essa fronteira — um erro comum de quem vem de um projeto 100% React é tentar passar um ",{"text":1046,"type":51,"marks":1047},"callback",[1048],{"type":405},{"text":1050,"type":51}," complexo direto de um contexto de servidor.",{"type":44,"attrs":1052,"content":1054},{"id":1053,"level":68},"h_k8eckem5",[1055],{"text":1056,"type":51},"3.3 TypeScript e TSX no Astro",{"type":53,"attrs":1058,"content":1060},{"id":1059},"p_742z7qtk",[1061,1063,1066,1068,1072,1074,1078,1080,1084,1086,1090],{"text":1062,"type":51},"O suporte a TypeScript é de primeira classe: arquivos ",{"text":519,"type":51,"marks":1064},[1065],{"type":187},{"text":1067,"type":51}," aceitam a ",{"text":1069,"type":51,"marks":1070},"frontmatter fence",[1071],{"type":405},{"text":1073,"type":51}," (",{"text":1075,"type":51,"marks":1076},"---",[1077],{"type":187},{"text":1079,"type":51},") com código TypeScript diretamente, e o Astro gera checagem de tipos via ",{"text":1081,"type":51,"marks":1082},"astro check",[1083],{"type":187},{"text":1085,"type":51},". Configurar ",{"text":1087,"type":51,"marks":1088},"tsconfig.json",[1089],{"type":187},{"text":1091,"type":51}," corretamente é o que garante que erros de tipo apareçam antes do deploy, não depois:",{"type":169,"attrs":1093,"content":1097},{"id":1094,"language":1095,"highlighted":1096},"code_4vvoncew","json","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"extends\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"astro\u002Ftsconfigs\u002Fstrict\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  \"compilerOptions\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">    \"jsx\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"react-jsx\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">    \"baseUrl\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\".\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">    \"paths\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">      \"@\u002F*\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"src\u002F*\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1098],{"text":1099,"type":51},"{\n  \"extends\": \"astro\u002Ftsconfigs\u002Fstrict\",\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\"src\u002F*\"]\n    }\n  }\n}\n",{"type":53,"attrs":1101,"content":1103},{"id":1102},"p_bimcx9r1",[1104,1106,1109,1111,1114,1116,1120,1121,1125],{"text":1105,"type":51},"Componentes ",{"text":970,"type":51,"marks":1107},[1108],{"type":187},{"text":1110,"type":51}," (React) e ",{"text":519,"type":51,"marks":1112},[1113],{"type":187},{"text":1115,"type":51}," compartilham o mesmo grafo de tipos quando bem configurados — props tipadas por ",{"text":1117,"type":51,"marks":1118},"interface",[1119],{"type":187},{"text":589,"type":51},{"text":1122,"type":51,"marks":1123},"type",[1124],{"type":187},{"text":1126,"type":51}," são checadas na fronteira entre os dois mundos, o que reduz uma classe inteira de bugs de integração:",{"type":169,"attrs":1128,"content":1131},{"id":1129,"language":27,"highlighted":1130},"code_f1o39sbp","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Ftypes\u002Fproduto.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Produto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  preco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  estoque\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1132],{"text":1133,"type":51},"\u002F\u002F src\u002Ftypes\u002Fproduto.ts\nexport interface Produto {\n  id: string;\n  nome: string;\n  preco: number;\n  estoque: number;\n}\n",{"type":169,"attrs":1135,"content":1138},{"id":1136,"language":172,"highlighted":1137},"code_8bmx78bs","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Produto } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Ftypes\u002Fproduto'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> CardProduto \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002FCardProduto.tsx'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> produtos\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Produto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">[] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'\u002Fapi\u002Fprodutos'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">then\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> r.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">json\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{produtos.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">produto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">CardProduto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> produto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{produto} \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">client\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">))}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1139],{"text":1140,"type":51},"---\nimport type { Produto } from '..\u002Ftypes\u002Fproduto';\nimport CardProduto from '..\u002Fcomponents\u002FCardProduto.tsx';\n\nconst produtos: Produto[] = await fetch('\u002Fapi\u002Fprodutos').then(r => r.json());\n---\n\n{produtos.map((produto) => (\n  \u003CCardProduto produto={produto} client:visible \u002F>\n))}\n",{"type":44,"attrs":1142,"content":1144},{"id":1143,"level":68},"h_4qcuywoy",[1145],{"text":1146,"type":51},"3.4 Astro e Next.js: comparação, não hierarquia",{"type":53,"attrs":1148,"content":1150},{"id":1149},"p_xh8e5mbd",[1151],{"text":1152,"type":51},"É tentador tratar Astro e Next.js como concorrentes diretos na mesma prateleira, mas eles otimizam para problemas diferentes:",{"type":215,"attrs":1154,"content":1156},{"id":1155},"tbl_e9dany69",[1157,1186,1215,1247,1276,1305,1343],{"type":220,"content":1158},[1159,1168,1177],{"type":223,"attrs":1160,"content":1161},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1162],{"type":53,"attrs":1163,"content":1165},{"id":1164},"p_gerj3qnb",[1166],{"text":1167,"type":51},"Critério",{"type":223,"attrs":1169,"content":1170},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1171],{"type":53,"attrs":1172,"content":1174},{"id":1173},"p_e77625aa",[1175],{"text":1176,"type":51},"Astro",{"type":223,"attrs":1178,"content":1179},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1180],{"type":53,"attrs":1181,"content":1183},{"id":1182},"p_ccly3uv2",[1184],{"text":1185,"type":51},"Next.js",{"type":220,"content":1187},[1188,1197,1206],{"type":245,"attrs":1189,"content":1190},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1191],{"type":53,"attrs":1192,"content":1194},{"id":1193},"p_wnn8k8vr",[1195],{"text":1196,"type":51},"Modelo mental padrão",{"type":245,"attrs":1198,"content":1199},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1200],{"type":53,"attrs":1201,"content":1203},{"id":1202},"p_wn8ku2s8",[1204],{"text":1205,"type":51},"Site multi-página, HTML primeiro",{"type":245,"attrs":1207,"content":1208},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1209],{"type":53,"attrs":1210,"content":1212},{"id":1211},"p_ehnkwjc4",[1213],{"text":1214,"type":51},"Aplicação React, com App Router e Server Components",{"type":220,"content":1216},[1217,1226,1235],{"type":245,"attrs":1218,"content":1219},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1220],{"type":53,"attrs":1221,"content":1223},{"id":1222},"p_pg371qkr",[1224],{"text":1225,"type":51},"JavaScript enviado por padrão",{"type":245,"attrs":1227,"content":1228},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1229],{"type":53,"attrs":1230,"content":1232},{"id":1231},"p_j5w27gxu",[1233],{"text":1234,"type":51},"Zero, exceto ilhas explícitas",{"type":245,"attrs":1236,"content":1237},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1238],{"type":53,"attrs":1239,"content":1241},{"id":1240},"p_439t10dp",[1242,1244],{"text":1243,"type":51},"Depende da árvore de componentes e do uso de ",{"text":459,"type":51,"marks":1245},[1246],{"type":187},{"type":220,"content":1248},[1249,1258,1267],{"type":245,"attrs":1250,"content":1251},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1252],{"type":53,"attrs":1253,"content":1255},{"id":1254},"p_9ntledsk",[1256],{"text":1257,"type":51},"Melhor encaixe",{"type":245,"attrs":1259,"content":1260},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1261],{"type":53,"attrs":1262,"content":1264},{"id":1263},"p_dnyou9mw",[1265],{"text":1266,"type":51},"Conteúdo, marketing, documentação, blogs, e-commerce de catálogo",{"type":245,"attrs":1268,"content":1269},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1270],{"type":53,"attrs":1271,"content":1273},{"id":1272},"p_cvpy8343",[1274],{"text":1275,"type":51},"Dashboards, SaaS, produtos com autenticação e estado complexo",{"type":220,"content":1277},[1278,1287,1296],{"type":245,"attrs":1279,"content":1280},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1281],{"type":53,"attrs":1282,"content":1284},{"id":1283},"p_s6bnmn9i",[1285],{"text":1286,"type":51},"Framework de UI",{"type":245,"attrs":1288,"content":1289},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1290],{"type":53,"attrs":1291,"content":1293},{"id":1292},"p_nzq403k9",[1294],{"text":1295,"type":51},"Agnóstico (React, Vue, Svelte, Solid, Preact)",{"type":245,"attrs":1297,"content":1298},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1299],{"type":53,"attrs":1300,"content":1302},{"id":1301},"p_1118fy17",[1303],{"text":1304,"type":51},"React apenas",{"type":220,"content":1306},[1307,1316,1325],{"type":245,"attrs":1308,"content":1309},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1310],{"type":53,"attrs":1311,"content":1313},{"id":1312},"p_7bkzajlk",[1314],{"text":1315,"type":51},"Roteamento client-side",{"type":245,"attrs":1317,"content":1318},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1319],{"type":53,"attrs":1320,"content":1322},{"id":1321},"p_3nl60ts0",[1323],{"text":1324,"type":51},"Limitado (View Transitions suaviza, mas não é SPA completo)",{"type":245,"attrs":1326,"content":1327},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1328],{"type":53,"attrs":1329,"content":1331},{"id":1330},"p_2r92d5ic",[1332,1334,1337,1338,1342],{"text":1333,"type":51},"Nativo e profundo (App Router, ",{"text":477,"type":51,"marks":1335},[1336],{"type":405},{"text":641,"type":51},{"text":1339,"type":51,"marks":1340},"parallel routes",[1341],{"type":405},{"text":292,"type":51},{"type":220,"content":1344},[1345,1354,1363],{"type":245,"attrs":1346,"content":1347},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1348],{"type":53,"attrs":1349,"content":1351},{"id":1350},"p_s0t3sm4d",[1352],{"text":1353,"type":51},"Ecossistema de autenticação\u002Fsessão",{"type":245,"attrs":1355,"content":1356},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1357],{"type":53,"attrs":1358,"content":1360},{"id":1359},"p_ha5azx7m",[1361],{"text":1362,"type":51},"Requer integração manual",{"type":245,"attrs":1364,"content":1365},{"align":17,"colspan":225,"rowspan":225,"colwidth":17},[1366],{"type":53,"attrs":1367,"content":1369},{"id":1368},"p_o9kg53xa",[1370],{"text":1371,"type":51},"Maduro (Auth.js nasceu majoritariamente para esse contexto)",{"type":53,"attrs":1373,"content":1375},{"id":1374},"p_e4u3cs8u",[1376],{"text":1377,"type":51},"A conclusão prática que times de engenharia experientes vêm adotando não é \"qual framework é melhor\", mas \"qual pergunta arquitetural este projeto está fazendo\". Um site institucional com uma área de blog não precisa do Router de aplicação do Next.js. Um SaaS com autenticação, permissões e estado de sessão complexo dificilmente se beneficia de recomeçar do zero em cima de ilhas. É comum, inclusive, ver as duas ferramentas convivendo na mesma organização, cada uma no domínio em que compensa.",{"type":409},{"type":44,"attrs":1380,"content":1382},{"id":1381,"level":47},"h_kf0jesvz",[1383],{"text":1384,"type":51},"4. Arquitetura de Micro Frontends com Astro",{"type":53,"attrs":1386,"content":1388},{"id":1387},"p_cxdinsjy",[1389,1391,1395],{"text":1390,"type":51},"Antes de entrar nesta seção, vale situar o terreno: o que vem a seguir resolve um problema muito específico, e reconhecer esse problema é o que decide se ele é seu. A pergunta não é \"o Astro suporta micro frontends?\" — suporta, e bem. A pergunta certa é outra: sua organização já tem múltiplos times que ",{"text":1392,"type":51,"marks":1393},"precisam",[1394],{"type":133},{"text":1396,"type":51},", por razão de escala ou de estrutura, de ciclos de deploy independentes para partes diferentes da mesma experiência de usuário? Se a resposta for sim, o restante desta seção é o mapa de como fazer isso funcionar sem armadilhas. Se a resposta for não, ela continua sendo útil — porque entender onde fica essa fronteira é o que evita que uma equipe complique o próprio deploy resolvendo um problema organizacional que nunca teve.",{"type":44,"attrs":1398,"content":1400},{"id":1399,"level":68},"h_l5gjvram",[1401],{"text":1402,"type":51},"4.1 Por que a pergunta faz sentido",{"type":53,"attrs":1404,"content":1406},{"id":1405},"p_mfttqkc6",[1407,1409,1413],{"text":1408,"type":51},"Micro frontends aplicam à camada de UI a mesma lógica das microsserviços no back-end: dividir uma aplicação grande em unidades independentes, desenvolvidas e implantadas por equipes diferentes, compostas depois em uma experiência única — normalmente coordenada por uma aplicação \"casca\" (",{"text":1410,"type":51,"marks":1411},"shell",[1412],{"type":405},{"text":1414,"type":51},"). Isso resolve problemas reais de organizações grandes: times que não conseguem mais compartilhar um único repositório sem pisar uns nos outros, ciclos de deploy que precisam ser independentes, ou stacks tecnológicos diferentes convivendo por necessidade de migração gradual.",{"type":53,"attrs":1416,"content":1418},{"id":1417},"p_wasunrju",[1419],{"text":1420,"type":51},"Historicamente, compor micro frontends renderizados no servidor (SSR) era considerado complexo — normalmente resolvido com Server-Side Includes, Edge-Side Includes ou composição via Ajax, técnicas que exigem infraestrutura de borda dedicada. É exatamente nesse ponto que a arquitetura de ilhas do Astro se torna interessante como solução, e não apenas como estilo.",{"type":44,"attrs":1422,"content":1424},{"id":1423,"level":68},"h_luejxoid",[1425],{"text":1426,"type":51},"4.2 Estratégia 1 — Ilhas como unidades de composição",{"type":53,"attrs":1428,"content":1430},{"id":1429},"p_hwp9e93y",[1431],{"text":1432,"type":51},"A forma mais natural de aplicar o modelo do Astro a micro frontends é tratar cada ilha como o limite de propriedade de um time. Uma aplicação \"casca\" em Astro define o layout, a navegação e o esqueleto compartilhado; cada equipe entrega um componente (React, Vue, Svelte — o que fizer sentido para o seu time) que vira uma ilha isolada dentro desse layout:",{"type":169,"attrs":1434,"content":1437},{"id":1435,"language":172,"highlighted":1436},"code_7gvu2c00","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Fdashboard.astro — a \"casca\" (shell)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Layout \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Flayouts\u002FShell.astro'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> PainelVendas \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002Ftimes\u002Fvendas\u002FPainelVendas.tsx'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> PainelSuporte \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002Ftimes\u002Fsuporte\u002FPainelSuporte.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> PainelEstoque \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002Ftimes\u002Festoque\u002FPainelEstoque.svelte'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Layout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> titulo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Painel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Operacional\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  <!-- Cada painel é entregue e versionado por um time diferente -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Vendas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">PainelVendas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> client:visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Suporte\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">PainelSuporte\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> client:visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Estoque\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">PainelEstoque\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> client:idle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Layout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1438],{"text":1439,"type":51},"---\n\u002F\u002F src\u002Fpages\u002Fdashboard.astro — a \"casca\" (shell)\nimport Layout from '..\u002Flayouts\u002FShell.astro';\nimport PainelVendas from '..\u002Fcomponents\u002Ftimes\u002Fvendas\u002FPainelVendas.tsx';\nimport PainelSuporte from '..\u002Fcomponents\u002Ftimes\u002Fsuporte\u002FPainelSuporte.vue';\nimport PainelEstoque from '..\u002Fcomponents\u002Ftimes\u002Festoque\u002FPainelEstoque.svelte';\n---\n\n\u003CLayout titulo=\"Painel Operacional\">\n  \u003C!-- Cada painel é entregue e versionado por um time diferente -->\n  \u003Csection aria-label=\"Vendas\">\n    \u003CPainelVendas client:visible \u002F>\n  \u003C\u002Fsection>\n\n  \u003Csection aria-label=\"Suporte\">\n    \u003CPainelSuporte client:visible \u002F>\n  \u003C\u002Fsection>\n\n  \u003Csection aria-label=\"Estoque\">\n    \u003CPainelEstoque client:idle \u002F>\n  \u003C\u002Fsection>\n\u003C\u002FLayout>\n",{"type":53,"attrs":1441,"content":1443},{"id":1442},"p_5go4rnnb",[1444],{"text":1445,"type":51},"Como cada ilha hidrata isoladamente, times diferentes podem usar frameworks diferentes sem que um vaze para o outro — algo que uma SPA monolítica dificilmente permite sem ferramentas adicionais como Module Federation.",{"type":44,"attrs":1447,"content":1449},{"id":1448,"level":68},"h_0ia1npvh",[1450],{"text":1451,"type":51},"4.3 Estratégia 2 — Server Islands para composição distribuída em runtime",{"type":53,"attrs":1453,"content":1455},{"id":1454},"p_zwoeiaht",[1456,1458,1461,1463,1466],{"text":1457,"type":51},"A limitação da Estratégia 1 é que ela ainda pressupõe um único repositório (ou pelo menos um único processo de build) reunindo todas as ilhas. Para micro frontends de verdade — com deploys independentes, cada um servido por sua própria origem — o recurso relevante são as ",{"text":396,"type":51,"marks":1459},[1460],{"type":133},{"text":1462,"type":51},", que permitem que um componente seja buscado e renderizado no servidor de forma assíncrona, com ",{"text":402,"type":51,"marks":1464},[1465],{"type":405},{"text":1467,"type":51}," imediato, sem que a página inteira precise esperar por ele:",{"type":169,"attrs":1469,"content":1472},{"id":1470,"language":172,"highlighted":1471},"code_242obg5a","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fcomponents\u002FFragmentoRemoto.astro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> prerender\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  endpoint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">endpoint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Astro.props;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Busca HTML já renderizado por outro serviço\u002Ftime, em outra origem\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> resposta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(endpoint, {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  headers: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'x-solicitante'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'shell-astro'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> resposta.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">fragmento-remoto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\" \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">set:html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">={html} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1473],{"text":1474,"type":51},"---\n\u002F\u002F src\u002Fcomponents\u002FFragmentoRemoto.astro\nexport const prerender = false;\n\ninterface Props {\n  endpoint: string;\n}\n\nconst { endpoint } = Astro.props;\n\n\u002F\u002F Busca HTML já renderizado por outro serviço\u002Ftime, em outra origem\nconst resposta = await fetch(endpoint, {\n  headers: { 'x-solicitante': 'shell-astro' },\n});\nconst html = await resposta.text();\n---\n\n\u003Cdiv class=\"fragmento-remoto\" set:html={html} \u002F>\n",{"type":169,"attrs":1476,"content":1479},{"id":1477,"language":172,"highlighted":1478},"code_22ed7tej","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Findex.astro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> FragmentoRemoto \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002FFragmentoRemoto.astro'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Portal Corporativo<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  <!-- Renderiza no servidor, sem bloquear o restante da página -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">FragmentoRemoto\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    server:defer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    endpoint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">https:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\u002F\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">times-marketing.empresa.com\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">api\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">fragmento\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> slot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">fallback\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">Carregando promoções…<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">FragmentoRemoto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1480],{"text":1481,"type":51},"---\n\u002F\u002F src\u002Fpages\u002Findex.astro\nimport FragmentoRemoto from '..\u002Fcomponents\u002FFragmentoRemoto.astro';\n---\n\n\u003Cmain>\n  \u003Ch1>Portal Corporativo\u003C\u002Fh1>\n\n  \u003C!-- Renderiza no servidor, sem bloquear o restante da página -->\n  \u003CFragmentoRemoto\n    server:defer\n    endpoint=\"https:\u002F\u002Ftimes-marketing.empresa.com\u002Fapi\u002Ffragmento\"\n  >\n    \u003Cdiv slot=\"fallback\">Carregando promoções…\u003C\u002Fdiv>\n  \u003C\u002FFragmentoRemoto>\n\u003C\u002Fmain>\n",{"type":53,"attrs":1483,"content":1485},{"id":1484},"p_fblchpyu",[1486,1488,1492,1494,1497],{"text":1487,"type":51},"Esse padrão aproxima o Astro do modelo clássico de composição via ",{"text":1489,"type":51,"marks":1490},"Edge-Side Includes",[1491],{"type":405},{"text":1493,"type":51},", mas sem exigir infraestrutura de borda dedicada — a composição acontece no próprio servidor Astro, com a vantagem de um ",{"text":402,"type":51,"marks":1495},[1496],{"type":405},{"text":1498,"type":51}," declarativo e streaming de HTML.",{"type":44,"attrs":1500,"content":1502},{"id":1501,"level":68},"h_e6zoe64o",[1503],{"text":1504,"type":51},"4.4 Um parente próximo: o Partial Prerendering do Next.js",{"type":53,"attrs":1506,"content":1508},{"id":1507},"p_v5qzbqoe",[1509,1511,1515,1517,1520],{"text":1510,"type":51},"Um parêntese cabe aqui, porque é comum — e revelador — perceber que o Next.js chegou a uma ideia muito parecida por um caminho diferente. O ",{"text":1512,"type":51,"marks":1513},"Partial Prerendering (PPR)",[1514],{"type":133},{"text":1516,"type":51},", que se tornou estável no Next.js 16 (outubro de 2025) como parte do recurso Cache Components, resolve exatamente o mesmo problema que as Server Islands do Astro: como servir um ",{"text":1410,"type":51,"marks":1518},[1519],{"type":405},{"text":1521,"type":51}," estático instantâneo e, ao mesmo tempo, incluir trechos dinâmicos e personalizados sem bloquear a página inteira.",{"type":53,"attrs":1523,"content":1525},{"id":1524},"p_v9zdaana",[1526,1528,1532,1534,1537,1539,1543,1545,1548,1550,1553,1555,1559,1561,1564],{"text":1527,"type":51},"A mecânica é diferente, mas o resultado visível é quase idêntico. Em vez de uma diretiva própria como ",{"text":1529,"type":51,"marks":1530},"server:defer",[1531],{"type":187},{"text":1533,"type":51},", o PPR usa o ",{"text":471,"type":51,"marks":1535},[1536],{"type":187},{"text":1538,"type":51}," do próprio React como fronteira: tudo fora de um ",{"text":1540,"type":51,"marks":1541},"Suspense",[1542],{"type":187},{"text":1544,"type":51}," é renderizado no build e vira o ",{"text":1410,"type":51,"marks":1546},[1547],{"type":405},{"text":1549,"type":51}," estático, cacheável em CDN; tudo dentro de um ",{"text":1540,"type":51,"marks":1551},[1552],{"type":187},{"text":1554,"type":51}," é tratado como dinâmico, roda como Server Component no momento da requisição, e é transmitido (",{"text":1556,"type":51,"marks":1557},"streamed",[1558],{"type":405},{"text":1560,"type":51},") para dentro do mesmo HTML, preenchendo o ",{"text":402,"type":51,"marks":1562},[1563],{"type":405},{"text":1565,"type":51}," declarado assim que os dados chegam:",{"type":169,"attrs":1567,"content":1570},{"id":1568,"language":707,"highlighted":1569},"code_o5jmo1u6","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F app\u002Fdashboard\u002Fpage.tsx — Next.js com PPR\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Suspense } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'react'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { SaudacaoUsuario, EsqueletoSaudacao } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '.\u002Fsaudacao'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> experimental_ppr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Pagina\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Isto é pré-renderizado no build<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Suspense\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fallback\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{<\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">EsqueletoSaudacao\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>}>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Isto usa cookies()\u002Fheaders() e só pode rodar por requisição *\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">SaudacaoUsuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Suspense\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1571],{"text":1572,"type":51},"\u002F\u002F app\u002Fdashboard\u002Fpage.tsx — Next.js com PPR\nimport { Suspense } from 'react';\nimport { SaudacaoUsuario, EsqueletoSaudacao } from '.\u002Fsaudacao';\n\nexport const experimental_ppr = true;\n\nexport default function Pagina() {\n  return (\n    \u003Csection>\n      \u003Ch1>Isto é pré-renderizado no build\u003C\u002Fh1>\n\n      \u003CSuspense fallback={\u003CEsqueletoSaudacao \u002F>}>\n        {\u002F* Isto usa cookies()\u002Fheaders() e só pode rodar por requisição *\u002F}\n        \u003CSaudacaoUsuario \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002Fsection>\n  );\n}\n",{"type":169,"attrs":1574,"content":1577},{"id":1575,"language":172,"highlighted":1576},"code_zz704bwx","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F index.astro — Astro com Server Islands\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> prerender\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Isto é pré-renderizado no build<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">SaudacaoUsuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> server:defer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> slot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">fallback\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">Carregando saudação…<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">SaudacaoUsuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1578],{"text":1579,"type":51},"---\n\u002F\u002F index.astro — Astro com Server Islands\nexport const prerender = false;\n---\n\n\u003Csection>\n  \u003Ch1>Isto é pré-renderizado no build\u003C\u002Fh1>\n\n  \u003CSaudacaoUsuario server:defer>\n    \u003Cdiv slot=\"fallback\">Carregando saudação…\u003C\u002Fdiv>\n  \u003C\u002FSaudacaoUsuario>\n\u003C\u002Fsection>\n",{"type":53,"attrs":1581,"content":1583},{"id":1582},"p_lymyty89",[1584,1586,1589,1591,1594,1596,1599,1601,1604,1606,1610,1611,1615,1617,1620],{"text":1585,"type":51},"Postos lado a lado, os dois trechos contam a mesma história com vocabulários diferentes: um ",{"text":1410,"type":51,"marks":1587},[1588],{"type":405},{"text":1590,"type":51}," estático que chega instantaneamente, um limite explícito ao redor do que é dinâmico, um ",{"text":402,"type":51,"marks":1592},[1593],{"type":405},{"text":1595,"type":51}," que aparece primeiro, e o conteúdo real chegando via ",{"text":477,"type":51,"marks":1597},[1598],{"type":405},{"text":1600,"type":51}," dentro da mesma resposta HTTP — sem uma segunda requisição do cliente. A diferença estrutural está em quem decide o limite: no Astro, você declara explicitamente ",{"text":1529,"type":51,"marks":1602},[1603],{"type":187},{"text":1605,"type":51}," componente a componente, como uma decisão de composição; no Next.js, o limite nasce do próprio modelo de Server Components e Suspense do React, e o build falha com um erro se você usar uma API dinâmica (",{"text":1607,"type":51,"marks":1608},"cookies()",[1609],{"type":187},{"text":641,"type":51},{"text":1612,"type":51,"marks":1613},"headers()",[1614],{"type":187},{"text":1616,"type":51},") fora de um ",{"text":1540,"type":51,"marks":1618},[1619],{"type":187},{"text":1621,"type":51}," — o framework força a fronteira, em vez de sugeri-la.",{"type":53,"attrs":1623,"content":1625},{"id":1624},"p_m3iw9av6",[1626],{"text":1627,"type":51},"Para quem vem do mundo React, essa proximidade é o motivo mais comum de curiosidade pelo Astro: se o PPR já mostrou, dentro do ecossistema Next.js, que \"estático por padrão com furos dinâmicos declarados\" é um modelo mental que funciona bem em produção, o Astro oferece exatamente essa mesma filosofia — porém como ponto de partida da arquitetura inteira, não como um recurso opcional dentro de um framework pensado primeiro para aplicações. Onde o PPR \"escapa\" da renderização 100% de aplicação SPA para ganhar velocidade, o Astro parte do zero estático e \"escapa\" para dinamismo só quando pedido — dois caminhos opostos convergindo para a mesma ideia central.",{"type":44,"attrs":1629,"content":1631},{"id":1630,"level":68},"h_hdlvomtw",[1632],{"text":1633,"type":51},"4.5 Limitações reais dessa abordagem",{"type":53,"attrs":1635,"content":1637},{"id":1636},"p_kzrjqtzx",[1638,1640,1644,1646,1649,1651,1655],{"text":1639,"type":51},"É importante não vender essa estratégia como solução pronta e definitiva. A própria equipe do Astro discute publicamente, em seu repositório de roadmap, o cenário de compor fragmentos vindos de ",{"text":1641,"type":51,"marks":1642},"múltiplos servidores Astro independentes",[1643],{"type":133},{"text":1645,"type":51}," na mesma página — e reconhece que isso pode gerar conflitos de estado global, elementos ou eventos no lado do cliente quando cada fragmento carrega sua própria hidratação sem coordenação entre origens. Ou seja: o Astro resolve bem a composição de ilhas dentro de uma única aplicação\u002F",{"text":1410,"type":51,"marks":1647},[1648],{"type":405},{"text":1650,"type":51},", mas compor ",{"text":1652,"type":51,"marks":1653},"múltiplas aplicações Astro independentes",[1654],{"type":133},{"text":1656,"type":51},", cada uma com seu próprio ciclo de vida de JavaScript no cliente, ainda exige convenções manuais — nomes configuráveis para elementos e eventos globais, isolamento de CSS, e cuidado para que duas ilhas de origens diferentes não colidam por acidente.",{"type":53,"attrs":1658,"content":1660},{"id":1659},"p_abphvz7h",[1661],{"text":1662,"type":51},"Mas a limitação mais subestimada não é técnica — é operacional, e ela merece sair das entrelinhas. A autonomia de UI que a arquitetura de ilhas promete tem uma contrapartida real em infraestrutura, e essa conta chega antes da primeira linha de código de fragmento remoto.",{"type":53,"attrs":1664,"content":1666},{"id":1665},"p_68lndto9",[1667,1671],{"text":1668,"type":51,"marks":1669},"Um cenário concreto ajuda a tirar isso do plano das ideias.",[1670],{"type":133},{"text":1672,"type":51}," Imagine um e-commerce dividido em dois times autônomos: o time de Catálogo trabalha em Vue e publica seus artefatos no servidor A; o time de Carrinho trabalha em React e publica no servidor B. Cada um decide sua própria stack, seu próprio ritmo de deploy — a promessa de autonomia, cumprida à risca. Só que, para o usuário final, isso precisa parecer um único site, num único domínio. Alguém, na borda da rede, precisa decidir qual requisição vai para onde:",{"type":169,"attrs":1674,"content":1677},{"id":1675,"language":27,"highlighted":1676},"code_okml0h81","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"># Configuração simplificada de edge router\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">route \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fprodutos\u002F*\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> ->\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> origem_A   # servidor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">do\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> time de \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Catálogo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (Vue)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">route \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fcarrinho\u002F*\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> ->\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> origem_B   # servidor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">do\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> time de \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Carrinho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (React)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">route \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002F*\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">           ->\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> shell     # aplicação Astro que compõe o resultado final\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1678],{"text":1679,"type":51},"# Configuração simplificada de edge router\nroute \"\u002Fprodutos\u002F*\" -> origem_A   # servidor do time de Catálogo (Vue)\nroute \"\u002Fcarrinho\u002F*\" -> origem_B   # servidor do time de Carrinho (React)\nroute \"\u002F*\"           -> shell     # aplicação Astro que compõe o resultado final\n",{"type":53,"attrs":1681,"content":1683},{"id":1682},"p_bb68bud6",[1684],{"text":1685,"type":51},"Isso parece trivial até o momento em que o servidor B, o do carrinho, sofre um atraso de oitocentos milissegundos — um pico de tráfego, uma consulta lenta ao banco, não importa a causa. Esse atraso não fica isolado dentro do time de Carrinho: ele vaza para qualquer página que componha um fragmento vindo da origem B. Se a página de produto do Catálogo mostra um resumo do carrinho no canto da tela, essa página inteira passa a esperar os oitocentos milissegundos do serviço mais lento da composição — mesmo que o Catálogo não tenha mudado uma linha de código. É esse acoplamento invisível, entre times que juraram estar desacoplados, que a lista de responsabilidades abaixo tenta nomear uma por uma.",{"type":53,"attrs":1687,"content":1689},{"id":1688},"p_0em9bvke",[1690,1694,1696,1700,1702,1706,1708,1712,1714,1717],{"text":1691,"type":51,"marks":1692},"O reverse proxy ou edge router deixa de ser opcional.",[1693],{"type":133},{"text":1695,"type":51}," No momento em que \"vários times, várias origens\" vira \"um único domínio para o usuário final\", alguém precisa decidir, por requisição, qual origem responde a qual rota — e esse alguém é, invariavelmente, uma camada de roteamento na frente de tudo: Nginx, um API Gateway, ou um ",{"text":1697,"type":51,"marks":1698},"edge router",[1699],{"type":405},{"text":1701,"type":51}," rodando em CDN (Cloudflare Workers, Lambda@Edge, Akamai EdgeWorkers). Essa camada não é um detalhe de configuração — ela vira uma peça de infraestrutura com dono, versionamento e SLA próprios. Ela precisa saber, por prefixo de caminho ou por regra de negócio, se ",{"text":1703,"type":51,"marks":1704},"\u002Festoque",[1705],{"type":187},{"text":1707,"type":51}," vai para o servidor Astro do time A e ",{"text":1709,"type":51,"marks":1710},"\u002Fvendas",[1711],{"type":187},{"text":1713,"type":51}," para o do time B; precisa lidar com regras de cache diferentes por origem (o fragmento de vendas pode mudar a cada minuto, o de estoque uma vez por hora); e, quando o próprio Astro busca um fragmento remoto via ",{"text":1529,"type":51,"marks":1715},[1716],{"type":187},{"text":1718,"type":51},", esse fetch também passa — ou deveria passar — por esse mesmo roteador, para herdar as mesmas políticas de timeout, retry e cabeçalhos de autenticação entre serviços.",{"type":53,"attrs":1720,"content":1722},{"id":1721},"p_jbnwo635",[1723,1727,1729,1733,1735,1738,1740,1743],{"text":1724,"type":51,"marks":1725},"CORS e propagação de cabeçalhos deixam de ser um problema raro.",[1726],{"type":133},{"text":1728,"type":51}," Quando um Server Island faz ",{"text":1730,"type":51,"marks":1731},"fetch",[1732],{"type":187},{"text":1734,"type":51}," para uma origem diferente da que serviu a página, você herda, de forma explícita, os mesmos problemas de qualquer chamada entre serviços: cabeçalhos de autenticação que precisam ser repassados (ou re-emitidos) na fronteira, políticas de CORS quando a composição não acontece inteiramente no servidor, e um orçamento de latência que agora depende da origem mais lenta da cadeia — se o fragmento remoto demora 800ms para responder, o ",{"text":402,"type":51,"marks":1736},[1737],{"type":405},{"text":1739,"type":51}," fica visível por 800ms, não importa quão rápido o ",{"text":1410,"type":51,"marks":1741},[1742],{"type":405},{"text":1744,"type":51}," tenha sido.",{"type":53,"attrs":1746,"content":1748},{"id":1747},"p_uxvcw0xj",[1749,1753,1755,1758,1760,1764,1766,1769,1771,1775,1777,1781],{"text":1750,"type":51,"marks":1751},"O CI\u002FCD deixa de ser \"um pipeline\" e vira \"N pipelines com um contrato entre eles\".",[1752],{"type":133},{"text":1754,"type":51}," Cada micro frontend — cada aplicação Astro independente, no cenário de múltiplos servidores — ganha, na prática, seu próprio pipeline de build, teste e deploy, o que é exatamente o ponto de ter equipes autônomas. O custo aparece na coordenação entre eles: o ",{"text":1410,"type":51,"marks":1756},[1757],{"type":405},{"text":1759,"type":51}," precisa continuar funcionando mesmo quando um fragmento publica uma versão nova e incompatível, o que empurra a equipe para práticas como ",{"text":1761,"type":51,"marks":1762},"contract testing",[1763],{"type":405},{"text":1765,"type":51}," entre ",{"text":1410,"type":51,"marks":1767},[1768],{"type":405},{"text":1770,"type":51}," e fragmentos, ",{"text":1772,"type":51,"marks":1773},"feature flags",[1774],{"type":405},{"text":1776,"type":51}," para liberar uma nova versão gradualmente, ",{"text":1778,"type":51,"marks":1779},"canary releases",[1780],{"type":405},{"text":1782,"type":51}," para limitar o raio de impacto de um fragmento com bug, e observabilidade que consiga rastrear uma falha até a origem certa quando o problema aparece só na composição final, não em nenhum dos fragmentos isolados. Nenhuma dessas práticas é exclusiva do Astro — são o preço de qualquer arquitetura de micro frontend renderizada no servidor —, mas é importante entrar nessa decisão sabendo que elas não são opcionais: sem elas, a autonomia de deploy vira instabilidade de produção.",{"type":53,"attrs":1784,"content":1786},{"id":1785},"p_3i8otrkb",[1787],{"text":1788,"type":51},"Isso coloca o Astro em uma posição específica no espectro de micro frontends: mais simples e mais barato que Module Federation para cenários em que a composição acontece dentro de uma casca única e controlada; menos maduro que soluções dedicadas (single-spa, Module Federation do Webpack\u002FRspack) para cenários em que cada micro frontend é verdadeiramente autônomo, com seu próprio ciclo de deploy e origem, hidratando lado a lado sem coordenação central. E, em qualquer um dos dois cenários, a decisão de adotar micro frontends via Astro deveria ser tomada junto com quem vai operar o reverse proxy e os pipelines — não só com quem vai escrever os componentes.",{"type":44,"attrs":1790,"content":1792},{"id":1791,"level":68},"h_taku66gs",[1793],{"text":1794,"type":51},"4.6 Quando escolher o Astro para micro frontends",{"type":53,"attrs":1796,"content":1798},{"id":1797},"p_qyhly5fp",[1799],{"text":1800,"type":51},"Faz sentido considerar o Astro como base de micro frontends quando:",{"type":115,"attrs":1802,"content":1804},{"id":1803,"tight":118},"ul_72fxhak6",[1805,1815,1825],{"type":121,"attrs":1806,"content":1808},{"id":1807},"li_tezwhpmy",[1809],{"type":53,"attrs":1810,"content":1812},{"id":1811},"p_aj6e2tob",[1813],{"text":1814,"type":51},"O conteúdo é majoritariamente renderizável no servidor, e a interatividade é localizada em componentes específicos, não na aplicação inteira.",{"type":121,"attrs":1816,"content":1818},{"id":1817},"li_pvluczmu",[1819],{"type":53,"attrs":1820,"content":1822},{"id":1821},"p_v8csuys1",[1823],{"text":1824,"type":51},"Os times já trabalham (ou aceitam trabalhar) sob uma casca compartilhada, em vez de aplicações totalmente autônomas com origens e ciclos de deploy independentes.",{"type":121,"attrs":1826,"content":1828},{"id":1827},"li_b0aaug08",[1829],{"type":53,"attrs":1830,"content":1832},{"id":1831},"p_ll8h0f41",[1833],{"text":1834,"type":51},"SEO e performance de carregamento inicial são requisitos de primeira ordem — cenário comum em portais corporativos, e-commerce e sites institucionais compostos por múltiplos times.",{"type":53,"attrs":1836,"content":1838},{"id":1837},"p_j4nnzpe1",[1839],{"text":1840,"type":51},"Faz mais sentido evitar o Astro, ou usá-lo apenas como camada de apresentação sobre uma solução de composição mais robusta, quando:",{"type":115,"attrs":1842,"content":1844},{"id":1843,"tight":118},"ul_2e2q58y1",[1845,1860,1870],{"type":121,"attrs":1846,"content":1848},{"id":1847},"li_mbo13oe4",[1849],{"type":53,"attrs":1850,"content":1852},{"id":1851},"p_19khtrmu",[1853,1855,1858],{"text":1854,"type":51},"Cada micro frontend precisa de deploy e origem totalmente independentes, com hidratação simultânea e isolada, sem um ",{"text":1410,"type":51,"marks":1856},[1857],{"type":405},{"text":1859,"type":51}," central coordenando tudo.",{"type":121,"attrs":1861,"content":1863},{"id":1862},"li_h6q8oi4w",[1864],{"type":53,"attrs":1865,"content":1867},{"id":1866},"p_48o615sw",[1868],{"text":1869,"type":51},"A aplicação é predominantemente interativa (dashboards, editores, ferramentas de produtividade), reduzindo a vantagem de \"zero JS por padrão\" a quase zero, já que quase tudo vira ilha de qualquer forma.",{"type":121,"attrs":1871,"content":1873},{"id":1872},"li_1v1eup65",[1874],{"type":53,"attrs":1875,"content":1877},{"id":1876},"p_3w2kuvqq",[1878,1882],{"text":1879,"type":51,"marks":1880},"A organização não tem, hoje, um time ou uma prática consolidada de operar reverse proxy\u002Fedge router, observabilidade entre origens e coordenação de deploy entre pipelines independentes",[1881],{"type":133},{"text":1883,"type":51}," — porque, nesse caso, o custo de montar essa capacidade do zero costuma superar o ganho de autonomia de UI que motivou a decisão em primeiro lugar.",{"type":409},{"type":44,"attrs":1886,"content":1888},{"id":1887,"level":47},"h_z0fwn7zx",[1889],{"text":1890,"type":51},"5. Astro na Era dos Agentes de IA",{"type":53,"attrs":1892,"content":1894},{"id":1893},"p_k2rilebm",[1895,1897,1900],{"text":1896,"type":51},"A mesma arquitetura que elimina o custo de JavaScript para humanos é exatamente a que reduz, em até dez vezes, os tokens consumidos por agentes de IA ao ler uma página. Essa não é uma coincidência de design nem um efeito colateral descoberto depois do lançamento — é a consequência direta de uma única decisão, tomada desde a primeira linha do Astro: estático por padrão, dinâmico só onde declarado. O que a Seção 1 apresentou como economia de JavaScript no navegador e a Seção 4 mostrou como um ",{"text":1410,"type":51,"marks":1898},[1899],{"type":405},{"text":1901,"type":51}," central entregando HTML coeso e completo é, olhando de outro ângulo, exatamente a infraestrutura que esse novo tipo de cliente mais valoriza.",{"type":53,"attrs":1903,"content":1905},{"id":1904},"p_yu3hg21c",[1906,1908,1911,1913,1916],{"text":1907,"type":51},"Porque é isso que um crawler de IA é, tecnicamente: mais um cliente HTTP fazendo uma requisição contra o mesmo ",{"text":1410,"type":51,"marks":1909},[1910],{"type":405},{"text":1912,"type":51}," que serve um navegador — só que mais exigente. Ele não executa JavaScript, não espera hidratação, não navega clicando em links: faz uma requisição, recebe uma resposta, e extrai o que precisa dali, sem segunda chance. Se a saída desse ",{"text":1410,"type":51,"marks":1914},[1915],{"type":405},{"text":1917,"type":51}," já é HTML limpo e completo — a mesma composição descrita na Seção 4 — esse cliente não-humano recebe exatamente a vantagem que o Astro foi desenhado para entregar a humanos: nenhum ruído de scripts, nenhuma espera por hidratação, nenhuma dependência de execução de código para que o conteúdo exista.",{"type":53,"attrs":1919,"content":1921},{"id":1920},"p_gs94k0ib",[1922],{"text":1923,"type":51},"Dito de forma direta: o Astro não precisou se adaptar para a era dos agentes de IA. Ele já estava pronto para ela antes de ela existir — o mesmo investimento arquitetural que serve bem um usuário humano paga dividendo duplo quando o \"usuário\" é uma máquina. Isso não isenta o framework de uma resposta honesta sobre como ele se comporta nesse cenário — não um slide de marketing. A resposta curta é que ele herda, quase de graça, essa vantagem estrutural — e ao mesmo tempo enfrenta uma área em rápida mudança onde nenhum framework, incluindo ele, tem ainda um padrão definitivo.",{"type":44,"attrs":1925,"content":1927},{"id":1926,"level":68},"h_cqljddum",[1928],{"text":1929,"type":51},"5.1 O crawler de IA como \"cliente otimizado\": HTML pronto é HTML barato de ler",{"type":53,"attrs":1931,"content":1933},{"id":1932},"p_v82bhquc",[1934,1936,1940,1942,1946,1948,1952,1954,1958],{"text":1935,"type":51},"A maioria dos crawlers relevantes para IA — bots de treinamento como o ",{"text":1937,"type":51,"marks":1938},"GPTBot",[1939],{"type":187},{"text":1941,"type":51}," e o ",{"text":1943,"type":51,"marks":1944},"ClaudeBot",[1945],{"type":187},{"text":1947,"type":51},", ou bots de indexação para respostas em tempo real como o ",{"text":1949,"type":51,"marks":1950},"OAI-SearchBot",[1951],{"type":187},{"text":1953,"type":51}," — não executa JavaScript de forma consistente nem paga o custo de esperar hidratação. Nesse sentido, eles se comportam como uma versão ainda mais exigente do cenário de composição que vimos na Seção 4: onde um humano tolera (até certo ponto) esperar uma ilha hidratar, um crawler de IA simplesmente não espera — ele lê o que chegou na resposta HTTP e segue em frente. Quando esses bots encontram uma página cheia de ",{"text":1955,"type":51,"marks":1956},"markup",[1957],{"type":405},{"text":1959,"type":51}," de navegação, scripts, anúncios e camadas de hidratação antes do conteúdo real, eles gastam janela de contexto e tempo de processamento em ruído. Empresas que passaram a servir Markdown limpo em vez de HTML denso relataram reduções de até 10 vezes no número de tokens necessários para processar a mesma página.",{"type":53,"attrs":1961,"content":1963},{"id":1962},"p_v72tzm4k",[1964],{"text":1965,"type":51},"Como o Astro entrega HTML estático e semântico por padrão — a mesma característica que favorece SEO tradicional e que discutimos como base da composição de micro frontends —, um agente de IA que rastreia um site Astro tende a receber conteúdo limpo sem esforço extra, exatamente pelo mesmo motivo que um crawler de busca tradicional recebe. A vantagem não foi desenhada pensando em IA; ela é uma consequência colateral de uma arquitetura que já priorizava HTML pronto para qualquer cliente, humano ou não. Isso não é exclusividade do Astro — qualquer site majoritariamente estático se beneficia da mesma forma —, mas é coerente com o restante do artigo: no Astro, esse comportamento não exige configuração.",{"type":44,"attrs":1967,"content":1969},{"id":1968,"level":68},"h_bwqa0y3g",[1970],{"text":1971,"type":51},"5.2 llms.txt: um padrão promissor, com adoção real ainda incerta",{"type":53,"attrs":1973,"content":1975},{"id":1974},"p_alyal3oo",[1976,1978,1982],{"text":1977,"type":51},"Surgiu em 2024 uma proposta de padrão chamada ",{"text":1979,"type":51,"marks":1980},"llms.txt",[1981],{"type":133},{"text":1983,"type":51}," — um arquivo em texto simples, na raiz do site, funcionando como um \"sumário\" legível por agentes: uma lista curada de páginas importantes, com links diretos para versões em Markdown. A ideia é sedutora e tecnicamente simples de implementar em Astro, já que gerar um endpoint de texto em build time é trivial:",{"type":169,"attrs":1985,"content":1988},{"id":1986,"language":27,"highlighted":1987},"code_6aqtqc56","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Fllms.txt.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { getCollection } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'astro:content'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> GET\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> posts\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> getCollection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'blog'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> linhas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> posts.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">post\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> `- [${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">post\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}](\u002Fblog\u002F${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">post\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">slug\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}.md): ${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">post\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">description\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> conteudo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '# Meu Site'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '> Documentação e artigos técnicos.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    '## Artigos'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    ...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">linhas,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  ].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">join\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">\\n\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Response\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(conteudo, {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    headers: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Content-Type'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'text\u002Fplain; charset=utf-8'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1989],{"text":1990,"type":51},"\u002F\u002F src\u002Fpages\u002Fllms.txt.ts\nimport { getCollection } from 'astro:content';\n\nexport async function GET() {\n  const posts = await getCollection('blog');\n\n  const linhas = posts.map(\n    (post) => `- [${post.data.title}](\u002Fblog\u002F${post.slug}.md): ${post.data.description}`\n  );\n\n  const conteudo = [\n    '# Meu Site',\n    '',\n    '> Documentação e artigos técnicos.',\n    '',\n    '## Artigos',\n    ...linhas,\n  ].join('\\n');\n\n  return new Response(conteudo, {\n    headers: { 'Content-Type': 'text\u002Fplain; charset=utf-8' },\n  });\n}\n",{"type":53,"attrs":1992,"content":1994},{"id":1993},"p_sqjp7uag",[1995,1997,2001,2003,2007],{"text":1996,"type":51},"Mas a honestidade aqui importa: o entusiasmo em torno do llms.txt correu na frente dos dados. Em julho de 2025, a própria equipe de Search do Google declarou publicamente que não usa e não planeja usar o llms.txt como sinal — e chegou a compará-lo à extinta meta tag de ",{"text":1998,"type":51,"marks":1999},"keywords",[2000],{"type":405},{"text":2002,"type":51},". Nenhum grande provedor de LLM (OpenAI, Anthropic, Google, Meta) assumiu publicamente o compromisso de tratar o arquivo como sinal de indexação ou de resposta. Levantamentos recentes mostram adoção em torno de 10% dos domínios analisados, e o tráfego de bots de treinamento e de busca com IA sobre o arquivo ",{"text":2004,"type":51,"marks":2005},"\u002Fllms.txt",[2006],{"type":187},{"text":2008,"type":51}," em si é, segundo análises de tráfego de bots, estatisticamente desprezível.",{"type":53,"attrs":2010,"content":2012},{"id":2011},"p_aqubv942",[2013,2015,2019],{"text":2014,"type":51},"O que sobrevive dessa proposta, na prática, é um uso mais estreito do que o pretendido originalmente: o llms.txt está se firmando como ",{"text":2016,"type":51,"marks":2017},"camada de navegação para agentes de codificação",[2018],{"type":133},{"text":2020,"type":51}," — ferramentas como Cursor, Claude Code e GitHub Copilot, que buscam documentação técnica sob demanda enquanto ajudam um desenvolvedor —, e não como mecanismo de ranqueamento ou citação em buscas de IA voltadas ao público geral.",{"type":44,"attrs":2022,"content":2024},{"id":2023,"level":68},"h_ezq7b83y",[2025],{"text":2026,"type":51},"5.3 Um caso revelador: o próprio Astro abandonou seu llms.txt",{"type":53,"attrs":2028,"content":2030},{"id":2029},"p_ucte62ry",[2031,2033,2036,2038,2042],{"text":2032,"type":51},"Um episódio recente ilustra bem o quanto esse terreno ainda está se movendo. A própria equipe do Astro, que havia sido pioneira em publicar um ",{"text":1979,"type":51,"marks":2034},[2035],{"type":187},{"text":2037,"type":51}," em sua documentação oficial, removeu o arquivo em 2026. A justificativa dos mantenedores não foi falta de interesse por agentes de IA — pelo contrário: foi a avaliação de que um arquivo estático de texto já não era a melhor forma de atender esse público. Em seu lugar, o Astro passou a oferecer um ",{"text":2039,"type":51,"marks":2040},"servidor MCP (Model Context Protocol)",[2041],{"type":133},{"text":2043,"type":51}," para sua documentação, permitindo que ferramentas como o Claude Code consultem a documentação de forma interativa e estruturada, em vez de baixar um índice estático e tentar adivinhar o que é relevante.",{"type":53,"attrs":2045,"content":2047},{"id":2046},"p_3hcgs8dh",[2048],{"text":2049,"type":51},"Esse caso é uma lição de humildade técnica: o comportamento \"correto\" para preparar um site para agentes de IA ainda não é um padrão fechado — está sendo negociado em tempo real entre provedores de LLM, mantenedores de frameworks e a comunidade. O mesmo vale para este próprio artigo: escrito hoje, ele tem validade curta por definição.",{"type":44,"attrs":2051,"content":2053},{"id":2052,"level":68},"h_vjl9e1nh",[2054],{"text":2055,"type":51},"5.4 O que existe hoje no ecossistema Astro",{"type":53,"attrs":2057,"content":2059},{"id":2058},"p_h27dsctp",[2060],{"text":2061,"type":51},"Apesar da incerteza sobre qual padrão vai vencer, o ecossistema de integrações do Astro já reflete essa demanda concretamente. Hoje é possível encontrar, no diretório oficial de integrações, pacotes prontos que geram automaticamente, no momento do build:",{"type":115,"attrs":2063,"content":2065},{"id":2064,"tight":118},"ul_objzk6go",[2066,2098,2135,2149],{"type":121,"attrs":2067,"content":2069},{"id":2068},"li_y665a36k",[2070],{"type":53,"attrs":2071,"content":2073},{"id":2072},"p_4m6hnnak",[2074,2078,2080,2084,2086,2090,2092,2096],{"text":2075,"type":51,"marks":2076},"Versões em Markdown de cada página",[2077],{"type":133},{"text":2079,"type":51},", servidas junto ao HTML via negociação de conteúdo HTTP (",{"text":2081,"type":51,"marks":2082},"Accept: text\u002Fmarkdown",[2083],{"type":187},{"text":2085,"type":51},") ou por convenção de URL (",{"text":2087,"type":51,"marks":2088},"\u002Fartigo.md",[2089],{"type":187},{"text":2091,"type":51}," ao lado de ",{"text":2093,"type":51,"marks":2094},"\u002Fartigo",[2095],{"type":187},{"text":2097,"type":51},").",{"type":121,"attrs":2099,"content":2101},{"id":2100},"li_1colsdcy",[2102],{"type":53,"attrs":2103,"content":2105},{"id":2104},"p_zvbzqkcc",[2106,2110,2114,2116,2119,2121,2124,2126,2129,2131,2134],{"text":2107,"type":51,"marks":2108},"robots.txt",[2109],{"type":187},{"text":2111,"type":51,"marks":2112}," com regras específicas por bot de IA",[2113],{"type":133},{"text":2115,"type":51},", permitindo, por exemplo, autorizar o ",{"text":1949,"type":51,"marks":2117},[2118],{"type":187},{"text":2120,"type":51}," (usado para respostas do ChatGPT) e bloquear o ",{"text":1937,"type":51,"marks":2122},[2123],{"type":187},{"text":2125,"type":51}," (usado para treinamento de modelos) separadamente — os grandes provedores hoje operam bots distintos para cada finalidade, e o controle de acesso granular acontece no ",{"text":2107,"type":51,"marks":2127},[2128],{"type":187},{"text":2130,"type":51},", não no ",{"text":1979,"type":51,"marks":2132},[2133],{"type":187},{"text":195,"type":51},{"type":121,"attrs":2136,"content":2138},{"id":2137},"li_kczukekv",[2139],{"type":53,"attrs":2140,"content":2142},{"id":2141},"p_hsstwumk",[2143,2147],{"text":2144,"type":51,"marks":2145},"Dados estruturados em JSON-LD",[2146],{"type":133},{"text":2148,"type":51},", que continuam sendo o sinal mais estabelecido e amplamente suportado — tanto por buscadores tradicionais quanto por sistemas de IA que extraem entidades e fatos de uma página.",{"type":121,"attrs":2150,"content":2152},{"id":2151},"li_j1hu8jpf",[2153],{"type":53,"attrs":2154,"content":2156},{"id":2155},"p_bxaae7bb",[2157,2161,2165,2168,2172],{"text":2158,"type":51,"marks":2159},"Arquivos experimentais como ",[2160],{"type":133},{"text":2162,"type":51,"marks":2163},"agents.md",[2164],{"type":187},{"text":1004,"type":51,"marks":2166},[2167],{"type":133},{"text":2169,"type":51,"marks":2170},".well-known\u002Fmcp.json",[2171],{"type":187},{"text":2173,"type":51},", sinalizando que parte da comunidade já está apostando no MCP como sucessor natural do modelo de \"arquivo estático de índice\".",{"type":44,"attrs":2175,"content":2177},{"id":2176,"level":68},"h_lidifr7k",[2178],{"text":2179,"type":51},"5.5 Onde isso deixa o Astro",{"type":53,"attrs":2181,"content":2183},{"id":2182},"p_2tuy7xn5",[2184,2186,2189],{"text":2185,"type":51},"Juntando os pontos: o Astro não tem nenhum recurso mágico dedicado exclusivamente a modelos de IA, e seria impreciso dizer que ele foi \"desenhado\" para essa era — a arquitetura de ilhas é anterior a esse debate por vários anos. O que ele tem é uma vantagem estrutural herdada: HTML limpo e estático por padrão é simultaneamente bom para SEO tradicional, bom para ",{"text":494,"type":51,"marks":2187},[2188],{"type":405},{"text":2190,"type":51}," de redes sociais e barato de processar para qualquer sistema — humano ou agente — que precise extrair conteúdo sem custo de execução de JavaScript. Isso coloca o Astro em posição confortável para se adaptar ao que vier a seguir, seja um padrão como o llms.txt, seja algo mais próximo do MCP, sem precisar de reescrita estrutural — só de mais uma integração no build.",{"type":53,"attrs":2192,"content":2194},{"id":2193},"p_8yu21gwf",[2195],{"text":2196,"type":51},"A cautela aqui é a mesma que orienta o resto deste artigo: nenhuma dessas ferramentas — llms.txt, Markdown paralelo, MCP — deve ser tratada como certeza definitiva. Este é, hoje, o terreno que muda mais rápido em todo o ecossistema web, e a melhor postura técnica é revisitar essa seção periodicamente, não tratá-la como resolvida.",{"type":409},{"type":44,"attrs":2199,"content":2201},{"id":2200,"level":47},"h_z14vm4wk",[2202],{"text":2203,"type":51},"6. Conclusão",{"type":53,"attrs":2205,"content":2207},{"id":2206},"p_gbv00gux",[2208],{"text":2209,"type":51},"A arquitetura de ilhas não é um recurso do Astro — é a razão de o framework existir. Toda a análise deste artigo, das vantagens de performance e SEO às limitações em aplicações densas, decorre da mesma escolha original: tratar JavaScript no cliente como exceção, não como padrão.",{"type":53,"attrs":2211,"content":2213},{"id":2212},"p_be2m25a4",[2214,2216,2220],{"text":2215,"type":51},"Isso torna o Astro excelente para o que ele foi desenhado — sites orientados a conteúdo que precisam carregar rápido e ser indexados bem — e deliberadamente menos adequado para aplicações onde a interatividade é a regra, não a exceção. A pergunta que qualquer equipe deveria fazer antes de adotar o Astro não é \"esse framework é bom?\", mas \"o meu produto é, no fundo, conteúdo ou aplicação?\". A resposta honesta a essa pergunta decide mais do que qualquer ",{"text":2217,"type":51,"marks":2218},"benchmark",[2219],{"type":405},{"text":195,"type":51},{"type":53,"attrs":2222,"content":2224},{"id":2223},"p_hb7u1l9k",[2225],{"text":2226,"type":51},"Um reforço final, para fechar sem deixar uma falsa impressão: a profundidade dedicada a micro frontends na Seção 4 reflete a riqueza técnica do tema, não a frequência com que ele deveria aparecer nos seus projetos. Para a esmagadora maioria dos casos, o Astro certo é o mais simples — uma aplicação, um deploy, ilhas convivendo na mesma base de código. A arquitetura distribuída é uma ferramenta para um problema organizacional específico, não um upgrade natural de maturidade.",{"type":409},{"type":44,"attrs":2229,"content":2231},{"id":2230,"level":47},"h_bj3zxvfh",[2232],{"text":2233,"type":51},"Bônus: Implementação Avançada — Composição de Fragmento com Server Islands",{"type":53,"attrs":2235,"content":2237},{"id":2236},"p_fvhghzed",[2238,2240,2243,2245,2248],{"text":2239,"type":51},"Este bônus assume o terreno já dominado: ilhas, diretivas ",{"text":209,"type":51,"marks":2241},[2242],{"type":187},{"text":2244,"type":51},", TypeScript e a integração React já fazem parte do seu vocabulário depois das quatro seções anteriores. Não há instalação para mostrar aqui, nem estrutura de pastas para explicar — isso está a um comando de distância na documentação oficial, e repeti-lo agora só empurraria a leitura para longe do que realmente importa. O que segue vai direto ao ponto mais avançado deste artigo em código: a diretiva ",{"text":1529,"type":51,"marks":2246},[2247],{"type":187},{"text":2249,"type":51}," consumindo um endpoint remoto, resolvendo de fato a composição assíncrona no servidor — sem boilerplate no caminho.",{"type":53,"attrs":2251,"content":2253},{"id":2252},"p_lfhqewas",[2254],{"text":2255,"type":51},"Um endpoint que representa \"outro time\" servindo conteúdo, com uma latência real simulada para deixar o comportamento assíncrono visível:",{"type":169,"attrs":2257,"content":2260},{"id":2258,"language":27,"highlighted":2259},"code_lvzuwmtq","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Fapi\u002Ffragmento.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> GET\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> `<div style=\"padding:1rem;border:1px solid #ccc;\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    Fragmento renderizado por outro serviço às ${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Date\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">().\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">toLocaleTimeString\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'pt-BR'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  <\u002Fdiv>`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Response\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(html, {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    headers: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Content-Type'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'text\u002Fhtml'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2261],{"text":2262,"type":51},"\u002F\u002F src\u002Fpages\u002Fapi\u002Ffragmento.ts\nexport async function GET() {\n  const html = `\u003Cdiv style=\"padding:1rem;border:1px solid #ccc;\">\n    Fragmento renderizado por outro serviço às ${new Date().toLocaleTimeString('pt-BR')}\n  \u003C\u002Fdiv>`;\n\n  return new Response(html, {\n    headers: { 'Content-Type': 'text\u002Fhtml' },\n  });\n}\n",{"type":53,"attrs":2264,"content":2266},{"id":2265},"p_ewn1udsc",[2267],{"text":2268,"type":51},"Agora, o componente que busca e insere esse fragmento no servidor, sem bloquear o carregamento do restante da página:",{"type":169,"attrs":2270,"content":2273},{"id":2271,"language":172,"highlighted":2272},"code_rj4iw07b","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fcomponents\u002FFragmentoRemoto.astro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> prerender\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> resposta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> URL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'\u002Fapi\u002Ffragmento'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, Astro.url).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">toString\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> resposta.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">fragmento-remoto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\" \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">set:html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">={html} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2274],{"text":2275,"type":51},"---\n\u002F\u002F src\u002Fcomponents\u002FFragmentoRemoto.astro\nexport const prerender = false;\n\nconst resposta = await fetch(new URL('\u002Fapi\u002Ffragmento', Astro.url).toString());\nconst html = await resposta.text();\n---\n\n\u003Cdiv class=\"fragmento-remoto\" set:html={html} \u002F>\n",{"type":53,"attrs":2277,"content":2279},{"id":2278},"p_0legewaa",[2280,2282,2285,2287,2290],{"text":2281,"type":51},"E, na página inicial, adicione a chamada com ",{"text":1529,"type":51,"marks":2283},[2284],{"type":187},{"text":2286,"type":51}," e um ",{"text":402,"type":51,"marks":2288},[2289],{"type":405},{"text":2291,"type":51}," imediato:",{"type":169,"attrs":2293,"content":2296},{"id":2294,"language":172,"highlighted":2295},"code_gm9jrren","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Fpages\u002Findex.astro (trecho adicionado)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> FragmentoRemoto \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '..\u002Fcomponents\u002FFragmentoRemoto.astro'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Fragmento composto (estilo micro frontend)<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">FragmentoRemoto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> server:defer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> slot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">fallback\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">\">Carregando fragmento do outro serviço…<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">FragmentoRemoto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2297],{"text":2298,"type":51},"---\n\u002F\u002F src\u002Fpages\u002Findex.astro (trecho adicionado)\nimport FragmentoRemoto from '..\u002Fcomponents\u002FFragmentoRemoto.astro';\n---\n\n\u003Ch2>Fragmento composto (estilo micro frontend)\u003C\u002Fh2>\n\u003CFragmentoRemoto server:defer>\n  \u003Cdiv slot=\"fallback\">Carregando fragmento do outro serviço…\u003C\u002Fdiv>\n\u003C\u002FFragmentoRemoto>\n",{"type":53,"attrs":2300,"content":2302},{"id":2301},"p_7j3yv9fy",[2303,2305,2309,2311,2314],{"text":2304,"type":51},"Como o Astro, por padrão, faz ",{"text":2306,"type":51,"marks":2307},"pre-render",[2308],{"type":405},{"text":2310,"type":51}," estático, ",{"text":1529,"type":51,"marks":2312},[2313],{"type":187},{"text":2315,"type":51}," exige um servidor rodando sob demanda. Instale o adaptador Node para testar esse comportamento localmente:",{"type":169,"attrs":2317,"content":2320},{"id":2318,"language":664,"highlighted":2319},"code_wfuf1u5o","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> astro add node\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> run build\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> run start\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2321],{"text":2322,"type":51},"npx astro add node\nnpm run build\nnpm run start\n",{"type":53,"attrs":2324,"content":2326},{"id":2325},"p_5mu1la7n",[2327],{"text":2328,"type":51},"Acesse a página novamente: por um instante você verá \"Carregando fragmento do outro serviço…\", e em seguida o conteúdo buscado no servidor aparece — sem que o restante da página tenha esperado por ele. É exatamente o mecanismo descrito na Seção 4.3, em miniatura.",{"type":44,"attrs":2330,"content":2332},{"id":2331,"level":68},"h_y8gawecy",[2333],{"text":2334,"type":51},"O que este código resolve",{"type":53,"attrs":2336,"content":2338},{"id":2337},"p_d2yxt7pp",[2339],{"text":2340,"type":51},"Esse é o mecanismo real por trás da promessa de composição distribuída da Seção 4: um fragmento vindo de outra origem, renderizado no servidor, sem bloquear o restante da página e sem exigir nenhuma orquestração no cliente. O exemplo de estado compartilhado entre React e Vue via Nanostores, que fecha a fraqueza levantada na Seção 2.2, já não precisa de laboratório separado — ele mora ao lado do argumento que resolve, pronto para ser lido no calor da dúvida, não recuperado três seções depois num apêndice.",{"type":409},{"type":44,"attrs":2343,"content":2345},{"id":2344,"level":47},"h_p0fvw3c0",[2346],{"text":2347,"type":51},"Referências",{"type":115,"attrs":2349,"content":2351},{"id":2350,"tight":118},"ul_h321psfv",[2352,2372,2382,2398,2408,2424,2440,2450,2460,2470,2486,2502,2512,2522],{"type":121,"attrs":2353,"content":2355},{"id":2354},"li_3olg7hw9",[2356],{"type":53,"attrs":2357,"content":2359},{"id":2358},"p_opta4jc4",[2360,2362],{"text":2361,"type":51},"Documentação oficial do Astro — ",{"text":2363,"type":51,"marks":2364},"docs.astro.build\u002Fen\u002Fconcepts\u002Fislands",[2365],{"type":2366,"attrs":2367},"link",{"rel":2368,"href":2369,"class":2370,"title":17,"target":2371},"noopener noreferrer","https:\u002F\u002Fdocs.astro.build\u002Fen\u002Fconcepts\u002Fislands\u002F","editor-link","_blank",{"type":121,"attrs":2373,"content":2375},{"id":2374},"li_17b9wt89",[2376],{"type":53,"attrs":2377,"content":2379},{"id":2378},"p_4p5dzdvt",[2380],{"text":2381,"type":51},"Jason Miller, criador do Preact, sobre Islands Architecture (2020)",{"type":121,"attrs":2383,"content":2385},{"id":2384},"li_tynjkoez",[2386],{"type":53,"attrs":2387,"content":2389},{"id":2388},"p_qsi0dltz",[2390,2392],{"text":2391,"type":51},"Discussão pública da equipe Astro sobre composição de micro frontends via múltiplos servidores — ",{"text":2393,"type":51,"marks":2394},"github.com\u002Fwithastro\u002Froadmap\u002Fdiscussions\u002F713",[2395],{"type":2366,"attrs":2396},{"rel":2368,"href":2397,"class":2370,"title":17,"target":2371},"https:\u002F\u002Fgithub.com\u002Fwithastro\u002Froadmap\u002Fdiscussions\u002F713",{"type":121,"attrs":2399,"content":2401},{"id":2400},"li_7x19vhir",[2402],{"type":53,"attrs":2403,"content":2405},{"id":2404},"p_mgourvbh",[2406],{"text":2407,"type":51},"Artigo técnico sobre Server Islands aplicadas a micro frontends — Talent500 Engineering Blog",{"type":121,"attrs":2409,"content":2411},{"id":2410},"li_bgdv61u8",[2412],{"type":53,"attrs":2413,"content":2415},{"id":2414},"p_whhwnt5i",[2416,2418],{"text":2417,"type":51},"Comparativo Astro vs. Next.js (2026) — ",{"text":2419,"type":51,"marks":2420},"kunalganglani.com",[2421],{"type":2366,"attrs":2422},{"rel":2368,"href":2423,"class":2370,"title":17,"target":2371},"https:\u002F\u002Fwww.kunalganglani.com\u002F",{"type":121,"attrs":2425,"content":2427},{"id":2426},"li_shhiunif",[2428],{"type":53,"attrs":2429,"content":2431},{"id":2430},"p_ktbpxmnb",[2432,2434],{"text":2433,"type":51},"Documentação oficial do Next.js sobre Partial Prerendering — ",{"text":2435,"type":51,"marks":2436},"nextjs.org\u002Fdocs\u002Fapp\u002Fgetting-started\u002Fpartial-prerendering",[2437],{"type":2366,"attrs":2438},{"rel":2368,"href":2439,"class":2370,"title":17,"target":2371},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002F15\u002Fapp\u002Fgetting-started\u002Fpartial-prerendering",{"type":121,"attrs":2441,"content":2443},{"id":2442},"li_6n9t1783",[2444],{"type":53,"attrs":2445,"content":2447},{"id":2446},"p_x4c9f75k",[2448],{"text":2449,"type":51},"\"LLMs.txt in 2026: The Full Guide\" — dados de adoção e tráfego de bots de IA (Limy, 2026)",{"type":121,"attrs":2451,"content":2453},{"id":2452},"li_pybzkw6z",[2454],{"type":53,"attrs":2455,"content":2457},{"id":2456},"p_glckn4em",[2458],{"text":2459,"type":51},"\"Astro removed its llms.txt\" — relato sobre a substituição do llms.txt por servidor MCP na documentação oficial do Astro (Dachary Carey, 2026)",{"type":121,"attrs":2461,"content":2463},{"id":2462},"li_58lda0lk",[2464],{"type":53,"attrs":2465,"content":2467},{"id":2466},"p_bhqzxzig",[2468],{"text":2469,"type":51},"\"Making your Astro site agent-friendly\" — implementação de Markdown paralelo e negociação de conteúdo (Jimmy Guzman Moreno, 2026)",{"type":121,"attrs":2471,"content":2473},{"id":2472},"li_s2pq16vk",[2474],{"type":53,"attrs":2475,"content":2477},{"id":2476},"p_kg6sdnrz",[2478,2480],{"text":2479,"type":51},"Diretório oficial de integrações do Astro — ",{"text":2481,"type":51,"marks":2482},"astro.build\u002Fintegrations",[2483],{"type":2366,"attrs":2484},{"rel":2368,"href":2485,"class":2370,"title":17,"target":2371},"https:\u002F\u002Fastro.build\u002Fintegrations\u002F?search=llms",{"type":121,"attrs":2487,"content":2489},{"id":2488},"li_lcouu1cq",[2490],{"type":53,"attrs":2491,"content":2493},{"id":2492},"p_kmf47qb8",[2494,2496],{"text":2495,"type":51},"Documentação oficial do Astro sobre compartilhamento de estado entre ilhas com Nanostores — ",{"text":2497,"type":51,"marks":2498},"docs.astro.build\u002Fen\u002Frecipes\u002Fsharing-state-islands",[2499],{"type":2366,"attrs":2500},{"rel":2368,"href":2501,"class":2370,"title":17,"target":2371},"https:\u002F\u002Fdocs.astro.build\u002Fen\u002Frecipes\u002Fsharing-state-islands\u002F",{"type":121,"attrs":2503,"content":2505},{"id":2504},"li_1rddkmuv",[2506],{"type":53,"attrs":2507,"content":2509},{"id":2508},"p_prh6ju2p",[2510],{"text":2511,"type":51},"Práticas de CI\u002FCD, contract testing e canary release para micro frontends renderizados no servidor — Habsi Tech, \"Building Resilient Micro Frontends\"",{"type":121,"attrs":2513,"content":2515},{"id":2514},"li_kr1utai4",[2516],{"type":53,"attrs":2517,"content":2519},{"id":2518},"p_fhj9goha",[2520],{"text":2521,"type":51},"Relato de implementação de reverse proxy para composição de múltiplas experiências de frontend em produção — Asurion Product Development, \"Not so micro-frontends: Building a Reverse Proxy\"",{"type":121,"attrs":2523,"content":2525},{"id":2524},"li_a7q45xtu",[2526],{"type":53,"attrs":2527},{"id":2528},"p_52j47su4",{"type":53,"attrs":2530},{"id":2531},"p_i4257l67","Astro: Arquitetura de Ilhas, Performance e Quando Usar","Entenda como a arquitetura de ilhas do Astro entrega performance máxima enviando JavaScript apenas onde é necessário. O framework ideal para conteúdo.","2026-08-25T02:12:16.304108+00:00",[2536,2554,2572,2587],{"id":2537,"slug":2538,"title":2539,"excerpt":2540,"image":2541,"featured":10,"groupId":2542,"publishedAt":2543,"readingTime":2544,"views":2545,"author":2546,"category":2547,"tags":2548},"51c199b8-6ecb-4f37-add6-a3242221ab88","microfrontends-com-angular-e-nx-o-que-ninguem-conta","Microfrontends com Angular e Nx: o que ninguém conta","Todo tutorial ensina a configurar microfrontends em minutos, mas poucos revelam o caos arquitetural que surge após meses de deploy em produção.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785206853570-featured-zoyhgn.webp","3368e1b2-b6de-4e94-a3d4-294fae8ade13","2026-07-28T02:50:42.864559+00:00",16,37,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[2549,2552,2553],{"slug":2550,"name":2551},"angular","Angular",{"slug":27,"name":28},{"slug":24,"name":25},{"id":2555,"slug":2556,"title":2557,"excerpt":2558,"image":2559,"featured":10,"groupId":2560,"publishedAt":2561,"readingTime":2562,"views":2563,"author":2564,"category":2565,"tags":2566},"35711043-fe0c-4384-b945-8d508216d7bf","next-js-16-ppr-elimine-o-tradeoff-entre-estatico-e-dinamico-e-alcance-edge-ttfb","Next.js 16 PPR: Elimine o tradeoff entre estático e dinâmico e alcance Edge TTFB com dados atualizados","O Partial Prerendering no Next.js 16 resolve o clássico tradeoff de renderização, entregando velocidade estática com dados dinâmicos em uma resposta.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1783970715281-featured-ikveub.webp","4982f454-7d33-4921-a2b5-c1c663505594","2026-07-18T15:42:27.839+00:00",15,14,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[2567,2569,2571],{"slug":2568,"name":1185},"nextjs",{"slug":995,"name":2570},"React",{"slug":27,"name":28},{"id":2573,"slug":2574,"title":2575,"excerpt":2576,"image":2577,"featured":10,"groupId":2578,"publishedAt":2579,"readingTime":2580,"views":68,"author":2581,"category":2582,"tags":2583},"ae0fd7b3-4473-4f05-b7d0-2972cda8e899","pare-de-arriscar-seu-frontend-a-arquitetura-definitiva-do-angular-22","Pare de arriscar seu frontend: a arquitetura definitiva do Angular 22","O Angular 22 chegou. Descubra como as mudanças arquiteturais e os novos primitivos de reatividade o tornam a escolha ideal para sistemas enterprise.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1783664697703-featured-bp1wut.webp","9baf202d-f92f-4667-a3a3-8090369c1c0b","2026-07-11T00:36:51.027764+00:00",18,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[2584,2585,2586],{"slug":2550,"name":2551},{"slug":24,"name":25},{"slug":2568,"name":1185},{"id":2588,"slug":2589,"title":2590,"excerpt":2591,"image":2592,"featured":10,"groupId":2593,"publishedAt":2594,"readingTime":2595,"views":2596,"author":2597,"category":2598,"tags":2599},"5cbd9942-0deb-4886-9a7b-de4ff8807109","solidjs-em-2026-por-que-a-reatividade-fina-esta-superando-o-virtual-dom","SolidJS em 2026: Por que a reatividade fina está superando o Virtual DOM","Sem Virtual DOM e com reatividade fina, o SolidJS redefine o desenvolvimento frontend em 2026 com performance superior e componentes otimizados..","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1782323510914-featured-xegn0n.webp","89a516d2-a66f-4df4-90c5-f1d201806688","2026-06-24T17:52:33.862065+00:00",28,0,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[2600,2603,2606,2607],{"slug":2601,"name":2602},"developer-tools","Developer Tools",{"slug":2604,"name":2605},"nodejs","Node.js",{"slug":27,"name":28},{"slug":24,"name":25},{"pt":6,"en":2609},"astro-island-architecture-performance-and-where-the-framework-truly-fits",[2611,2616,2619,2625,2631],{"id":2612,"slug":2613,"name":2614,"colorHex":2615,"iconName":17,"postCount":2595},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",{"id":2617,"slug":19,"name":20,"colorHex":21,"iconName":17,"postCount":2618},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c",20,{"id":2620,"slug":2621,"name":2622,"colorHex":2623,"iconName":2624,"postCount":2544},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Inteligência Artificial","#6366f1","brain",{"id":2626,"slug":2627,"name":2628,"colorHex":2629,"iconName":17,"postCount":2630},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Notícias Tech","#e50606",8,{"id":2632,"slug":2633,"name":2634,"colorHex":2635,"iconName":2636,"postCount":2637},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","Guias & Tutoriais","#be123c","book-open",5]