[{"data":1,"prerenderedAt":284},["ShallowReactive",2],{"term-s\u002Fspa":3,"related-s\u002Fspa":260},{"id":4,"title":5,"acronym":6,"body":7,"category":239,"description":240,"difficulty":241,"extension":242,"letter":243,"meta":244,"navigation":94,"path":245,"related":246,"seo":253,"sitemap":254,"stem":257,"subcategory":258,"__hash__":259},"terms\u002Fterms\u002Fs\u002Fspa.md","SPA","Single Page Application",{"type":8,"value":9,"toc":233},"minimark",[10,15,19,23,26,30,222,226,229],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A SPA is a website that loads ONE HTML page and then never does a full page reload again. Navigation happens entirely in JavaScript — it swaps out content on the fly. Think Gmail or Notion. Super smooth but harder for SEO if you're not careful.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"An SPA loads a single HTML document and dynamically updates content via JavaScript as the user navigates. A client-side router intercepts navigation events and renders the correct component without full page reloads. SPAs provide app-like UX but require client-side rendering considerations for SEO.",[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 Vue Router turns your app into a SPA\nimport { createRouter, createWebHistory } from 'vue-router';\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes: [\n    { path: '\u002F', component: Home },\n    { path: '\u002Fabout', component: About },\n  ]\n});\n","javascript","",[38,39,40,49,89,96,118,136,147,178,205,211],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Vue Router turns your app into a SPA\n",[41,50,52,56,60,64,67,70,73,76,79,83,86],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","import",[41,57,59],{"class":58},"sMK4o"," {",[41,61,63],{"class":62},"sTEyZ"," createRouter",[41,65,66],{"class":58},",",[41,68,69],{"class":62}," createWebHistory",[41,71,72],{"class":58}," }",[41,74,75],{"class":54}," from",[41,77,78],{"class":58}," '",[41,80,82],{"class":81},"sfazB","vue-router",[41,84,85],{"class":58},"'",[41,87,88],{"class":58},";\n",[41,90,92],{"class":43,"line":91},3,[41,93,95],{"emptyLinePlaceholder":94},true,"\n",[41,97,99,103,106,109,112,115],{"class":43,"line":98},4,[41,100,102],{"class":101},"spNyl","const",[41,104,105],{"class":62}," router ",[41,107,108],{"class":58},"=",[41,110,63],{"class":111},"s2Zo4",[41,113,114],{"class":62},"(",[41,116,117],{"class":58},"{\n",[41,119,121,125,128,130,133],{"class":43,"line":120},5,[41,122,124],{"class":123},"swJcz","  history",[41,126,127],{"class":58},":",[41,129,69],{"class":111},[41,131,132],{"class":62},"()",[41,134,135],{"class":58},",\n",[41,137,139,142,144],{"class":43,"line":138},6,[41,140,141],{"class":123},"  routes",[41,143,127],{"class":58},[41,145,146],{"class":62}," [\n",[41,148,150,153,156,158,160,163,165,167,170,172,175],{"class":43,"line":149},7,[41,151,152],{"class":58},"    {",[41,154,155],{"class":123}," path",[41,157,127],{"class":58},[41,159,78],{"class":58},[41,161,162],{"class":81},"\u002F",[41,164,85],{"class":58},[41,166,66],{"class":58},[41,168,169],{"class":123}," component",[41,171,127],{"class":58},[41,173,174],{"class":62}," Home ",[41,176,177],{"class":58},"},\n",[41,179,181,183,185,187,189,192,194,196,198,200,203],{"class":43,"line":180},8,[41,182,152],{"class":58},[41,184,155],{"class":123},[41,186,127],{"class":58},[41,188,78],{"class":58},[41,190,191],{"class":81},"\u002Fabout",[41,193,85],{"class":58},[41,195,66],{"class":58},[41,197,169],{"class":123},[41,199,127],{"class":58},[41,201,202],{"class":62}," About ",[41,204,177],{"class":58},[41,206,208],{"class":43,"line":207},9,[41,209,210],{"class":62},"  ]\n",[41,212,214,217,220],{"class":43,"line":213},10,[41,215,216],{"class":58},"}",[41,218,219],{"class":62},")",[41,221,88],{"class":58},[11,223,225],{"id":224},"when-youll-hear-this","When You'll Hear This",[16,227,228],{},"\"Our dashboard is a SPA — it never does full reloads.\" \u002F \"SPAs have poor SEO without SSR unless you add prerendering.\"",[230,231,232],"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 pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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":234},[235,236,237,238],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":224,"depth":51,"text":225},"frontend","A SPA is a website that loads ONE HTML page and then never does a full page reload again.","beginner","md","s",{},"\u002Fterms\u002Fs\u002Fspa",[247,248,249,250,251,252],"MPA","CSR","SSR","SSG","React","Vue",{"title":5,"description":240},{"changefreq":255,"priority":256},"weekly",0.7,"terms\u002Fs\u002Fspa",null,"MTKzWzG1cYyjZwJNudgukDiBzNsmI5KcVnf3qXeLPIQ",[261,265,269,272,277,281],{"title":248,"path":262,"acronym":263,"category":239,"difficulty":241,"description":264},"\u002Fterms\u002Fc\u002Fcsr","Client-Side Rendering","CSR means the browser downloads a mostly-empty HTML page plus a big JavaScript bundle, then builds the full page in the browser.",{"title":247,"path":266,"acronym":267,"category":239,"difficulty":241,"description":268},"\u002Fterms\u002Fm\u002Fmpa","Multi-Page Application","An MPA is the old-school way — every link click loads a completely new HTML page from the server. Think Wikipedia. Each page is its own thing.",{"title":251,"path":270,"acronym":258,"category":239,"difficulty":241,"description":271},"\u002Fterms\u002Fr\u002Freact","React is a JavaScript library from Meta for building UIs out of components.",{"title":250,"path":273,"acronym":274,"category":239,"difficulty":275,"description":276},"\u002Fterms\u002Fs\u002Fssg","Static Site Generation","intermediate","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":249,"path":278,"acronym":279,"category":239,"difficulty":275,"description":280},"\u002Fterms\u002Fs\u002Fssr","Server-Side Rendering","SSR means the server builds your HTML before sending it to the user's browser.",{"title":252,"path":282,"acronym":258,"category":239,"difficulty":241,"description":283},"\u002Fterms\u002Fv\u002Fvue","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1776518310107]