[{"data":1,"prerenderedAt":225},["ShallowReactive",2],{"sanity-LevEgKvCUg3Ul3GKyhTsfZIfaGswLQ-qsmdjo9-lWe4":3,"sanity-N3DXvRl64Rm9mJosVoz9airtpks-n8tCN2XA27cSnwA":42,"shiki-block-v-0-0-0-0-0-2-0-1":224},{"data":4},{"_createdAt":5,"_id":6,"_rev":7,"_type":6,"_updatedAt":8,"acceptAllLink":9,"acceptNecessaryLink":18,"bannerColorSource":23,"bannerDescription":24,"bannerTitle":25,"categories":26,"declineAllLink":27,"managePreferencesLink":31,"modalColorSource":23,"modalTitle":35,"preferencesIconColorSource":23,"provider":36,"savePreferencesLink":37,"thirdPartyEmbedCode":26,"title":41},"2026-08-29T18:46:18Z","cookieSettings","C1Syut0iGaGX58H2hZvChS","2026-08-29T18:46:23Z",{"_type":10,"style":11,"title":16,"type":17},"link",{"_type":12,"stylePreset":13},"link.style",{"_ref":14,"_type":15},"link-style-primary","reference","Accept all","button",{"_type":10,"style":19,"title":22,"type":17},{"_type":12,"stylePreset":20},{"_ref":21,"_type":15},"link-style-tertiary-outline","Accept necessary","inherit","We use cookies to enhance your browsing experience and analyse our traffic. Please choose your cookie preferences below.","We use cookies",null,{"_type":10,"style":28,"title":30,"type":17},{"_type":12,"stylePreset":29},{"_ref":21,"_type":15},"Decline all",{"_type":10,"style":32,"title":34,"type":17},{"_type":12,"stylePreset":33},{"_ref":21,"_type":15},"Manage preferences","Cookie Preferences","custom",{"_type":10,"style":38,"title":40,"type":17},{"_type":12,"stylePreset":39},{"_ref":14,"_type":15},"Save preferences","Cookie Settings",{"data":43,"sourceMap":-1},[44],{"_createdAt":5,"_id":45,"_rev":7,"_type":46,"_updatedAt":8,"authorProfile":47,"authorRef":58,"body":60,"categories":138,"excerpt":149,"footer":26,"layout":150,"mainImage":154,"navigation":26,"publishedAt":158,"readTime":159,"relatedPosts":160,"routeOptions":214,"seo":26,"showOnWebsite":216,"slug":219,"tags":220,"title":223},"post-hydration-cost","post",{"avatar":48,"bio":53,"name":54,"role":55,"sameAs":56},{"_type":49,"alt":50,"asset":51},"image","Portrait of Jordan Hale",{"_ref":52,"_type":15},"image-3a10e41064c69525bf602e7eb0d241fe88c6c9f7-512x512-jpg","Jordan builds front ends that stay fast after launch, and spends most of that time deleting work the browser was never asked to do.","Jordan Hale","Front-end Engineer",[57],"https:\u002F\u002Fexample.com\u002Fjordan-hale",{"_ref":59,"_type":15},"author-jordan-hale",[61,72,81,98,106,114,122,130],{"_key":62,"_type":63,"children":64,"markDefs":70,"style":71},"b0089","block",[65],{"_key":66,"_type":67,"marks":68,"text":69},"s0090","span",[],"There is a version of every component that fetches its own data. It is easy to write, it is self-contained, and it turns one prerendered page into a network waterfall that starts after the JavaScript bundle has finished parsing.",[],"normal",{"_key":73,"_type":63,"children":74,"markDefs":79,"style":80},"b0091",[75],{"_key":76,"_type":67,"marks":77,"text":78},"s0092",[],"Reactive params are the trapdoor",[],"h2",{"_key":82,"_type":63,"children":83,"markDefs":97,"style":71},"b0096",[84,88,93],{"_key":85,"_type":67,"marks":86,"text":87},"s0093",[],"The rule that keeps a query on the build machine is duller than it sounds: ",{"_key":89,"_type":67,"marks":90,"text":92},"s0094",[91],"strong","the params must be static",{"_key":94,"_type":67,"marks":95,"text":96},"s0095",[],". A reactive param makes the fetch re-run wherever the value changes, which is the browser — so paging, filtering and searching all become live requests without anyone deciding they should be.",[],{"_key":99,"_type":100,"colorSource":23,"markDefs":26,"snippet":101},"code0097","code.block",{"_type":102,"code":103,"filename":104,"language":105},"code","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Fetched once, at build time, into the prerendered payload.\nconst { data } = await useSanityContent\u003CBlogIndexQueryResult>(\n    blogIndexQuery\n)\n\n\u002F\u002F Paging and search are derived from it — no second request.\nconst matching = computed(() =>\n    (data.value?.posts ?? []).filter(matchesFilters)\n)\n\u003C\u002Fscript>","useBlogIndex.ts","vue",{"_key":107,"_type":63,"children":108,"markDefs":113,"style":80},"b0098",[109],{"_key":110,"_type":67,"marks":111,"text":112},"s0099",[],"Dereference upstream, not downstream",[],{"_key":115,"_type":63,"children":116,"markDefs":121,"style":71},"b0100",[117],{"_key":118,"_type":67,"marks":119,"text":120},"s0101",[],"The other half of the same rule: resolve references in the page query rather than in the child component that needs them. A navigation menu, a post's related posts and an author profile are all one arrow in a projection, and all three arrive as props.",[],{"_key":123,"_type":63,"children":124,"markDefs":129,"style":80},"b0102",[125],{"_key":126,"_type":67,"marks":127,"text":128},"s0103",[],"Where the trade genuinely flips",[],{"_key":131,"_type":63,"children":132,"markDefs":137,"style":71},"b0104",[133],{"_key":134,"_type":67,"marks":135,"text":136},"s0105",[],"Filtering a few hundred posts in memory is instant. Filtering fifty thousand is not, and at that point the work belongs back on a server. That is a real decision with a real threshold — which is different from arriving there by accident.",[],[139,145],{"_createdAt":5,"_id":140,"_rev":141,"_type":142,"_updatedAt":5,"slug":143,"title":144},"category-performance","2d20vp0kUSy7uZjqDieLmb","category","performance","Performance",{"_createdAt":5,"_id":146,"_rev":141,"_type":142,"_updatedAt":5,"slug":147,"title":148},"category-developer-experience","developer-experience","Developer Experience","A component that fetches after it mounts has quietly moved work from your build machine onto a stranger's phone — and taken your read token with it.",{"_type":151,"layout":152,"pageDesign":153},"post.layout.options","default","design1",{"_type":49,"alt":155,"asset":156},"Abstract blue gradient suggesting a request waterfall",{"_ref":157,"_type":15},"image-d7eee5de5f25ffeb4e27b87a0c3628c89f2cfc12-1600x900-jpg","2026-03-19T09:00:00.000Z",1,[161,177,199],{"_id":162,"authorProfile":163,"categories":166,"excerpt":169,"mainImage":170,"publishedAt":174,"readTime":159,"slug":175,"title":176},"post-preview-without-token",{"avatar":164,"name":54,"role":55},{"_type":49,"alt":50,"asset":165},{"_ref":52,"_type":15},[167,168],{"slug":147,"title":148},{"slug":143,"title":144},"A read token in the browser bundle is readable by everyone who loads the page. Preview does not need one — the Studio is already logged in.",{"_type":49,"alt":171,"asset":172},"Abstract magenta gradient suggesting a secure channel",{"_ref":173,"_type":15},"image-9d093d7046bd2c85ee744fbbf5abd458e7e85b75-1600x900-jpg","2026-07-28T09:00:00.000Z","draft-preview-without-shipping-a-token","Draft preview without shipping a token to every visitor",{"_id":178,"authorProfile":179,"categories":186,"excerpt":191,"mainImage":192,"publishedAt":196,"readTime":159,"slug":197,"title":198},"post-dark-mode-axis",{"avatar":180,"name":184,"role":185},{"_type":49,"alt":181,"asset":182},"Portrait of Priya Raman",{"_ref":183,"_type":15},"image-cfc7cc28fea565890fb3a5986f7d299c7704a12a-512x512-jpg","Priya Raman","Design Systems Engineer",[187,190],{"slug":188,"title":189},"design-systems","Design Systems",{"slug":143,"title":144},"The server cannot know which colour scheme a visitor prefers. Anything you render that depends on it will hydrate differently than it painted.",{"_type":49,"alt":193,"asset":194},"Abstract indigo gradient split between light and dark",{"_ref":195,"_type":15},"image-96db9eded5277118c54a29e63593a6d24a382797-1600x900-jpg","2026-07-09T09:00:00.000Z","dark-mode-is-a-second-axis","Dark mode is a second axis, not a second stylesheet",{"_id":200,"authorProfile":201,"categories":204,"excerpt":206,"mainImage":207,"publishedAt":211,"readTime":159,"slug":212,"title":213},"post-static-generation",{"avatar":202,"name":54,"role":55},{"_type":49,"alt":50,"asset":203},{"_ref":52,"_type":15},[205],{"slug":143,"title":144},"Prerendering makes a site fast and cheap. It also quietly bakes every assumption your code makes about the request into the HTML you ship.",{"_type":49,"alt":208,"asset":209},"Abstract green gradient suggesting speed and layered caching",{"_ref":210,"_type":15},"image-e6a24a7111f8dd00b29b9257b2a3ed4cd8d1352d-1600x900-jpg","2026-06-02T09:00:00.000Z","static-generation-is-a-caching-strategy","Static generation is a caching strategy, not an architecture",{"_type":215,"includeInSitemap":216,"slug":217},"page.routing.options",true,{"_type":218,"current":219},"slug","every-query-in-the-browser-is-a-decision",[144,221,222],"Static Generation","Nuxt","Every query in the browser is a decision you can move","\u003Cpre class=\"shiki shiki-themes github-light github-dark nuxion-code__pre\" 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:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Fetched once, at build time, into the prerendered payload.\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\">data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useSanityContent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">BlogIndexQueryResult\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\">    blogIndexQuery\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Paging and search are derived from it — no second request.\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\"> matching\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:#24292E;--shiki-dark:#E1E4E8\">    (data.value?.posts \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\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(matchesFilters)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1788029817766]