[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fthe-framework-mistake-no-one-notices-in-the-first-year":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":851,"translations":921,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":68,"metaTitle":9,"metaDescription":9,"updatedAt":850},"d8964e11-1536-4063-9b41-d0bf4f1b7c25","the-framework-mistake-no-one-notices-in-the-first-year","The framework mistake no one notices in the first year","React, Next.js, Vue, Angular, Svelte, Astro, SolidJS, and Nuxt: eight routes, one decision. This is the honest guide to choosing your frontend","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1781652337876-featured-k56jnv.webp",false,"5bdee4d3-095c-4c02-99ed-7deb20fcbc6c","2026-06-17T07:53:47.117217+00:00",10,0,{"name":50,"avatar":9},"Genildo Souza",{"slug":13,"name":14,"color":15},[53,56,59,62,65],{"slug":54,"name":55},"angular","Angular",{"slug":57,"name":58},"nextjs","Next.js",{"slug":60,"name":61},"performance","Performance",{"slug":63,"name":64},"typescript","TypeScript",{"slug":66,"name":67},"vuejs","Vue.js",{"type":69,"content":70},"doc",[71,79,85,91,97,110,116,118,125,131,137,186,198,236,237,243,250,263,288,297,307,313,319,325,333,342,343,349,355,361,373,381,390,396,402,409,418,419,425,431,437,449,456,465,466,472,478,484,513,521,530,536,542,549,558,559,565,571,577,583,591,600,601,607,613,695,701,789,802,803,809,815,827,833,841,842],{"type":72,"attrs":73,"content":75},"paragraph",{"id":74},"p_5pa7fadg",[76],{"text":77,"type":78},"Two teams started the same product in the same week.","text",{"type":72,"attrs":80,"content":82},{"id":81},"p_tax11vlc",[83],{"text":84,"type":78},"Same idea, same deadline, similar budgets. Both were good — experienced people, clean code, eagerness to deliver. On the Friday of the first week, each made a decision that seemed too small to matter: which framework to use.",{"type":72,"attrs":86,"content":88},{"id":87},"p_d5chrnq3",[89],{"text":90,"type":78},"Twelve months later, one team had a running product, scaling and easy to hire people to maintain it. The other was in the middle of a rewrite, burning cash to escape a technology that couldn’t handle growth.",{"type":72,"attrs":92,"content":94},{"id":93},"p_we93srrh",[95],{"text":96,"type":78},"The difference wasn’t talent. It wasn’t luck. It was a choice made in the first week — when no one yet felt its weight.",{"type":72,"attrs":98,"content":100},{"id":99},"p_klf2b72x",[101,103,108],{"text":102,"type":78},"This is the cruel detail of the framework choice: ",{"text":104,"type":78,"marks":105},"the mistake doesn’t hurt at the moment you make it.",[106],{"type":107},"bold",{"text":109,"type":78}," It charges the bill a year later, when switching technology costs more than it cost to build the entire first version.",{"type":72,"attrs":111,"content":113},{"id":112},"p_0bp741bi",[114],{"text":115,"type":78},"The good news? You’re reading this in the first week. Let’s make sure you end up on the right team.",{"type":117},"horizontalRule",{"type":119,"attrs":120,"content":122},"heading",{"id":121,"level":36},"h_c79zuty4",[123],{"text":124,"type":78},"Why this decision weighs more in 2026",{"type":72,"attrs":126,"content":128},{"id":127},"p_ra76b92p",[129],{"text":130,"type":78},"There was a time when choosing a framework was almost a lottery — a new one popped up every month and the internet was in a holy war between Angular, React, and Vue. That phase is over. Today’s market is calmer and, most importantly, clearer: each framework occupies a defined territory, with strong signals about what it’s best for.",{"type":72,"attrs":132,"content":134},{"id":133},"p_9riw75ws",[135],{"text":136,"type":78},"But “clearer” doesn’t mean “easier.” Three changes have raised the cost of getting it wrong:",{"type":138,"attrs":139,"content":142},"bulletList",{"id":140,"tight":141},"ul_zyvu001v",true,[143,158,172],{"type":144,"attrs":145,"content":147},"listItem",{"id":146},"li_0q105c56",[148],{"type":72,"attrs":149,"content":151},{"id":150},"p_ro1p5i5w",[152,156],{"text":153,"type":78,"marks":154},"Everything became full-stack.",[155],{"type":107},{"text":157,"type":78}," Server-side rendering, static generation, partial hydration — decisions that used to be details now define performance, SEO, and operational complexity.",{"type":144,"attrs":159,"content":161},{"id":160},"li_9aa3hci6",[162],{"type":72,"attrs":163,"content":165},{"id":164},"p_r2jjzxic",[166,170],{"text":167,"type":78,"marks":168},"TypeScript stopped being optional.",[169],{"type":107},{"text":171,"type":78}," It affects onboarding speed, safety in refactoring, and even the quality of the code AI writes for you.",{"type":144,"attrs":173,"content":175},{"id":174},"li_453bp8uj",[176],{"type":72,"attrs":177,"content":179},{"id":178},"p_92gqn2av",[180,184],{"text":181,"type":78,"marks":182},"Reactivity got refined.",[183],{"type":107},{"text":185,"type":78}," Signals, runes, compilers: frameworks stopped “redrawing the whole screen” and started updating only what changed. Choosing today means choosing a mental model too.",{"type":72,"attrs":187,"content":189},{"id":188},"p_00r5jsqu",[190,192,196],{"text":191,"type":78},"Before any comparison, lock in the idea that will guide everything else: the right question ",{"text":193,"type":78,"marks":194},"is not",[195],{"type":107},{"text":197,"type":78}," “what’s the best framework?”. It’s “what’s the best framework for my context?”. Whoever flips this question always regrets it — no huge ecosystem makes up for a framework that doesn’t serve your product.",{"type":199,"attrs":200},"speedCards",{"id":201,"cards":202,"title":234,"caption":235},"speed_9w8pozu6",[203,207,211,215,219,222,226,230],{"label":204,"value":205,"detail":206},"React 19","Flexible and powerful","Ecossistema ★★★★★ · curva média. A aposta mais segura, com a maior comunidade do mundo.",{"label":208,"value":209,"detail":210},"Next.js 16","Full-stack React","Ecossistema ★★★★★ · curva média\u002Falta. SSR, RSC e Turbopack para apps públicos sérios.",{"label":212,"value":213,"detail":214},"Vue 3.6","Progressive and intuitive","Ecossistema ★★★★ · curva baixa. Produtividade e legibilidade com a curva mais suave.",{"label":216,"value":217,"detail":218},"Nuxt 4","Vue full-stack","Ecossistema ★★★★ · curva baixa\u002Fmédia. Convenções e auto-imports sobre o Vue.",{"label":55,"value":220,"detail":221},"Complete and scalable","Ferramentas ★★★★★ · curva alta. A plataforma padrão do enterprise, agora com Signals.",{"label":223,"value":224,"detail":225},"Svelte 5","Simple and high-performance","Ecossistema ★★★ · curva média. Compila tudo no build: bundles minúsculos e Runes.",{"label":227,"value":228,"detail":229},"SolidJS","Extreme reactivity","Ecossistema ★★ · curva média\u002Falta. Reatividade granular, sem Virtual DOM.",{"label":231,"value":232,"detail":233},"Astro 5","Content first","Ecossistema ★★★ · curva baixa\u002Fmédia. Zero JS por padrão e ilhas de interatividade.","The eight frameworks at a glance","Each one shines in its own territory. The right choice is the one that fits your project and your team.",{"type":117},{"type":119,"attrs":238,"content":240},{"id":239,"level":36},"h_aplj1wav",[241],{"text":242,"type":78},"Industry standards",{"type":119,"attrs":244,"content":247},{"id":245,"level":246},"h_jvef1boi",3,[248],{"text":249,"type":78},"React 19 — the safest bet out there",{"type":72,"attrs":251,"content":253},{"id":252},"p_ugdmg63q",[254,256,261],{"text":255,"type":78},"React isn’t the fastest in benchmarks nor the most elegant. It is the most ",{"text":257,"type":78,"marks":258},"secure",[259],{"type":260},"italic",{"text":262,"type":78}," — and in product development, security is gold. It’s the most used frontend technology in the world, present in about two out of every three professional developers. That means a ready-made library for everything, answers for any error on Stack Overflow, and an ocean of people available to hire.",{"type":72,"attrs":264,"content":266},{"id":265},"p_6vkdplhl",[267,269,273,275,280,282,286],{"text":268,"type":78},"Version 19 closed React’s biggest historical gap: manual performance. The new ",{"text":270,"type":78,"marks":271},"React Compiler",[272],{"type":107},{"text":274,"type":78}," automatically memorizes your code — goodbye to most ",{"text":276,"type":78,"marks":277},"useMemo",[278],{"type":279},"code",{"text":281,"type":78}," and ",{"text":283,"type":78,"marks":284},"useCallback",[285],{"type":279},{"text":287,"type":78}," — and cuts unnecessary re-renders without you having to think about them. Add Server Components and you get a mature foundation that ages well.",{"type":289,"attrs":290,"content":294},"codeBlock",{"id":291,"language":292,"highlighted":293},"code_0aptq7ne","jsx","\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:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ListaDeProdutos\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">itens\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">busca\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\">  \u002F\u002F Sem useMemo: o React Compiler (v19) memoriza isto automaticamente\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\"> visiveis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> itens.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">filter\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\"> p.nome.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">includes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(busca));\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\">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\">      {visiveis.\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{p.id}>{p.nome}<\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\">    <\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\">\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>\u003C\u002Fcode>\u003C\u002Fpre>",[295],{"text":296,"type":78},"function ListaDeProdutos({ itens, busca }) {\n  \u002F\u002F Sem useMemo: o React Compiler (v19) memoriza isto automaticamente\n  const visiveis = itens.filter((p) => p.nome.includes(busca));\n\n  return (\n    \u003Cul>\n      {visiveis.map((p) => \u003Cli key={p.id}>{p.nome}\u003C\u002Fli>)}\n    \u003C\u002Ful>\n  );\n}",{"type":72,"attrs":298,"content":300},{"id":299},"p_w9uuf0a6",[301,305],{"text":302,"type":78,"marks":303},"Ideal for: ",[304],{"type":107},{"text":306,"type":78},"Complex SPAs, AI-integrated products, and teams who want total freedom with the largest safety net in the market.",{"type":119,"attrs":308,"content":310},{"id":309,"level":246},"h_34yuedvs",[311],{"text":312,"type":78},"Next.js 16 — React taken seriously in production",{"type":72,"attrs":314,"content":316},{"id":315},"p_1anww80y",[317],{"text":318,"type":78},"If React is the library, Next.js is the factory built around it. App Router, Server Components, Server Actions, and partial rendering come ready — you stop patching and start delivering. In version 16, stable Turbopack made builds and the development environment insanely faster, breaking down much of the friction that kept teams away from Server Components.",{"type":72,"attrs":320,"content":322},{"id":321},"p_rsa8x3ms",[323],{"text":324,"type":78},"It’s the natural choice for almost every modern public app that needs strong SEO and performance without gimmicks.",{"type":289,"attrs":326,"content":330},{"id":327,"language":328,"highlighted":329},"code_14hvvncn","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 app\u002Fprodutos\u002Fpage.tsx — roda no servidor e não envia JS ao cliente\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\"> default\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\"> Page\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\"> 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:#24292E;--shiki-dark:#E1E4E8\"> db.produto.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">findMany\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:#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\">      {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>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{p.id} \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">titulo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{p.nome} \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\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[331],{"text":332,"type":78},"\u002F\u002F app\u002Fprodutos\u002Fpage.tsx — roda no servidor e não envia JS ao cliente\nexport default async function Page() {\n  const produtos = await db.produto.findMany();\n\n  return (\n    \u003Cmain>\n      {produtos.map((p) => \u003CCard key={p.id} titulo={p.nome} \u002F>)}\n    \u003C\u002Fmain>\n  );\n}",{"type":72,"attrs":334,"content":336},{"id":335},"p_nc3ldg9p",[337,340],{"text":302,"type":78,"marks":338},[339],{"type":107},{"text":341,"type":78},"SaaS, sites with critical SEO, full-stack products, and projects that really need to scale.",{"type":117},{"type":119,"attrs":344,"content":346},{"id":345,"level":36},"h_nji1goa8",[347],{"text":348,"type":78},"The intuitive path",{"type":119,"attrs":350,"content":352},{"id":351,"level":246},"h_bm4n327x",[353],{"text":354,"type":78},"Vue 3.6 — power without headaches",{"type":72,"attrs":356,"content":358},{"id":357},"p_xqpmr7cr",[359],{"text":360,"type":78},"Vue proves that “productive” and “simple” aren’t opposites. The learning curve is the smoothest among the big ones, the documentation is a reference, and the Composition API delivers organization without ceremony. It’s the second most used framework in the world and dominates markets like Asia, running at scale in giants like Alibaba.",{"type":72,"attrs":362,"content":364},{"id":363},"p_ma91jdkw",[365,367,371],{"text":366,"type":78},"The exciting new thing is ",{"text":368,"type":78,"marks":369},"Vapor Mode",[370],{"type":107},{"text":372,"type":78}," (experimental): it compiles components straight to DOM operations and, in demos, assembled about 100 thousand components in around 100 milliseconds. It’s Vue aiming for the top of the performance leaderboard without giving up the kindness that made it beloved.",{"type":289,"attrs":374,"content":378},{"id":375,"language":376,"highlighted":377},"code_vsyyzrqu","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:#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:#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\"> ref,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> computed\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\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> contador\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">ref(0)\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\"> dobro\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">computed(()\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\">contador.value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> 2)\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\">  <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">click\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\">contador++\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\">{{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> contador\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\"> dobro\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\"><\u002Fbutton\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>\u003C\u002Fcode>\u003C\u002Fpre>",[379],{"text":380,"type":78},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst contador = ref(0)\nconst dobro = computed(() => contador.value * 2)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"contador++\">{{ contador }} → {{ dobro }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>",{"type":72,"attrs":382,"content":384},{"id":383},"p_xeaacg84",[385,388],{"text":302,"type":78,"marks":386},[387],{"type":107},{"text":389,"type":78},"SMBs and startups, teams that prioritize maintenance and readability, fast-evolving projects.",{"type":119,"attrs":391,"content":393},{"id":392,"level":246},"h_ijce5s1s",[394],{"text":395,"type":78},"Nuxt 4 — Vue in full-stack mode",{"type":72,"attrs":397,"content":399},{"id":398},"p_6ifrhih6",[400],{"text":401,"type":78},"Nuxt is to Vue what Next is to React: the full framework on top. SSR and SSG ready, smart conventions, auto-imports, and a development experience that many consider among the best in the market. It takes all the best from Vue and adds platform-level productivity.",{"type":289,"attrs":403,"content":406},{"id":404,"language":376,"highlighted":405},"code_q6qgq3sc","\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>\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:#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\">\u002F\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Sem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> imports:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useFetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> é\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> auto-importado\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> pelo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Nuxt\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\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> data:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> posts\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> = \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useFetch(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">'\u002Fapi\u002Fposts')\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\">  <article\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\">post\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> posts\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\">post.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\"> post.titulo\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\">  <\u002Farticle\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>\u003C\u002Fcode>\u003C\u002Fpre>",[407],{"text":408,"type":78},"\u003Cscript setup>\n\u002F\u002F Sem imports: useFetch é auto-importado pelo Nuxt\nconst { data: posts } = await useFetch('\u002Fapi\u002Fposts')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle v-for=\"post in posts\" :key=\"post.id\">\n    {{ post.titulo }}\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>",{"type":72,"attrs":410,"content":412},{"id":411},"p_sua6vemv",[413,416],{"text":302,"type":78,"marks":414},[415],{"type":107},{"text":417,"type":78},"universal applications, e-commerces, SEO projects, and teams that want speed without building everything from scratch.",{"type":117},{"type":119,"attrs":420,"content":422},{"id":421,"level":36},"h_mliih7xh",[423],{"text":424,"type":78},"The corporate fortress",{"type":119,"attrs":426,"content":428},{"id":427,"level":246},"h_f2hxpf3a",[429],{"text":430,"type":78},"Angular — Google's full platform",{"type":72,"attrs":432,"content":434},{"id":433},"p_i5zj907j",[435],{"text":436,"type":78},"Angular is not a library: it’s a platform with almost everything already decided — routing, forms, HTTP client, dependency injection. For large and distributed teams, this is a blessing: clear rules, predictable architecture, less debate about “how to do it.” It remains the standard choice for serious corporate software in sectors like finance, government, and healthcare.",{"type":72,"attrs":438,"content":440},{"id":439},"p_qenyfqi0",[441,443,447],{"text":442,"type":78},"Recent versions have adopted ",{"text":444,"type":78,"marks":445},"Signals",[446],{"type":107},{"text":448,"type":78}," for fine reactivity and zone-less change detection, with teams reporting smaller bundles and faster initial loading. The price? The learning curve is the steepest on this list — TypeScript, RxJS, dependency injection, and all that. Onboarding usually takes two to three times longer than React’s. For the right team, every invested hour pays off.",{"type":289,"attrs":450,"content":453},{"id":451,"language":63,"highlighted":452},"code_bwx1tbt4","\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:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Component, signal, computed } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@angular\u002Fcore'\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:#6F42C1;--shiki-dark:#B392F0\">Component\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\">  selector: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'app-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\">  standalone: \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\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  template: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">`<button (click)=\"contador.set(contador() + 1)\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">               {{ contador() }} → {{ dobro() }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">             <\u002Fbutton>`\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\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ContadorComponent\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\">  contador\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> signal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\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\">  dobro\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> computed\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:#005CC5;--shiki-dark:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.\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:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 2\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>\u003C\u002Fcode>\u003C\u002Fpre>",[454],{"text":455,"type":78},"import { Component, signal, computed } from '@angular\u002Fcore';\n\n@Component({\n  selector: 'app-contador',\n  standalone: true,\n  template: `\u003Cbutton (click)=\"contador.set(contador() + 1)\">\n               {{ contador() }} → {{ dobro() }}\n             \u003C\u002Fbutton>`,\n})\nexport class ContadorComponent {\n  contador = signal(0);\n  dobro = computed(() => this.contador() * 2);\n}",{"type":72,"attrs":457,"content":459},{"id":458},"p_sgzyy0yn",[460,463],{"text":302,"type":78,"marks":461},[462],{"type":107},{"text":464,"type":78},"enterprise systems, complex applications, large teams, and long-term projects.",{"type":117},{"type":119,"attrs":467,"content":469},{"id":468,"level":36},"h_wce5yqcx",[470],{"text":471,"type":78},"The performance rebels",{"type":119,"attrs":473,"content":475},{"id":474,"level":246},"h_vfjogsbs",[476],{"text":477,"type":78},"Svelte 5 — the framework that disappears at runtime",{"type":72,"attrs":479,"content":481},{"id":480},"p_oesf1pqw",[482],{"text":483,"type":78},"Svelte made a radical choice: instead of shipping a framework to the user’s browser, it compiles everything at build time. The result is tiny bundles and direct screen updates, no Virtual DOM in the way. Unsurprisingly, it tops developer satisfaction surveys year after year, hitting around 88%.",{"type":72,"attrs":485,"content":487},{"id":486},"p_8oiviux1",[488,490,494,496,500,502,506,507,511],{"text":489,"type":78},"Version 5 introduced ",{"text":491,"type":78,"marks":492},"Runes",[493],{"type":107},{"text":495,"type":78}," — ",{"text":497,"type":78,"marks":498},"$state",[499],{"type":279},{"text":501,"type":78},", ",{"text":503,"type":78,"marks":504},"$derived",[505],{"type":279},{"text":501,"type":78},{"text":508,"type":78,"marks":509},"$effect",[510],{"type":279},{"text":512,"type":78}," — an explicit reactivity system. Instead of “guessing” when your data changed, you declare your intent. It seems like more work; in practice, it makes code predictable and easy to scale. And with SvelteKit on top (routing, endpoints, data loading), you get a full-stack complete platform.",{"type":289,"attrs":514,"content":518},{"id":515,"language":516,"highlighted":517},"code_x5aexlsa","svelte","\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\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\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> contador \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:#6F42C1;--shiki-dark:#B392F0\">state\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\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\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> dobro \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:#6F42C1;--shiki-dark:#B392F0\">derived\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(contador \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 2\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:#6F42C1;--shiki-dark:#B392F0\">effect\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\">    console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">`contador agora é ${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">contador\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:#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:#6F42C1;--shiki-dark:#B392F0\">script\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\">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:#24292E;--shiki-dark:#E1E4E8\"> contador\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\">  {contador} → {dobro}\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>\u003C\u002Fcode>\u003C\u002Fpre>",[519],{"text":520,"type":78},"\u003Cscript>\n  let contador = $state(0);\n  let dobro = $derived(contador * 2);\n\n  $effect(() => {\n    console.log(`contador agora é ${contador}`);\n  });\n\u003C\u002Fscript>\n\n\u003Cbutton onclick={() => contador++}>\n  {contador} → {dobro}\n\u003C\u002Fbutton>",{"type":72,"attrs":522,"content":524},{"id":523},"p_dhxyy5b0",[525,528],{"text":302,"type":78,"marks":526},[527],{"type":107},{"text":529,"type":78},"fast and lightweight apps, dashboards, MVPs, and developers who love DX.",{"type":119,"attrs":531,"content":533},{"id":532,"level":246},"h_g62hy2oi",[534],{"text":535,"type":78},"SolidJS — reactivity to the bone",{"type":72,"attrs":537,"content":539},{"id":538},"p_qai6rygh",[540],{"text":541,"type":78},"Solid takes the familiar JSX syntax and sticks a granular reactivity engine on it, with no Virtual DOM, updating exactly the node that changed and nothing else. The result is cutting-edge performance with straightforward code and little abstraction. The ecosystem is still lean compared to the giants — it’s the bet for those who want control and maximum speed and are okay with less crowded terrain.",{"type":289,"attrs":543,"content":546},{"id":544,"language":292,"highlighted":545},"code_3ie03dj5","\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:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'solid-js'\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\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Contador\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\">contador\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setContador\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\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\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\">  \u002F\u002F Só este nó de texto é atualizado — o componente nunca re-roda\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\"> setContador\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\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:#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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      Contagem: {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">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\">    <\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>\u003C\u002Fcode>\u003C\u002Fpre>",[547],{"text":548,"type":78},"import { createSignal } from 'solid-js';\n\nfunction Contador() {\n  const [contador, setContador] = createSignal(0);\n\n  \u002F\u002F Só este nó de texto é atualizado — o componente nunca re-roda\n  return (\n    \u003Cbutton onClick={() => setContador(contador() + 1)}>\n      Contagem: {contador()}\n    \u003C\u002Fbutton>\n  );\n}",{"type":72,"attrs":550,"content":552},{"id":551},"p_jgy12fme",[553,556],{"text":302,"type":78,"marks":554},[555],{"type":107},{"text":557,"type":78},"ultra-high-performance applications, real-time dashboards, and those who want fine control over every update.",{"type":117},{"type":119,"attrs":560,"content":562},{"id":561,"level":36},"h_qtdnuglb",[563],{"text":564,"type":78},"The content specialist",{"type":119,"attrs":566,"content":568},{"id":567,"level":246},"h_safi7fsv",[569],{"text":570,"type":78},"Astro 5 — zero JavaScript by default",{"type":72,"attrs":572,"content":574},{"id":573},"p_6b4rb3uf",[575],{"text":576,"type":78},"Astro asked the question no one was asking: what if the page didn’t send any JavaScript until it really needed to? That’s exactly it — it delivers pure HTML by default and only “hydrates” the interactive islands you mark. For blogs, institutional sites, landing pages, and anything heavy on content, this turns into almost free performance and SEO.",{"type":72,"attrs":578,"content":580},{"id":579},"p_sds3ru74",[581],{"text":582,"type":78},"The bonus: Astro is agnostic. You can plug React, Vue, or Svelte components into the interactive islands, all pulling from the same backend. It’s the Swiss Army knife of content.",{"type":289,"attrs":584,"content":588},{"id":585,"language":586,"highlighted":587},"code_gcw2wv3o","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 Roda no build. A página envia zero JS por padrão.\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.svelte'\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\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'https:\u002F\u002Fapi.site.dev\u002Fposts'\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:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{posts.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">} posts<\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\"><!-- Só esta ilha envia JS e hidrata no navegador -->\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\"> client:visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[589],{"text":590,"type":78},"---\n\u002F\u002F Roda no build. A página envia zero JS por padrão.\nimport Contador from '..\u002Fcomponents\u002FContador.svelte';\nconst posts = await fetch('https:\u002F\u002Fapi.site.dev\u002Fposts').then(r => r.json());\n---\n\n\u003Ch1>{posts.length} posts\u003C\u002Fh1>\n\n\u003C!-- Só esta ilha envia JS e hidrata no navegador -->\n\u003CContador client:visible \u002F>",{"type":72,"attrs":592,"content":594},{"id":593},"p_bh37yc3q",[595,598],{"text":302,"type":78,"marks":596},[597],{"type":107},{"text":599,"type":78},"blogs and institutional sites, landing pages, portfolios, and projects that prioritize SEO.",{"type":117},{"type":119,"attrs":602,"content":604},{"id":603,"level":36},"h_1egm2r70",[605],{"text":606,"type":78},"The five-question filter",{"type":72,"attrs":608,"content":610},{"id":609},"p_fyt49fyx",[611],{"text":612,"type":78},"Forget the scoring table. In real life, the right framework appears when you honestly answer five questions — in this order:",{"type":614,"attrs":615,"content":618},"orderedList",{"id":616,"type":9,"start":617,"tight":141},"ol_y99e0hp9",1,[619,633,647,667,681],{"type":144,"attrs":620,"content":622},{"id":621},"li_xqnj9njc",[623],{"type":72,"attrs":624,"content":626},{"id":625},"p_3ag1loev",[627,631],{"text":628,"type":78,"marks":629},"Your team.",[630],{"type":107},{"text":632,"type":78}," What does your team already master today? Existing knowledge is worth more than any benchmark, because migrating people costs more than migrating code.",{"type":144,"attrs":634,"content":636},{"id":635},"li_z43f1l3d",[637],{"type":72,"attrs":638,"content":640},{"id":639},"p_1poje8u0",[641,645],{"text":642,"type":78,"marks":643},"Your goal.",[644],{"type":107},{"text":646,"type":78}," Is it an MVP to validate quickly, a product that will scale for years, or a content site? The goal eliminates half the list immediately.",{"type":144,"attrs":648,"content":650},{"id":649},"li_ywkbrh4z",[651],{"type":72,"attrs":652,"content":654},{"id":653},"p_991aok1h",[655,659,661,665],{"text":656,"type":78,"marks":657},"Performance.",[658],{"type":107},{"text":660,"type":78}," How critical are speed, bundle size, and user experience ",{"text":662,"type":78,"marks":663},"for this project",[664],{"type":260},{"text":666,"type":78},"? On a heavy dashboard, it’s everything. On an internal CRUD, it’s almost irrelevant.",{"type":144,"attrs":668,"content":670},{"id":669},"li_7kbonn32",[671],{"type":72,"attrs":672,"content":674},{"id":673},"p_pudruoaa",[675,679],{"text":676,"type":78,"marks":677},"Ecosystem.",[678],{"type":107},{"text":680,"type":78}," Will you need lots of libraries, integrations, and an active community? A large ecosystem accelerates — but it never justifies a framework that doesn’t serve the product.",{"type":144,"attrs":682,"content":684},{"id":683},"li_v4utdt61",[685],{"type":72,"attrs":686,"content":688},{"id":687},"p_v322ufq5",[689,693],{"text":690,"type":78,"marks":691},"Scalability.",[692],{"type":107},{"text":694,"type":78}," Think about 2027, not just today. Will this project grow? How long will it take? And who will maintain it a year from now?",{"type":72,"attrs":696,"content":698},{"id":697},"p_486u7k12",[699],{"text":700,"type":78},"An honest shortcut if you’re still in doubt:",{"type":138,"attrs":702,"content":704},{"id":703,"tight":141},"ul_5u5xmvbk",[705,719,733,747,761,775],{"type":144,"attrs":706,"content":708},{"id":707},"li_4jw1qgnv",[709],{"type":72,"attrs":710,"content":712},{"id":711},"p_gciu7g4b",[713,717],{"text":714,"type":78,"marks":715},"Want the safest bet?",[716],{"type":107},{"text":718,"type":78}," React + Next.js.",{"type":144,"attrs":720,"content":722},{"id":721},"li_j9m2lct3",[723],{"type":72,"attrs":724,"content":726},{"id":725},"p_7nicvpyv",[727,731],{"text":728,"type":78,"marks":729},"Want productivity with a smooth learning curve?",[730],{"type":107},{"text":732,"type":78}," Vue + Nuxt.",{"type":144,"attrs":734,"content":736},{"id":735},"li_enb0imjo",[737],{"type":72,"attrs":738,"content":740},{"id":739},"p_4vbss682",[741,745],{"text":742,"type":78,"marks":743},"Big team, long-term corporate project?",[744],{"type":107},{"text":746,"type":78}," Angular.",{"type":144,"attrs":748,"content":750},{"id":749},"li_x4dgzy2q",[751],{"type":72,"attrs":752,"content":754},{"id":753},"p_2u5b2eds",[755,759],{"text":756,"type":78,"marks":757},"Performance above all and happy DX?",[758],{"type":107},{"text":760,"type":78}," SvelteKit.",{"type":144,"attrs":762,"content":764},{"id":763},"li_7remojgs",[765],{"type":72,"attrs":766,"content":768},{"id":767},"p_zqh3jj1s",[769,773],{"text":770,"type":78,"marks":771},"Content site and SEO?",[772],{"type":107},{"text":774,"type":78}," Astro.",{"type":144,"attrs":776,"content":778},{"id":777},"li_hcabw4v0",[779],{"type":72,"attrs":780,"content":782},{"id":781},"p_cilvlfvh",[783,787],{"text":784,"type":78,"marks":785},"Maximum control and extreme reactivity?",[786],{"type":107},{"text":788,"type":78}," SolidJS.",{"type":790,"attrs":791,"content":795},"callout",{"id":792,"type":793,"title":794},"call_ro8rnxoy","tip","Golden rule",[796],{"type":72,"attrs":797,"content":799},{"id":798},"p_uc0klvwr",[800],{"text":801,"type":78},"There is no perfect framework. There is the best framework for your context, in 2026. Choose based on your team and your goal — not on the current trend or the novelty shining on your timeline.",{"type":117},{"type":119,"attrs":804,"content":806},{"id":805,"level":36},"h_c8d3cuju",[807],{"text":808,"type":78},"The decision is yours. Make it and build.",{"type":72,"attrs":810,"content":812},{"id":811},"p_ea8174xl",[813],{"text":814,"type":78},"The truth the industry took a decade to accept: no framework has beaten the others. What changed was the map — it became easier to know where each one shines. React leads in reach and hiring. Next advances where public apps need strong rendering. Angular rules in enterprise. Vue delivers maintenance without weight. Svelte and Solid dominate performance. Astro owns content.",{"type":72,"attrs":816,"content":818},{"id":817},"p_91qbhdjk",[819,821,825],{"text":820,"type":78},"And where is everything heading? Towards ",{"text":822,"type":78,"marks":823},"integrated AI, Server Components, edge runtime, increasingly sharp DX, and performance as a starting point",[824],{"type":107},{"text":826,"type":78}," — not as a late optimization. Choosing with this in mind is already stepping into 2027.",{"type":72,"attrs":828,"content":830},{"id":829},"p_2eatdsfn",[831],{"text":832,"type":78},"So here’s the final reminder, the only advice that applies to any of the eight: don’t freeze searching for the perfect framework, and don’t ditch yours at the first shining novelty. Answer the five questions, choose with conviction, and start building today. The first week is now.",{"type":72,"attrs":834,"content":836},{"id":835},"p_39zqsstt",[837],{"text":838,"type":78,"marks":839},"“Tools evolve. But it’s good developers who build the future.”",[840],{"type":260},{"type":117},{"type":72,"attrs":843,"content":845},{"id":844},"p_q1ifoffw",[846],{"text":847,"type":78,"marks":848},"Article from June 2026. The versions and features cited (React 19 and React Compiler, Next.js 16 with Turbopack, Vue 3.6 with Vapor Mode, Angular with Signals, Svelte 5 with Runes, Astro 5, and SolidJS) reflect the state of frontend frameworks at this date.",[849],{"type":260},"2026-08-24T14:53:53.315534+00:00",[852,875,891,905],{"id":853,"slug":854,"title":855,"excerpt":856,"image":857,"featured":141,"groupId":858,"publishedAt":859,"readingTime":47,"views":48,"author":860,"category":861,"tags":862},"81f24e9a-fc6b-47d0-beb9-d00a6137ed99","framework-vs-sdk-who-calls-whom","Framework vs SDK: Who Calls Whom","Most developers memorize names, but few understand the mechanism. Here is the simple rule to tell a framework from an SDK and level up your debugging.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1787491947099-featured-ikba2e.jpg","0ccb21eb-6459-40ed-8110-227836e9bb74","2026-08-23T13:15:25.439194+00:00",{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[863,866,869,872],{"slug":864,"name":865},"javascript","JavaScript",{"slug":867,"name":868},"python","Python",{"slug":870,"name":871},"runtime","Runtime",{"slug":873,"name":874},"sdk","Sdk",{"id":876,"slug":877,"title":878,"excerpt":879,"image":880,"featured":44,"groupId":881,"publishedAt":882,"readingTime":883,"views":884,"author":885,"category":886,"tags":887},"c2d6b1ca-29bf-401f-8ab9-a1f828504d0b","microfrontends-with-angular-and-nx-what-nobody-tells-you","Microfrontends with Angular and Nx: what nobody tells you","Every tutorial teaches how to set up microfrontends in minutes, but few reveal the architectural chaos that emerges after months of production deploys.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785206853570-featured-zoyhgn.webp","3368e1b2-b6de-4e94-a3d4-294fae8ade13","2026-08-03T01:42:48.969355+00:00",15,5,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[888,889,890],{"slug":54,"name":55},{"slug":864,"name":865},{"slug":63,"name":64},{"id":892,"slug":893,"title":894,"excerpt":895,"image":896,"featured":44,"groupId":897,"publishedAt":898,"readingTime":899,"views":47,"author":900,"category":901,"tags":902},"36440333-311c-4081-92e6-030a04a38fed","astro-island-architecture-performance-and-where-the-framework-truly-fits","Astro: Island Architecture, Performance, and Where the Framework Truly Fits","Astro challenges the modern web status quo by prioritizing static HTML and isolating interactivity into independent, lightweight code islands.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785721161920-featured-a5vzkb.webp","cb62459e-7ace-43d3-a545-661c5695e925","2026-08-03T01:00:45.280114+00:00",38,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[903,904],{"slug":864,"name":865},{"slug":63,"name":64},{"id":906,"slug":907,"title":908,"excerpt":909,"image":910,"featured":44,"groupId":911,"publishedAt":912,"readingTime":913,"views":48,"author":914,"category":915,"tags":916},"633b6488-2a90-4632-86a5-9cff7ed52f08","javascript-event-loop-the-heart-of-non-blocking-concurrency-revisited-in-2025","JavaScript Event Loop: The Heart of Non-Blocking Concurrency — Revisited in 2025","The Event Loop is not just a simple loop, but a sophisticated coordination mechanism between Call Stack, queues, and runtime. Essential for JS concurrency, it enables thousands of asynchronous operations without blocking the UI. This guide explores its structure, differences between Node.js and browsers, common bugs, advanced techniques, and 2025 trends like Structured Concurrency and scheduler.yield().","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1772847201637-featured-oreiro.jpeg","df6ca967-8130-4b2d-bcac-3532a150131e","2026-07-26T18:54:25.359533+00:00",6,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[917,918],{"slug":864,"name":865},{"slug":919,"name":920},"nodejs","Node.js",{"pt":922,"en":40},"o-erro-de-framework-que-ninguem-percebe-no-primeiro-ano"]