[{"data":1,"prerenderedAt":129},["ShallowReactive",2],{"term-h\u002Fhydration":3,"related-h\u002Fhydration":105},{"id":4,"title":5,"acronym":6,"body":7,"category":84,"description":85,"difficulty":86,"extension":87,"letter":88,"meta":89,"navigation":90,"path":91,"related":92,"seo":99,"sitemap":100,"stem":103,"subcategory":6,"__hash__":104},"terms\u002Fterms\u002Fh\u002Fhydration.md","Hydration",null,{"type":8,"value":9,"toc":78},"minimark",[10,15,19,23,26,30,67,71,74],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Hydration is when a server-rendered HTML page comes alive in the browser. The server sends a static HTML snapshot — fast to load, good for SEO — then JavaScript downloads and 'hydrates' it by attaching event listeners and making it interactive. Like pouring water on a dehydrated app.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Hydration is the process of attaching JavaScript event handlers and reactive state to server-rendered HTML markup. After SSR sends static HTML to the client, the JS framework runs in the browser, traverses the existing DOM, and makes it interactive without rebuilding the entire tree from scratch.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Nuxt \u002F Next.js do this automatically\n\u002F\u002F Server: renders \u003Cbutton>0\u003C\u002Fbutton> as HTML\n\u002F\u002F Client: hydrates it so the click handler works\n\u002F\u002F If DOM mismatches between server and client → hydration mismatch error\n","javascript","",[38,39,40,49,55,61],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Nuxt \u002F Next.js do this automatically\n",[41,50,52],{"class":43,"line":51},2,[41,53,54],{"class":47},"\u002F\u002F Server: renders \u003Cbutton>0\u003C\u002Fbutton> as HTML\n",[41,56,58],{"class":43,"line":57},3,[41,59,60],{"class":47},"\u002F\u002F Client: hydrates it so the click handler works\n",[41,62,64],{"class":43,"line":63},4,[41,65,66],{"class":47},"\u002F\u002F If DOM mismatches between server and client → hydration mismatch error\n",[11,68,70],{"id":69},"when-youll-hear-this","When You'll Hear This",[16,72,73],{},"\"You're getting a hydration mismatch because the server and client render different content.\" \u002F \"Partial hydration lets you hydrate only the interactive islands.\"",[75,76,77],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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);}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);}",{"title":36,"searchDepth":51,"depth":51,"links":79},[80,81,82,83],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":69,"depth":51,"text":70},"frontend","Hydration is when a server-rendered HTML page comes alive in the browser.","intermediate","md","h",{},true,"\u002Fterms\u002Fh\u002Fhydration",[93,94,95,96,97,98],"SSR","SSG","CSR","Render","Nuxt","Next.js",{"title":5,"description":85},{"changefreq":101,"priority":102},"weekly",0.7,"terms\u002Fh\u002Fhydration","EETUpDCKKySqU_yKRJNevqyJRKo-XpXcXwzWZ1z4dSI",[106,111,114,117,121,125],{"title":95,"path":107,"acronym":108,"category":84,"difficulty":109,"description":110},"\u002Fterms\u002Fc\u002Fcsr","Client-Side Rendering","beginner","CSR means the browser downloads a mostly-empty HTML page plus a big JavaScript bundle, then builds the full page in the browser.",{"title":98,"path":112,"acronym":6,"category":84,"difficulty":86,"description":113},"\u002Fterms\u002Fn\u002Fnext-js","Next.js is React's big sibling that adds superpowers like SSR, SSG, file-based routing, and API routes.",{"title":97,"path":115,"acronym":6,"category":84,"difficulty":86,"description":116},"\u002Fterms\u002Fn\u002Fnuxt","Nuxt is Vue on steroids. It's a meta-framework that adds SSR, SSG, file-based routing, auto-imports, and a full deployment pipeline on top of Vue.",{"title":96,"path":118,"acronym":6,"category":119,"difficulty":109,"description":120},"\u002Fterms\u002Fr\u002Frender","cloud","Render is another developer-friendly hosting platform that does web services, databases, cron jobs, and static sites all in one place.",{"title":94,"path":122,"acronym":123,"category":84,"difficulty":86,"description":124},"\u002Fterms\u002Fs\u002Fssg","Static Site Generation","SSG builds all your pages ahead of time — before anyone visits. You get a folder of plain HTML files that are blazing fast to serve from a CDN.",{"title":93,"path":126,"acronym":127,"category":84,"difficulty":86,"description":128},"\u002Fterms\u002Fs\u002Fssr","Server-Side Rendering","SSR means the server builds your HTML before sending it to the user's browser.",1776518287574]