[{"data":1,"prerenderedAt":830},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration":821},{"id":4,"title":5,"body":6,"description":800,"extension":801,"meta":802,"navigation":814,"path":815,"seo":816,"stem":819,"__hash__":820},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration\u002Findex.md","Resumability vs Hydration",{"type":7,"value":8,"toc":783},"minimark",[9,14,34,37,150,155,184,188,194,200,206,212,321,325,330,446,449,453,456,460,463,467,470,606,610,617,621,624,628,654,658,664,670,676,682,686,689,693,705,714,723,732,741,745,768,773,776,779],[10,11,13],"h1",{"id":12},"resumability-vs-hydration-what-changes-for-startup-and-inp","Resumability vs Hydration: What Changes for Startup and INP",[15,16,17,18,23,24,28,29,33],"p",{},"This comparison extends ",[19,20,22],"a",{"href":21},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002F","Hydration & Partial Rehydration Strategies"," within ",[19,25,27],{"href":26},"\u002Fjavascript-bundle-optimization-code-splitting\u002F","JavaScript Bundle Optimization & Code Splitting",". Hydration — in all its variants — rebuilds application state on the client by re-executing component code: the server renders HTML, then the client downloads the same components, runs them again, and attaches event listeners. Partial hydration and islands reduce ",[30,31,32],"em",{},"how much"," is re-executed; they do not remove the re-execution itself.",[15,35,36],{},"Resumability, popularised by Qwik, takes a different approach. The server serialises the application state and the location of event handlers into the HTML. The client starts with a tiny global loader that listens for events; when the user interacts, it fetches only the code for that specific handler and resumes from the serialised state, without re-running components. Startup JavaScript becomes nearly constant regardless of page complexity; the cost moves to the first interaction with each feature.",[15,38,39],{},[40,41,47,48,47,55,47,59,47,62,47,71,47,77,47,86,47,92,47,97,47,102,47,105,47,108,47,111,47,114,47,117,47,120,47,125,47,129,47,131,47,135,47,137,47,140,47,142,47,145,47,147,47],"svg",{"viewBox":42,"width":43,"role":44,"ariaLabel":45,"style":46},"0 0 760 228","100%","img","Comparison of what the browser does at startup under hydration and under resumability.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[49,50],"rect",{"className":51,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],"svg-canvas","0","#ffffff",[56,57,58],"title",{},"Hydration vs resumability at startup",[60,61,45],"desc",{},[49,63],{"x":64,"y":64,"width":65,"height":66,"rx":67,"fill":68,"stroke":69,"style":70},"1","758","226","10","none","currentColor","stroke-opacity:0.18",[72,73,58],"text",{"x":74,"y":75,"fill":69,"style":76},"28.0","34.0","font-size:16px;font-weight:700",[49,78],{"x":74,"y":79,"width":80,"height":81,"rx":82,"fill":83,"stroke":84,"style":85},"56.0","340.0","150.0","6","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[72,87,91],{"x":88,"y":89,"fill":69,"style":90},"42.0","82.0","font-size:14px;font-weight:700","Hydration",[72,93,96],{"x":88,"y":94,"fill":69,"style":95},"108.0","font-size:12.5px;font-weight:700","•",[72,98,101],{"x":79,"y":94,"fill":69,"style":99,"textAnchor":100},"font-size:12.5px","start","Download component code for the page",[72,103,96],{"x":88,"y":104,"fill":69,"style":95},"132.0",[72,106,107],{"x":79,"y":104,"fill":69,"style":99,"textAnchor":100},"Re-execute components to rebuild state",[72,109,96],{"x":88,"y":110,"fill":69,"style":95},"156.0",[72,112,113],{"x":79,"y":110,"fill":69,"style":99,"textAnchor":100},"Attach listeners after hydration",[72,115,96],{"x":88,"y":116,"fill":69,"style":95},"180.0",[72,118,119],{"x":79,"y":116,"fill":69,"style":99,"textAnchor":100},"Startup cost grows with page complexity",[49,121],{"x":122,"y":79,"width":80,"height":81,"rx":82,"fill":123,"stroke":123,"style":124},"392.0","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[72,126,128],{"x":127,"y":89,"fill":69,"style":90},"406.0","Resumability",[72,130,96],{"x":127,"y":94,"fill":69,"style":95},[72,132,134],{"x":133,"y":94,"fill":69,"style":99,"textAnchor":100},"420.0","Download a ~1KB event loader",[72,136,96],{"x":127,"y":104,"fill":69,"style":95},[72,138,139],{"x":133,"y":104,"fill":69,"style":99,"textAnchor":100},"State read from serialised HTML",[72,141,96],{"x":127,"y":110,"fill":69,"style":95},[72,143,144],{"x":133,"y":110,"fill":69,"style":99,"textAnchor":100},"Handler code fetched on first use",[72,146,96],{"x":127,"y":116,"fill":69,"style":95},[72,148,149],{"x":133,"y":116,"fill":69,"style":99,"textAnchor":100},"Startup cost roughly constant",[151,152,154],"h2",{"id":153},"rapid-diagnosis-is-hydration-your-bottleneck","Rapid Diagnosis: Is Hydration Your Bottleneck?",[156,157,158,166,172,178],"ul",{},[159,160,161,165],"li",{},[162,163,164],"strong",{},"Measure hydration time"," on your heaviest templates in a throttled trace. If it dominates TBT and early-interaction input delay, the architecture matters.",[159,167,168,171],{},[162,169,170],{},"Count interactive regions."," Pages with many interactive widgets spread across the page benefit most from lazy, per-handler loading.",[159,173,174,177],{},[162,175,176],{},"Check what partial hydration already gives you."," If islands or server components already cut startup JS to a small fraction, resumability's marginal gain shrinks.",[159,179,180,183],{},[162,181,182],{},"Check interaction patterns."," If users interact immediately and with many features, per-interaction code loading may make first interactions slower.",[151,185,187],{"id":186},"root-cause-analysis-where-each-model-pays","Root Cause Analysis: Where Each Model Pays",[15,189,190,193],{},[162,191,192],{},"1. Hydration pays at startup."," Code for every hydrated component downloads and executes before it is interactive, competing with LCP resources and creating long tasks.",[15,195,196,199],{},[162,197,198],{},"2. Resumability pays at first interaction."," The first click on a feature may need a network request for its handler chunk before it runs, adding latency to that interaction unless code is prefetched.",[15,201,202,205],{},[162,203,204],{},"3. Serialisation has a size cost."," Resumable HTML carries serialised state; large state inflates HTML, which affects TTFB transfer and parse.",[15,207,208,211],{},[162,209,210],{},"4. Ecosystem and mental model."," Resumable frameworks constrain how closures and state are written so they can be serialised; existing React or Vue component libraries do not resume.",[15,213,214],{},[40,215,47,218,47,221,47,224,47,226,47,229,47,231,47,234,47,241,47,248,47,252,47,256,47,260,47,264,47,267,47,270,47,273,47,276,47,283,47,289,47,293,47,297,47,301,47,305,47,309,47,313,47,317,47],{"viewBox":216,"width":43,"role":44,"ariaLabel":217,"style":46},"0 0 760 222","Two timelines comparing startup work and the first interaction under hydration and resumability, showing where each pays its cost.",[49,219],{"className":220,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],[56,222,223],{},"Startup and first click under each model (mid-tier phone)",[60,225,217],{},[49,227],{"x":64,"y":64,"width":65,"height":228,"rx":67,"fill":68,"stroke":69,"style":70},"220",[72,230,223],{"x":74,"y":75,"fill":69,"style":76},[72,232,91],{"x":74,"y":233,"fill":69,"style":95},"74.0",[49,235],{"x":236,"y":79,"width":237,"height":238,"rx":239,"fill":69,"stroke":69,"style":240},"115.9","253.0","26.0","3","fill-opacity:0.06;stroke-opacity:0.4",[72,242,247],{"x":243,"y":244,"fill":69,"style":245,"textAnchor":246},"242.4","73.5","font-size:11.5px","middle","HTML paint",[49,249],{"x":250,"y":79,"width":251,"height":238,"rx":239,"fill":83,"stroke":84,"style":85},"370.4","202.1",[72,253,255],{"x":254,"y":244,"fill":69,"style":245,"textAnchor":246},"471.5","hydrate page",[49,257],{"x":258,"y":79,"width":259,"height":238,"rx":239,"fill":123,"stroke":123,"style":124},"624.9","13.8",[72,261,263],{"x":74,"y":262,"fill":69,"style":95},"112.0","Resumable",[49,265],{"x":236,"y":266,"width":237,"height":238,"rx":239,"fill":69,"stroke":69,"style":240},"94.0",[72,268,247],{"x":243,"y":269,"fill":69,"style":245,"textAnchor":246},"111.5",[49,271],{"x":250,"y":266,"width":272,"height":238,"rx":239,"fill":123,"stroke":123,"style":124},"6.1",[49,274],{"x":258,"y":266,"width":275,"height":238,"rx":239,"fill":83,"stroke":84,"style":85},"62.1",[277,278],"line",{"x1":279,"y1":280,"x2":281,"y2":280,"stroke":69,"style":282},"115.1","134.0","726.0","stroke-opacity:0.4",[72,284,288],{"x":285,"y":286,"fill":287,"style":245,"textAnchor":246},"127.1","151.0","#51617a","0ms",[72,290,292],{"x":291,"y":286,"fill":287,"style":245,"textAnchor":246},"217.0","400ms",[72,294,296],{"x":295,"y":286,"fill":287,"style":245,"textAnchor":246},"318.8","800ms",[72,298,300],{"x":299,"y":286,"fill":287,"style":245,"textAnchor":246},"420.6","1200ms",[72,302,304],{"x":303,"y":286,"fill":287,"style":245,"textAnchor":246},"522.4","1600ms",[72,306,308],{"x":307,"y":286,"fill":287,"style":245,"textAnchor":246},"624.2","2000ms",[72,310,312],{"x":311,"y":286,"fill":287,"style":245,"textAnchor":246},"710.0","2400ms",[72,314,316],{"x":74,"y":315,"fill":287,"style":99},"182.0","Hydration front-loads ~800ms of work; resumability defers a smaller cost to the first click, which prefetching can",[72,318,320],{"x":74,"y":319,"fill":287,"style":99},"200.0","largely hide.",[151,322,324],{"id":323},"step-by-step-evaluating-the-trade-off","Step-by-Step: Evaluating the Trade-Off",[326,327,329],"h3",{"id":328},"_1-quantify-hydration-cost-on-your-real-pages","1. Quantify hydration cost on your real pages",[331,332,337],"pre",{"className":333,"code":334,"language":335,"meta":336,"style":336},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Mark hydration boundaries to measure them in the field.\nperformance.mark('hydrate:start');\nhydrateRoot(document.getElementById('root'), \u003CApp \u002F>);\nrequestAnimationFrame(() => performance.measure('hydrate', 'hydrate:start'));\n\u002F\u002F trade-off: this measures from the hydrate call to the next frame, which\n\u002F\u002F includes rendering; for React 18 concurrent hydration the work may be split\n\u002F\u002F across several tasks — measure the total, not the first task.\n","javascript","",[338,339,340,348,369,396,428,434,440],"code",{"__ignoreMap":336},[341,342,344],"span",{"class":277,"line":343},1,[341,345,347],{"class":346},"sjfSM","\u002F\u002F Mark hydration boundaries to measure them in the field.\n",[341,349,351,355,359,362,366],{"class":277,"line":350},2,[341,352,354],{"class":353},"saISM","performance.",[341,356,358],{"class":357},"smZ65","mark",[341,360,361],{"class":353},"(",[341,363,365],{"class":364},"sZ8jY","'hydrate:start'",[341,367,368],{"class":353},");\n",[341,370,372,375,378,381,383,386,389,393],{"class":277,"line":371},3,[341,373,374],{"class":357},"hydrateRoot",[341,376,377],{"class":353},"(document.",[341,379,380],{"class":357},"getElementById",[341,382,361],{"class":353},[341,384,385],{"class":364},"'root'",[341,387,388],{"class":353},"), \u003C",[341,390,392],{"class":391},"sZBmE","App",[341,394,395],{"class":353}," \u002F>);\n",[341,397,399,402,405,409,412,415,417,420,423,425],{"class":277,"line":398},4,[341,400,401],{"class":357},"requestAnimationFrame",[341,403,404],{"class":353},"(() ",[341,406,408],{"class":407},"sPARh","=>",[341,410,411],{"class":353}," performance.",[341,413,414],{"class":357},"measure",[341,416,361],{"class":353},[341,418,419],{"class":364},"'hydrate'",[341,421,422],{"class":353},", ",[341,424,365],{"class":364},[341,426,427],{"class":353},"));\n",[341,429,431],{"class":277,"line":430},5,[341,432,433],{"class":346},"\u002F\u002F trade-off: this measures from the hydrate call to the next frame, which\n",[341,435,437],{"class":277,"line":436},6,[341,438,439],{"class":346},"\u002F\u002F includes rendering; for React 18 concurrent hydration the work may be split\n",[341,441,443],{"class":277,"line":442},7,[341,444,445],{"class":346},"\u002F\u002F across several tasks — measure the total, not the first task.\n",[15,447,448],{},"Expected outcome: a p75 hydration time per template on real devices.",[326,450,452],{"id":451},"_2-model-first-interaction-latency-under-resumability","2. Model first-interaction latency under resumability",[15,454,455],{},"Estimate handler chunk sizes and the network time to fetch them on your users' connections. Resumable frameworks prefetch likely handlers in the background (Qwik uses speculative module prefetching via a service worker), so the realistic first-interaction cost is often small — but measure it with a prototype rather than assuming.",[326,457,459],{"id":458},"_3-compare-against-partial-hydration-alternatives","3. Compare against partial hydration alternatives",[15,461,462],{},"Before rewriting, try the hydration-reducing options in your current stack: server components, islands, lazy hydration of below-the-fold components, and selective hydration. Many of the gains are available without a framework change.",[326,464,466],{"id":465},"_4-prototype-the-heaviest-template","4. Prototype the heaviest template",[15,468,469],{},"Build one representative page in the resumable framework and compare startup JS, TBT, LCP and first-interaction INP under the same throttling.",[15,471,472],{},[40,473,47,475,47,478,47,481,47,483,47,485,47,487,47,491,47,496,47,500,47,504,47,507,47,511,47,514,47,517,47,521,47,525,47,527,47,531,47,533,47,536,47,538,47,540,47,543,47,547,47,549,47,552,47,554,47,557,47,559,47,562,47,565,47,569,47,571,47,574,47,576,47,579,47,581,47,584,47,587,47,591,47,593,47,596,47,598,47,601,47,603,47],{"viewBox":42,"width":43,"role":44,"ariaLabel":474,"style":46},"Suitability of full hydration, islands or server components, and resumability for different kinds of pages.",[49,476],{"className":477,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],[56,479,480],{},"Choosing an approach by page type",[60,482,474],{},[49,484],{"x":64,"y":64,"width":65,"height":66,"rx":67,"fill":68,"stroke":69,"style":70},[72,486,480],{"x":74,"y":75,"fill":69,"style":76},[49,488],{"x":74,"y":79,"width":489,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},"172.4","30.0",[72,492,495],{"x":493,"y":494,"fill":69,"style":95,"textAnchor":100},"38.0","75.5","Page type",[49,497],{"x":498,"y":79,"width":499,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},"200.4","177.2",[72,501,503],{"x":502,"y":494,"fill":69,"style":95,"textAnchor":246},"289.0","Full hydration",[49,505],{"x":506,"y":79,"width":499,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},"377.6",[72,508,510],{"x":509,"y":494,"fill":69,"style":95,"textAnchor":246},"466.2","Islands \u002F RSC",[49,512],{"x":513,"y":79,"width":499,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},"554.8",[72,515,128],{"x":516,"y":494,"fill":69,"style":95,"textAnchor":246},"643.4",[49,518],{"x":74,"y":519,"width":489,"height":490,"rx":53,"fill":68,"stroke":69,"style":520},"86.0","stroke-opacity:0.35",[72,522,524],{"x":493,"y":523,"fill":69,"style":95,"textAnchor":100},"105.5","Content site",[49,526],{"x":498,"y":519,"width":499,"height":490,"rx":53,"fill":83,"stroke":84,"style":85},[72,528,530],{"x":502,"y":523,"fill":69,"style":529,"textAnchor":246},"font-size:12px","wasteful",[49,532],{"x":506,"y":519,"width":499,"height":490,"rx":53,"fill":123,"stroke":123,"style":124},[72,534,535],{"x":509,"y":523,"fill":69,"style":529,"textAnchor":246},"excellent",[49,537],{"x":513,"y":519,"width":499,"height":490,"rx":53,"fill":123,"stroke":123,"style":124},[72,539,535],{"x":516,"y":523,"fill":69,"style":529,"textAnchor":246},[49,541],{"x":74,"y":542,"width":489,"height":490,"rx":53,"fill":68,"stroke":69,"style":520},"116.0",[72,544,546],{"x":493,"y":545,"fill":69,"style":95,"textAnchor":100},"135.5","E-commerce product page",[49,548],{"x":498,"y":542,"width":499,"height":490,"rx":53,"fill":83,"stroke":84,"style":85},[72,550,551],{"x":502,"y":545,"fill":69,"style":529,"textAnchor":246},"heavy",[49,553],{"x":506,"y":542,"width":499,"height":490,"rx":53,"fill":123,"stroke":123,"style":124},[72,555,556],{"x":509,"y":545,"fill":69,"style":529,"textAnchor":246},"good",[49,558],{"x":513,"y":542,"width":499,"height":490,"rx":53,"fill":123,"stroke":123,"style":124},[72,560,561],{"x":516,"y":545,"fill":69,"style":529,"textAnchor":246},"very good",[49,563],{"x":74,"y":564,"width":489,"height":490,"rx":53,"fill":68,"stroke":69,"style":520},"146.0",[72,566,568],{"x":493,"y":567,"fill":69,"style":95,"textAnchor":100},"165.5","App-like dashboard",[49,570],{"x":498,"y":564,"width":499,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},[72,572,573],{"x":502,"y":567,"fill":69,"style":529,"textAnchor":246},"acceptable",[49,575],{"x":506,"y":564,"width":499,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},[72,577,578],{"x":509,"y":567,"fill":69,"style":529,"textAnchor":246},"limited gains",[49,580],{"x":513,"y":564,"width":499,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},[72,582,583],{"x":516,"y":567,"fill":69,"style":529,"textAnchor":246},"gains smaller",[49,585],{"x":74,"y":586,"width":489,"height":490,"rx":53,"fill":68,"stroke":69,"style":520},"176.0",[72,588,590],{"x":493,"y":589,"fill":69,"style":95,"textAnchor":100},"195.5","Existing large React app",[49,592],{"x":498,"y":586,"width":499,"height":490,"rx":53,"fill":69,"stroke":69,"style":240},[72,594,595],{"x":502,"y":589,"fill":69,"style":529,"textAnchor":246},"status quo",[49,597],{"x":506,"y":586,"width":499,"height":490,"rx":53,"fill":123,"stroke":123,"style":124},[72,599,600],{"x":509,"y":589,"fill":69,"style":529,"textAnchor":246},"incremental path",[49,602],{"x":513,"y":586,"width":499,"height":490,"rx":53,"fill":83,"stroke":84,"style":85},[72,604,605],{"x":516,"y":589,"fill":69,"style":529,"textAnchor":246},"rewrite needed",[151,607,609],{"id":608},"verification","Verification",[15,611,612,613,616],{},"For a prototype, compare under identical conditions: startup JavaScript bytes, main-thread time before interactive, LCP, and INP for the first interaction with each major feature. Resumability should show dramatically lower startup cost; check that first-interaction INP stays under ",[338,614,615],{},"200ms"," with prefetching enabled. For production, monitor INP split by \"first interaction with feature\" versus later interactions.",[151,618,620],{"id":619},"worked-example-a-product-listing-prototype","Worked Example: A Product Listing Prototype",[15,622,623],{},"A team prototyped their product listing page — filters, sort, quick-view modals, add-to-cart — in a resumable framework. Compared with the existing React page (already code-split), startup JavaScript fell from 180KB to 6KB, lab TBT from 520ms to 40ms, and LCP improved by 300ms. First-click latency on filters, measured cold on a throttled profile, rose from 60ms to 210ms without prefetching and fell to 80ms with speculative prefetching enabled. The team concluded resumability was compelling for new storefront pages, but adopted React Server Components for the existing app, which captured roughly 60% of the startup gain without a rewrite.",[151,625,627],{"id":626},"common-mistakes","Common Mistakes",[156,629,630,636,642,648],{},[159,631,632,635],{},[162,633,634],{},"Comparing against an unoptimised hydration baseline."," Measure against your best partial-hydration option, not the worst.",[159,637,638,641],{},[162,639,640],{},"Ignoring first-interaction latency."," Startup wins can be offset by slow first clicks without prefetching.",[159,643,644,647],{},[162,645,646],{},"Assuming component libraries carry over."," Most existing UI libraries need replacement or wrappers.",[159,649,650,653],{},[162,651,652],{},"Serialising huge state."," Resumable HTML can bloat if large datasets are serialised; keep state minimal.",[151,655,657],{"id":656},"edge-cases","Edge Cases",[15,659,660,663],{},[162,661,662],{},"Offline and flaky networks."," Lazy handler fetching depends on the network at interaction time; service-worker prefetching mitigates this, but truly offline use needs precaching.",[15,665,666,669],{},[162,667,668],{},"Third-party scripts."," Resumability does nothing for third-party JavaScript, which may still dominate startup.",[15,671,672,675],{},[162,673,674],{},"Mixed architectures."," Some frameworks embed React islands within resumable pages; those islands hydrate normally, reintroducing hydration cost for that part.",[15,677,678,681],{},[162,679,680],{},"Analytics on early interactions."," Event delegation through a global loader changes how and when events reach your code; verify analytics still capture interactions correctly.",[151,683,685],{"id":684},"what-resumability-teaches-even-if-you-never-adopt-it","What Resumability Teaches Even If You Never Adopt It",[15,687,688],{},"The resumable model is a useful lens for any framework. It asks, for each piece of client JavaScript: does this need to run before the user does anything? Most code on a typical page does not — it exists to respond to interactions that may never happen. Applying that question in a hydration-based app leads to the same practical moves: render static content on the server without client code, load interaction handlers lazily (on hover or first use), keep startup code to what the first paint and the first likely interaction require, and serialise state into the HTML instead of refetching it on the client. Teams that internalise this tend to ship much smaller startup bundles whatever framework they use.",[151,690,692],{"id":691},"faq","FAQ",[694,695,698,702],"details",{"className":696},[697],"faq-item",[699,700,701],"summary",{},"Is resumability the same as islands?",[15,703,704],{},"No. Islands hydrate selected components fully when triggered; resumability never re-executes components to rebuild state, and loads code at the granularity of individual handlers. Both reduce startup cost; resumability goes further at the price of a different programming model.",[694,706,708,711],{"className":707},[697],[699,709,710],{},"Does resumability help INP after startup?",[15,712,713],{},"Mostly through reduced startup contention. Once code is loaded, interaction cost depends on what your handlers do, as in any framework. The main INP benefit is fewer long tasks during load, when many first interactions happen.",[694,715,717,720],{"className":716},[697],[699,718,719],{},"What about React's server components plus selective hydration?",[15,721,722],{},"They capture much of the benefit for React apps: less client code and prioritised hydration of interacted regions. They still hydrate client components, so startup cost scales with the interactive surface rather than staying constant.",[694,724,726,729],{"className":725},[697],[699,727,728],{},"Is the serialised state a security concern?",[15,730,731],{},"It is visible in the HTML like any server-rendered data. Do not serialise secrets or data the user should not see; the same rule applies to any framework's hydration payload.",[694,733,735,738],{"className":734},[697],[699,736,737],{},"How mature is the ecosystem?",[15,739,740],{},"Resumable frameworks are production-ready for many use cases but have smaller ecosystems than React or Vue. Factor in hiring, component availability and long-term maintenance, not just performance numbers.",[151,742,744],{"id":743},"related","Related",[156,746,747,754,761],{},[159,748,749,753],{},[19,750,752],{"href":751},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fislands-vs-full-hydration-for-content-sites\u002F","Islands vs full hydration for content sites"," — the most common alternative.",[159,755,756,760],{},[19,757,759],{"href":758},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Freact-server-components-and-client-bundle-size\u002F","React Server Components and client bundle size"," — the incremental path for React apps.",[159,762,763,767],{},[19,764,766],{"href":765},"\u002Fcore-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002Ffixing-slow-first-interactions-during-hydration\u002F","Fixing slow first interactions during hydration"," — the problem both approaches target.",[769,770,772],"script",{"type":771},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Resumability vs Hydration: What Changes for Startup and INP\",\n  \"description\": \"How resumability differs from hydration, what it does to startup JavaScript and first-interaction latency, and when it is worth the architectural shift.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Quantify hydration cost on your real pages\",\n      \"text\": \"Expected outcome: a p75 hydration time per template on real devices.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Model first-interaction latency under resumability\",\n      \"text\": \"Estimate handler chunk sizes and the network time to fetch them on your users' connections.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Compare against partial hydration alternatives\",\n      \"text\": \"Before rewriting, try the hydration-reducing options in your current stack: server components, islands, lazy hydration of below-the-fold components, and selective hydration.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Prototype the heaviest template\",\n      \"text\": \"Build one representative page in the resumable framework and compare startup JS, TBT, LCP and first-interaction INP under the same throttling.\"\n    }\n  ]\n}\n",[769,774,775],{"type":771},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"Resumability vs Hydration: What Changes for Startup and INP\",\n  \"description\": \"How resumability differs from hydration, what it does to startup JavaScript and first-interaction latency, and when it is worth the architectural shift.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration\u002F\"\n  }\n}\n",[769,777,778],{"type":771},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"JavaScript Bundle Optimization & Code Splitting\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Hydration & Partial Rehydration Strategies\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Resumability vs Hydration\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration\u002F\"\n    }\n  ]\n}\n",[780,781,782],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}",{"title":336,"searchDepth":350,"depth":350,"links":784},[785,786,787,793,794,795,796,797,798,799],{"id":153,"depth":350,"text":154},{"id":186,"depth":350,"text":187},{"id":323,"depth":350,"text":324,"children":788},[789,790,791,792],{"id":328,"depth":371,"text":329},{"id":451,"depth":371,"text":452},{"id":458,"depth":371,"text":459},{"id":465,"depth":371,"text":466},{"id":608,"depth":350,"text":609},{"id":619,"depth":350,"text":620},{"id":626,"depth":350,"text":627},{"id":656,"depth":350,"text":657},{"id":684,"depth":350,"text":685},{"id":691,"depth":350,"text":692},{"id":743,"depth":350,"text":744},"How resumability differs from hydration, what it does to startup JavaScript and first-interaction latency, and when it is worth the architectural shift.","md",{"slug":803,"type":804,"breadcrumb":805,"datePublished":813,"dateModified":813},"resumability-vs-hydration","article",[806,809,810,811],{"name":807,"url":808},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":812},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration\u002F","2026-10-06",true,"\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration",{"title":817,"description":818},"Resumability vs Hydration: Startup Cost Compared","Resumable frameworks like Qwik skip hydration by serialising state into HTML and loading handlers on demand. Compare startup cost, interaction latency, trade-offs.","javascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fresumability-vs-hydration\u002Findex","0XGutNsL0e7ToiN2EDlrVe2eUn-DT7qZlmYiGTZlAlw",[822,826],{"title":823,"path":824,"stem":825},"React Server Components and Client Bundle Size","\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Freact-server-components-and-client-bundle-size","javascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Freact-server-components-and-client-bundle-size\u002Findex",{"title":827,"path":828,"stem":829},"Selective Hydration with React Suspense","\u002Fjavascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fselective-hydration-with-react-suspense","javascript-bundle-optimization-code-splitting\u002Fhydration-and-partial-rehydration-strategies\u002Fselective-hydration-with-react-suspense\u002Findex",1791308076168]