[{"data":1,"prerenderedAt":280},["ShallowReactive",2],{"article-ssg-vs-ssr":3},{"id":4,"title":5,"body":6,"date":271,"description":272,"extension":273,"meta":274,"navigation":275,"path":276,"seo":277,"stem":278,"__hash__":279},"articles\u002Farticles\u002Fssg-vs-ssr.md","SSG と SSR の違い",{"type":7,"value":8,"toc":265},"minimark",[9,13,95,99,108,218,222,229,232,261],[10,11,12],"h2",{"id":12},"レンダリング方式の比較",[14,15,16,35],"table",{},[17,18,19],"thead",{},[20,21,22,26,29,32],"tr",{},[23,24,25],"th",{},"方式",[23,27,28],{},"タイミング",[23,30,31],{},"SEO",[23,33,34],{},"向いているページ",[36,37,38,53,67,81],"tbody",{},[20,39,40,44,47,50],{},[41,42,43],"td",{},"CSR",[41,45,46],{},"ブラウザで描画",[41,48,49],{},"弱い",[41,51,52],{},"管理画面・ダッシュボード",[20,54,55,58,61,64],{},[41,56,57],{},"SSR",[41,59,60],{},"リクエスト時にサーバーで描画",[41,62,63],{},"強い",[41,65,66],{},"動的コンテンツ・ユーザー固有ページ",[20,68,69,72,75,78],{},[41,70,71],{},"SSG",[41,73,74],{},"ビルド時に静的 HTML を生成",[41,76,77],{},"最強・高速",[41,79,80],{},"ブログ・LP・ドキュメント",[20,82,83,86,89,92],{},[41,84,85],{},"ISR",[41,87,88],{},"ビルド後も一定時間ごとに再生成",[41,90,91],{},"強い・更新可能",[41,93,94],{},"頻繁に更新される記事",[10,96,98],{"id":97},"nuxt-での設定方法","Nuxt での設定方法",[100,101,102,103,107],"p",{},"Nuxt はデフォルト SSR です。",[104,105,106],"code",{},"routeRules"," を使うとページごとに切り替えられます。",[109,110,115],"pre",{"className":111,"code":112,"language":113,"meta":114,"style":114},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  routeRules: {\n    '\u002Farticles\u002F**': { prerender: true }, \u002F\u002F SSG\n    '\u002Fdashboard\u002F**': { ssr: false },     \u002F\u002F CSR（SPA）\n    '\u002Fnews\u002F**': { isr: 3600 },           \u002F\u002F ISR（1時間ごとに再生成）\n  }\n})\n","ts","",[104,116,117,126,144,150,170,188,206,212],{"__ignoreMap":114},[118,119,122],"span",{"class":120,"line":121},"line",1,[118,123,125],{"class":124},"sJ8bj","\u002F\u002F nuxt.config.ts\n",[118,127,129,133,136,140],{"class":120,"line":128},2,[118,130,132],{"class":131},"szBVR","export",[118,134,135],{"class":131}," default",[118,137,139],{"class":138},"sScJk"," defineNuxtConfig",[118,141,143],{"class":142},"sVt8B","({\n",[118,145,147],{"class":120,"line":146},3,[118,148,149],{"class":142},"  routeRules: {\n",[118,151,153,157,160,164,167],{"class":120,"line":152},4,[118,154,156],{"class":155},"sZZnC","    '\u002Farticles\u002F**'",[118,158,159],{"class":142},": { prerender: ",[118,161,163],{"class":162},"sj4cs","true",[118,165,166],{"class":142}," }, ",[118,168,169],{"class":124},"\u002F\u002F SSG\n",[118,171,173,176,179,182,185],{"class":120,"line":172},5,[118,174,175],{"class":155},"    '\u002Fdashboard\u002F**'",[118,177,178],{"class":142},": { ssr: ",[118,180,181],{"class":162},"false",[118,183,184],{"class":142}," },     ",[118,186,187],{"class":124},"\u002F\u002F CSR（SPA）\n",[118,189,191,194,197,200,203],{"class":120,"line":190},6,[118,192,193],{"class":155},"    '\u002Fnews\u002F**'",[118,195,196],{"class":142},": { isr: ",[118,198,199],{"class":162},"3600",[118,201,202],{"class":142}," },           ",[118,204,205],{"class":124},"\u002F\u002F ISR（1時間ごとに再生成）\n",[118,207,209],{"class":120,"line":208},7,[118,210,211],{"class":142},"  }\n",[118,213,215],{"class":120,"line":214},8,[118,216,217],{"class":142},"})\n",[10,219,221],{"id":220},"ssr-を確認する方法","SSR を確認する方法",[100,223,224,225,228],{},"ブラウザの「ページのソースを表示」を開いて、記事本文が HTML に含まれていれば SSR（または SSG）が正しく動作しています。CSR の場合、JS 実行前は空の ",[104,226,227],{},"\u003Cdiv>"," しか存在しません。",[10,230,231],{"id":231},"まとめ",[233,234,235,243,249,255],"ul",{},[236,237,238,242],"li",{},[239,240,241],"strong",{},"ブログ・ドキュメント"," → SSG（速くて SEO 最強）",[236,244,245,248],{},[239,246,247],{},"EC サイト商品ページ"," → ISR（キャッシュしつつ鮮度を保つ）",[236,250,251,254],{},[239,252,253],{},"ニュースフィード"," → SSR（常に最新を返す）",[236,256,257,260],{},[239,258,259],{},"管理画面"," → CSR（SEO 不要・インタラクション重視）",[262,263,264],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":114,"searchDepth":128,"depth":128,"links":266},[267,268,269,270],{"id":12,"depth":128,"text":12},{"id":97,"depth":128,"text":98},{"id":220,"depth":128,"text":221},{"id":231,"depth":128,"text":231},"2026-04-28T23:15:00+09:00","それぞれのレンダリング方式の特徴と、Nuxt での使い分けを整理します。","md",{},true,"\u002Farticles\u002Fssg-vs-ssr",{"title":5,"description":272},"articles\u002Fssg-vs-ssr","WVl3BADGFnzPWQ9OtqJGW4wRrU_dsOUa_CO3fUO27GM",1777568743376]