[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fangular-reborn-forget-everything-you-think-you-know-about-the-framework":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":451,"translations":515,"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":62,"metaTitle":448,"metaDescription":449,"updatedAt":450},"64d61f3c-100d-4141-9a85-98f2ff095f45","angular-reborn-forget-everything-you-think-you-know-about-the-framework","Angular Reborn: forget everything you think you know about the framework","If your last memory of Angular is Zone.js causing unpredictable re-renders and Webpack builds that take forever, you’re thinking of a framework that no longer exists. Modern Angular is something else entirely.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1773849889531-featured-cakvbj.jpeg",false,"88fab263-a423-4ceb-a2e9-538929d82150","2026-03-22T17:01:48.11+00:00",5,82,{"name":50,"avatar":9},"Genildo Souza",{"slug":6,"name":7,"color":8},[53,56,59],{"slug":54,"name":55},"angular","Angular",{"slug":57,"name":58},"typescript","TypeScript",{"slug":60,"name":61},"javascript","JavaScript",{"type":63,"content":64},"doc",[65,76,90,96,106,116,132,141,147,166,174,180,186,194,232,240,246,258,264,288,295,302,310,316,322,339,372,380,398,405,423,436,445],{"type":66,"attrs":67,"content":69},"heading",{"id":68,"level":36},"h_t5i6le4y",[70],{"text":71,"type":72,"marks":73},"The dark ages we left behind","text",[74],{"type":75},"bold",{"type":77,"attrs":78,"content":80},"paragraph",{"id":79},"p_k9rbpsdh",[81,83,88],{"text":82,"type":72},"Anyone who worked with Angular during the golden years of SPAs knows the pain firsthand. It wasn’t just about performance—it was about predictability. You made a tiny change and couldn’t tell what would re-render. You saved the file and waited. And waited some more. The progress bar got stuck at ",{"text":84,"type":72,"marks":85},"92% [chunk optimization]",[86],{"type":87},"code",{"text":89,"type":72}," while your coffee went cold.",{"type":77,"attrs":91,"content":93},{"id":92},"p_oynw6shw",[94],{"text":95,"type":72},"Three problems concentrated most of that suffering:",{"type":77,"attrs":97,"content":99},{"id":98},"p_4n1ad0wd",[100,104],{"text":101,"type":72,"marks":102},"Zone.js and the cascade effect.",[103],{"type":75},{"text":105,"type":72}," Legacy Angular relied on a library called Zone.js to detect changes. It intercepted browser events—clicks, timers, HTTP requests—and forced the entire app to figure out what had changed. It was like throwing a stone into a pond: a small change triggered re-render ripples across the whole component tree. Slow. Heavy. Unpredictable.",{"type":77,"attrs":107,"content":109},{"id":108},"p_l3mp0fcn",[110,114],{"text":111,"type":72,"marks":112},"Destructive SSR.",[113],{"type":75},{"text":115,"type":72}," Server-Side Rendering solved the initial-load problem but created a new one: it rendered HTML on the server, delivered it quickly to the browser—and then destroyed and rebuilt every DOM element on the client to add interactivity. The outcome was an \"uncanny valley\" of hydration: the screen appeared fast yet flickered, lost focus, and left users momentarily frozen.",{"type":77,"attrs":117,"content":119},{"id":118},"p_bevfje6i",[120,124,126,130],{"text":121,"type":72,"marks":122},"Webpack and the endless builds.",[123],{"type":75},{"text":125,"type":72}," Every ",{"text":127,"type":72,"marks":128},"Ctrl+S",[129],{"type":87},{"text":131,"type":72}," could give you enough time to brew a fresh coffee. Webpack and the old CLI were simply too heavy for scalable applications. On large code bases, the dev server took minutes just to start.",{"type":66,"attrs":133,"content":136},{"id":134,"level":135},"h_6fsflcbj",3,[137],{"text":138,"type":72,"marks":139},"The trinity of modern performance",[140],{"type":75},{"type":77,"attrs":142,"content":144},{"id":143},"p_06sxllko",[145],{"text":146,"type":72},"Starting with Angular 17, the framework addressed these three issues architecturally. These weren’t quick patches—they were structural changes.",{"type":148,"attrs":149},"speedCards",{"id":150,"cards":151,"title":164,"caption":165},"speed_pj13zusn",[152,156,160],{"label":153,"value":154,"detail":155},"Angular Signals","①","Surgical reactivity—only what changed is updated",{"label":157,"value":158,"detail":159},"Non-destructive hydration","②","SSR that reuses the server’s DOM—no flash, no reload",{"label":161,"value":162,"detail":163},"Vite + esbuild","③","Build in \u003C1 minute—HMR at the speed of thought","Quick indicators","Metrics and cues that summarize technical impact at a glance.",{"type":66,"attrs":167,"content":169},{"id":168,"level":135},"h_gzfamctj",[170],{"text":171,"type":72,"marks":172},"Signals: the end of global checks",[173],{"type":75},{"type":77,"attrs":175,"content":177},{"id":176},"p_hnh324zc",[178],{"text":179,"type":72},"The best analogy for Angular Signals is an Excel spreadsheet. When Cell A changes, only Cell B—whose formula depends on it—is updated. The rest of the sheet is left untouched.",{"type":77,"attrs":181,"content":183},{"id":182},"p_yigu0b83",[184],{"text":185,"type":72},"That is exactly what Angular Signals do. Instead of Zone.js forcing Angular to check the whole component tree, each Signal knows exactly who depends on it. Updates are surgical—only what needs to change, changes.",{"type":187,"attrs":188,"content":191},"codeBlock",{"id":189,"language":9,"highlighted":190},"code_lkdg6lpu","\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\"> { signal, computed, effect } \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\">  template: \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\">    <p>Price: {{ finalPrice() }}<\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">    <button (click)=\"applyDiscount()\">Apply 10%<\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\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\"> ProductComponent\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\">  price\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\">100\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\">  discount\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\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F computed only recalculates when price or discount change\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">  finalPrice\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">price\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\">1\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\">discount\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:#6F42C1;--shiki-dark:#B392F0\">  applyDiscount\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\">    this\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.discount.\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:#005CC5;--shiki-dark:#79B8FF\">0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F only finalPrice recalculates\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>",[192],{"text":193,"type":72},"import { signal, computed, effect } from '@angular\u002Fcore';\n\n@Component({\n  template: `\n    \u003Cp>Price: {{ finalPrice() }}\u003C\u002Fp>\n    \u003Cbutton (click)=\"applyDiscount()\">Apply 10%\u003C\u002Fbutton>\n  `\n})\nexport class ProductComponent {\n  price = signal(100);\n  discount = signal(0);\n\n  \u002F\u002F computed only recalculates when price or discount change\n  finalPrice = computed(() =>\n    this.price() * (1 - this.discount())\n  );\n\n  applyDiscount() {\n    this.discount.set(0.1); \u002F\u002F only finalPrice recalculates\n  }\n}",{"type":195,"attrs":196,"content":199},"callout",{"id":197,"type":198,"title":9},"call_efqiab0p","info",[200],{"type":77,"attrs":201,"content":203},{"id":202},"p_1gtyc2cj",[204,208,210,214,216,220,221,225,226,230],{"text":205,"type":72,"marks":206},"By Angular 20, all reactivity primitives built on Signals are stable:",[207],{"type":75},{"text":209,"type":72}," ",{"text":211,"type":72,"marks":212},"signal",[213],{"type":87},{"text":215,"type":72},", ",{"text":217,"type":72,"marks":218},"computed",[219],{"type":87},{"text":215,"type":72},{"text":222,"type":72,"marks":223},"effect",[224],{"type":87},{"text":215,"type":72},{"text":227,"type":72,"marks":228},"linkedSignal",[229],{"type":87},{"text":231,"type":72},", signal-based queries, and inputs. Migration from Zone.js to Signals can be done incrementally—the two coexist.",{"type":66,"attrs":233,"content":235},{"id":234,"level":135},"h_o0jsxhku",[236],{"text":237,"type":72,"marks":238},"Non-destructive hydration: SSR that doesn’t flash",[239],{"type":75},{"type":77,"attrs":241,"content":243},{"id":242},"p_aag2uasd",[244],{"text":245,"type":72},"In Angular 17, the framework graduated from developer-preview hydration to stable-by-default non-destructive hydration in every new SSR app.",{"type":77,"attrs":247,"content":249},{"id":248},"p_5fzss7rc",[250,252,256],{"text":251,"type":72},"Legacy SSR tore down the server-generated DOM and rebuilt everything on the client. The new hydration ",{"text":253,"type":72,"marks":254},"reuses the existing DOM",[255],{"type":75},{"text":257,"type":72},"—the HTML received from the server is kept, and Angular simply \"wakes up\" interactivity on top of it, without any recreation.",{"type":77,"attrs":259,"content":261},{"id":260},"p_i4jkcqd9",[262],{"text":263,"type":72},"The result is an ultra-fast First Contentful Paint that stays interactive. No flashes. No lost input focus. No awkward freeze between \"visible\" and \"clickable.\"",{"type":77,"attrs":265,"content":267},{"id":266},"p_m7vlrb95",[268,270,274,276,280,282,286],{"text":269,"type":72},"Angular 19 pushed further with ",{"text":271,"type":72,"marks":272},"incremental hydration",[273],{"type":75},{"text":275,"type":72},"—using the ",{"text":277,"type":72,"marks":278},"@defer",[279],{"type":87},{"text":281,"type":72}," API, components hydrate on demand when the user actually wants to interact. Less JavaScript upfront, better perceived performance. Real-world tests by the Angular team showed ",{"text":283,"type":72,"marks":284},"45% LCP improvements",[285],{"type":75},{"text":287,"type":72},".",{"type":187,"attrs":289,"content":292},{"id":290,"language":9,"highlighted":291},"code_x9uhl31b","\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.config.ts — enable incremental hydration (Angular 19+)\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\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  provideClientHydration,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  withIncrementalHydration\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\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@angular\u002Fplatform-browser'\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\"> appConfig\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\">  providers: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    provideClientHydration\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\">      withIncrementalHydration\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>\u003C\u002Fcode>\u003C\u002Fpre>",[293],{"text":294,"type":72},"\u002F\u002F app.config.ts — enable incremental hydration (Angular 19+)\nimport {\n  provideClientHydration,\n  withIncrementalHydration\n} from '@angular\u002Fplatform-browser';\n\nexport const appConfig = {\n  providers: [\n    provideClientHydration(\n      withIncrementalHydration()\n    )\n  ]\n};",{"type":187,"attrs":296,"content":299},{"id":297,"language":9,"highlighted":298},"code_j0wulphf","\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\"><!--\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> The heavy component only hydrates when it enters viewport \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\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">defer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (on viewport) {\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\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">heavy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">dashboard \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">\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\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">@placeholder {\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\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Loading\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">div\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\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[300],{"text":301,"type":72},"\u003C!-- The heavy component only hydrates when it enters viewport -->\n@defer (on viewport) {\n  \u003Capp-heavy-dashboard \u002F>\n}\n@placeholder {\n  \u003Cdiv>Loading...\u003C\u002Fdiv>\n}",{"type":66,"attrs":303,"content":305},{"id":304,"level":135},"h_9g9r282y",[306],{"text":307,"type":72,"marks":308},"Vite + esbuild: the end of Building... agony",[309],{"type":75},{"type":77,"attrs":311,"content":313},{"id":312},"p_e91rk1po",[314],{"text":315,"type":72},"Angular 17 removed Webpack from the critical path and adopted Vite + esbuild as the default build pipeline for every new project.",{"type":77,"attrs":317,"content":319},{"id":318},"p_epm40yep",[320],{"text":321,"type":72},"esbuild is written in Go and compiles hundreds of thousands of lines of code in under a minute. Vite handles the dev server with Hot Module Replacement that feels as fast as your thoughts.",{"type":77,"attrs":323,"content":325},{"id":324},"p_svjgm7sf",[326,328,332,334,338],{"text":327,"type":72},"The numbers are real: Angular reported ",{"text":329,"type":72,"marks":330},"up to 87% faster build times",[331],{"type":75},{"text":333,"type":72}," for hybrid-rendering projects. The dev server boots instantly. With Webpack out of the critical path, the Angular CLI is now ",{"text":335,"type":72,"marks":336},"50% lighter in dependencies",[337],{"type":75},{"text":287,"type":72},{"type":195,"attrs":340,"content":343},{"id":341,"type":342,"title":9},"call_y4gt0rhr","tip",[344],{"type":77,"attrs":345,"content":347},{"id":346},"p_t61hhat4",[348,352,354,358,360,364,366,370],{"text":349,"type":72,"marks":350},"Legacy project?",[351],{"type":75},{"text":353,"type":72}," Migration is automated. Run ",{"text":355,"type":72,"marks":356},"ng update @angular\u002Fcli",[357],{"type":87},{"text":359,"type":72}," and the schematic does the heavy lifting: it migrates ",{"text":361,"type":72,"marks":362},"angular.json",[363],{"type":87},{"text":365,"type":72},", removes legacy SSR builders, and merges the required ",{"text":367,"type":72,"marks":368},"tsconfig",[369],{"type":87},{"text":371,"type":72}," files.",{"type":66,"attrs":373,"content":375},{"id":374,"level":135},"h_6e3ypgyk",[376],{"text":377,"type":72,"marks":378},"The new control flow: templates that make sense",[379],{"type":75},{"type":77,"attrs":381,"content":383},{"id":382},"p_2u4i0sk6",[384,386,390,392,396],{"text":385,"type":72},"One of the most visible day-to-day changes is the new control-flow syntax, stable since Angular 18. Gone are ",{"text":387,"type":72,"marks":388},"*ngIf",[389],{"type":87},{"text":391,"type":72}," and ",{"text":393,"type":72,"marks":394},"*ngFor",[395],{"type":87},{"text":397,"type":72}," with their verbose structural syntax. Now it’s straightforward:",{"type":187,"attrs":399,"content":402},{"id":400,"language":9,"highlighted":401},"code_copmyx0z","\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\"><!--\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Before \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-->\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\">div \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">ngIf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"user; else noUser\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">>\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\">span \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">ngFor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"let item of items; trackBy: trackById\"\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\">    {{ item.name }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">>\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\">ng\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">template #noUser\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">Login required\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">ng\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"><!--\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> After \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\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (user) {\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\">for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (item \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> items; track item.id) {\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\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{{ item.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">span\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\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">} @else {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  Login required\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[403],{"text":404,"type":72},"\u003C!-- Before -->\n\u003Cdiv *ngIf=\"user; else noUser\">\n  \u003Cspan *ngFor=\"let item of items; trackBy: trackById\">\n    {{ item.name }}\n  \u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cng-template #noUser>Login required\u003C\u002Fng-template>\n\n\u003C!-- After -->\n@if (user) {\n  @for (item of items; track item.id) {\n    \u003Cspan>{{ item.name }}\u003C\u002Fspan>\n  }\n} @else {\n  Login required\n}",{"type":77,"attrs":406,"content":408},{"id":407},"p_sko6d7et",[409,411,415,417,421],{"text":410,"type":72},"More readable, better rendering performance, and the ",{"text":412,"type":72,"marks":413},"track",[414],{"type":87},{"text":416,"type":72}," in ",{"text":418,"type":72,"marks":419},"@for",[420],{"type":87},{"text":422,"type":72}," is now mandatory—enforcing best practices that were once optional and often forgotten.",{"type":424,"attrs":425},"summaryBox",{"id":426,"items":427,"title":435},"sum_mhx60lx3",[428,429,430,431,432,433,434],"Angular Signals—surgical reactivity. No Zone.js, no global checks. Stable in Angular 20.","Non-destructive hydration—SSR that doesn’t flash. Server DOM is reused, not destroyed.","Incremental hydration—@defer hydrates on demand. 45% LCP gain in real apps.","Vite + esbuild—builds under 1 minute. Instant HMR. CLI 50% lighter.","New control flow—@if, @for, @switch natively. Stable in Angular 18.","Standalone components—NgModules optional. Default in all new projects.","The framework evolved. The question now is: did your code evolve too?","What really changed in modern Angular",{"type":437,"attrs":438},"promoBox",{"id":439,"title":440,"ctaHref":441,"eyebrow":442,"ctaLabel":443,"description":444},"promo_02grgrf4","Want to dig deeper?","\u002Ftags\u002Fangular","Featured","Explore","If you want to explore this topic from another angle, I’ve curated related reads with practical examples.",{"type":77,"attrs":446},{"id":447},"p_fqv5y8dz","Angular 17+: The End of the Dark Ages and the New Performance Era","Discover how Angular 17+ has moved past Zone.js, destructive SSR, and Webpack. Meet Signals, non-destructive hydration, and Vite\u002Fesbuild for faster, predictable apps.","2026-08-24T14:53:53.315534+00:00",[452,471,486,500],{"id":453,"slug":454,"title":455,"excerpt":456,"image":457,"featured":44,"groupId":458,"publishedAt":459,"readingTime":460,"views":461,"author":462,"category":463,"tags":464},"841890b2-1a8c-43d4-b434-b94714705605","debugging-css-the-forgotten-margin-and-frontend-lessons","Debugging CSS: The Forgotten Margin and Frontend Lessons","A forgotten CSS property turned a minor layout glitch into a two-week ordeal. Learn how to avoid emotional debugging and fix complex UI issues faster.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1767745741814-featured-i6p1gc.jpeg","bcaf503a-15c1-4d28-8795-6ae3c2a3e06f","2026-08-02T16:09:35.153874+00:00",8,0,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[465,468],{"slug":466,"name":467},"css","CSS",{"slug":469,"name":470},"performance","Performance",{"id":472,"slug":473,"title":474,"excerpt":475,"image":476,"featured":44,"groupId":477,"publishedAt":478,"readingTime":23,"views":461,"author":479,"category":480,"tags":481},"d5167910-cc5b-4fae-a2e8-d09adcf354b2","stop-using-usememo-wrong-a-practical-guide-to-react-performance","Stop Using useMemo Wrong: A Practical Guide to React Performance","Master React useMemo with this guide. Learn when to memoize, how to fix dependency array bugs, and why over-optimization can hurt your performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1769657096789-featured-r2q2sb.jpeg","a1c571c1-aa37-404d-ac67-f265c8a9985b","2026-07-08T23:34:34.563653+00:00",{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[482,483],{"slug":60,"name":61},{"slug":484,"name":485},"react","React",{"id":487,"slug":488,"title":489,"excerpt":490,"image":491,"featured":44,"groupId":492,"publishedAt":493,"readingTime":494,"views":461,"author":495,"category":496,"tags":497},"f1b5af43-20da-4150-a7c7-ef17675d1fee","css-animations-how-to-build-performant-professional-interfaces-without-messy-code","CSS Animations: How to Build Performant, Professional Interfaces Without Messy Code","Bring your web interfaces to life. Learn when to use CSS transitions versus keyframes and how to optimize your animations for peak performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1770952624247-featured-in9pir.jpeg","de5a7726-1227-4080-b572-9d91a37b207b","2026-07-04T03:00:53.174696+00:00",17,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[498,499],{"slug":466,"name":467},{"slug":469,"name":470},{"id":501,"slug":502,"title":503,"excerpt":504,"image":505,"featured":44,"groupId":506,"publishedAt":507,"readingTime":508,"views":461,"author":509,"category":510,"tags":511},"86e804a8-71f4-4985-a013-d6c033e28967","angular-micro-frontends-how-to-scale-large-applications-and-eliminate-monolithic-build-times-with-module-federation","Angular Micro-frontends: How to Scale Large Applications and Eliminate Monolithic Build Times with Module Federation","Discover how to break down large Angular monoliths using Module Federation to enable independent deployments and seamless team scaling.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1774499855857-featured-x9ugz1.jpg","a029aa9b-573b-4e5b-921b-eaecea6e989f","2026-06-21T06:41:59.230237+00:00",10,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[512,513,514],{"slug":54,"name":55},{"slug":60,"name":61},{"slug":57,"name":58},{"en":40,"pt":516,"es":517},"angular-reborn-esqueca-o-que-voce-sabe-sobre-o-framework","angular-renacido-olvida-lo-que-sabias-sobre-el-framework"]