[{"data":1,"prerenderedAt":966},["ShallowReactive",2],{"content-/nuxt-client-only-guide":3,"all-pages-for-dir":944,"related-/nuxt-client-only-guide":945,"og-image-/nuxt-client-only-guide":965},{"id":4,"title":5,"body":6,"category":929,"concepts":929,"description":930,"extension":931,"meta":932,"navigation":255,"ogImage":929,"path":933,"project_name":929,"published":934,"publishedAt":935,"seo":936,"source":929,"stem":937,"tags":938,"todo":929,"unpublished":934,"updatedAt":935,"__hash__":943},"pages/2025-12/2025-12-15/nuxt-client-only-guide.md","Nuxt SSRエラー対策: データ分割とClientOnly",{"type":7,"value":8,"toc":907},"minimark",[9,18,23,30,40,44,65,68,72,75,80,128,165,170,181,188,192,199,330,333,383,388,403,406,409,413,568,572,734,737,740,777,780,783,828,831,883,886,903],[10,11,13,14],"h1",{"id":12},"nuxt-ssrエラー対策-データ分割とclientonly","Nuxt SSRエラー対策: データ分割と",[15,16,17],"code",{},"\u003CClientOnly>",[19,20,22],"h2",{"id":21},"背景問題","背景・問題",[24,25,26,29],"p",{},[15,27,28],{},"eps-per-scatter.vue","ページで以下のエラーが発生：",[31,32,37],"pre",{"className":33,"code":35,"language":36},[34],"language-text","Error: worker exited with code 0\n","text",[15,38,35],{"__ignoreMap":39},"",[41,42,43],"h3",{"id":43},"原因",[45,46,47,54,62],"ul",{},[48,49,50,53],"li",{},[15,51,52],{},"actual-consensus-data.ts","（約35MB）という大きな静的データファイルをインポート",[48,55,56,57,61],{},"Nuxtはデフォルトで",[58,59,60],"strong",{},"SSR（Server-Side Rendering）","を行う",[48,63,64],{},"SSR時にサーバー側でこの大きなファイルを処理しようとしてワーカープロセスがメモリ不足でクラッシュする",[19,66,67],{"id":67},"解決策",[41,69,71],{"id":70},"推奨-データ分割根本解決","推奨: データ分割（根本解決）",[24,73,74],{},"ページで必要なデータだけを抽出した軽量ファイルを生成する。",[24,76,77],{},[58,78,79],{},"本プロジェクトでの実装例:",[81,82,83,99],"table",{},[84,85,86],"thead",{},[87,88,89,93,96],"tr",{},[90,91,92],"th",{},"ファイル",[90,94,95],{},"サイズ",[90,97,98],{},"用途",[100,101,102,115],"tbody",{},[87,103,104,109,112],{},[105,106,107],"td",{},[15,108,52],{},[105,110,111],{},"35MB",[105,113,114],{},"全メトリクス（売上、利益、EPS、PER等）",[87,116,117,122,125],{},[105,118,119],{},[15,120,121],{},"scatter-data.ts",[105,123,124],{},"52KB",[105,126,127],{},"散布図用（EPS成長率、PERのみ）",[31,129,133],{"className":130,"code":131,"language":132,"meta":39,"style":39},"language-bash shiki shiki-themes vitesse-light vitesse-light","# 散布図用データの再生成\ncd apps/web\nnode scripts/generate-scatter-data.mjs\n","bash",[15,134,135,144,155],{"__ignoreMap":39},[136,137,140],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sxvE3","# 散布図用データの再生成\n",[136,145,147,151],{"class":138,"line":146},2,[136,148,150],{"class":149},"sz8Xr","cd",[136,152,154],{"class":153},"sdGka"," apps/web\n",[136,156,158,162],{"class":138,"line":157},3,[136,159,161],{"class":160},"senZ8","node",[136,163,164],{"class":153}," scripts/generate-scatter-data.mjs\n",[24,166,167],{},[58,168,169],{},"メリット:",[45,171,172,175,178],{},[48,173,174],{},"SSRが正常動作（ClientOnly不要）",[48,176,177],{},"ページ読み込みが高速",[48,179,180],{},"ブラウザのメモリ使用量削減",[41,182,184,185,187],{"id":183},"代替案-clientonly応急処置","代替案: ",[15,186,17],{},"（応急処置）",[41,189,191],{"id":190},"clientonlyとは","ClientOnlyとは",[24,193,194,195,198],{},"Nuxtが提供するビルトインコンポーネントで",[58,196,197],{},"クライアント側（ブラウザ）でのみレンダリング","するよう指定できる。",[31,200,204],{"className":201,"code":202,"language":203,"meta":39,"style":39},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>タイトル（SSRされる）\u003C/h1>\n\n    \u003CClientOnly>\n      \u003C!-- この中身はブラウザでのみレンダリング -->\n      \u003CHeavyComponent :data=\"largeData\" />\n    \u003C/ClientOnly>\n  \u003C/div>\n\u003C/template>\n","vue",[15,205,206,219,229,250,257,267,273,301,311,321],{"__ignoreMap":39},[136,207,208,212,216],{"class":138,"line":139},[136,209,211],{"class":210},"shFtX","\u003C",[136,213,215],{"class":214},"sHkkW","template",[136,217,218],{"class":210},">\n",[136,220,221,224,227],{"class":138,"line":146},[136,222,223],{"class":210},"  \u003C",[136,225,226],{"class":214},"div",[136,228,218],{"class":210},[136,230,231,234,236,239,243,246,248],{"class":138,"line":157},[136,232,233],{"class":210},"    \u003C",[136,235,10],{"class":214},[136,237,238],{"class":210},">",[136,240,242],{"class":241},"sG7-3","タイトル（SSRされる）",[136,244,245],{"class":210},"\u003C/",[136,247,10],{"class":214},[136,249,218],{"class":210},[136,251,253],{"class":138,"line":252},4,[136,254,256],{"emptyLinePlaceholder":255},true,"\n",[136,258,260,262,265],{"class":138,"line":259},5,[136,261,233],{"class":210},[136,263,264],{"class":214},"ClientOnly",[136,266,218],{"class":210},[136,268,270],{"class":138,"line":269},6,[136,271,272],{"class":142},"      \u003C!-- この中身はブラウザでのみレンダリング -->\n",[136,274,276,279,282,286,289,293,296,298],{"class":138,"line":275},7,[136,277,278],{"class":210},"      \u003C",[136,280,281],{"class":214},"HeavyComponent",[136,283,285],{"class":284},"s4oTP"," :data",[136,287,288],{"class":210},"=",[136,290,292],{"class":291},"sMJiu","\"",[136,294,295],{"class":153},"largeData",[136,297,292],{"class":291},[136,299,300],{"class":210}," />\n",[136,302,304,307,309],{"class":138,"line":303},8,[136,305,306],{"class":210},"    \u003C/",[136,308,264],{"class":214},[136,310,218],{"class":210},[136,312,314,317,319],{"class":138,"line":313},9,[136,315,316],{"class":210},"  \u003C/",[136,318,226],{"class":214},[136,320,218],{"class":210},[136,322,324,326,328],{"class":138,"line":323},10,[136,325,245],{"class":210},[136,327,215],{"class":214},[136,329,218],{"class":210},[41,331,332],{"id":332},"なぜ安定するのか",[81,334,335,348],{},[84,336,337],{},[87,338,339,342,345],{},[90,340,341],{},"処理",[90,343,344],{},"SSR（サーバー側）",[90,346,347],{},"CSR（クライアント側）",[100,349,350,361,372],{},[87,351,352,355,358],{},[105,353,354],{},"実行環境",[105,356,357],{},"Node.jsワーカー",[105,359,360],{},"ブラウザ",[87,362,363,366,369],{},[105,364,365],{},"メモリ制限",[105,367,368],{},"厳しい（ワーカー単位）",[105,370,371],{},"緩い（ユーザーのPC依存）",[87,373,374,377,380],{},[105,375,376],{},"大きなデータ",[105,378,379],{},"クラッシュしやすい",[105,381,382],{},"通常問題なし",[24,384,385,387],{},[15,386,17],{},"を使うと：",[389,390,391,397],"ol",{},[48,392,393,396],{},[58,394,395],{},"SSR時",": 中身をスキップ（空のプレースホルダーのみ）",[48,398,399,402],{},[58,400,401],{},"ブラウザ読み込み後",": JavaScriptが実行されて中身をレンダリング",[24,404,405],{},"これにより、サーバー側で大きなデータを処理する必要がなくなり、クラッシュを回避できる。",[19,407,408],{"id":408},"実装例",[41,410,412],{"id":411},"beforeエラー発生","Before（エラー発生）",[31,414,416],{"className":201,"code":415,"language":203,"meta":39,"style":39},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>散布図\u003C/h1>\n    \u003Cdiv class=\"chart\">\n      \u003Csvg>\u003C!-- 大きなデータを使用 -->\u003C/svg>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { actualConsensusData } from '~/composables/actual-consensus-data' // 35MB\n\u003C/script>\n",[15,417,418,426,434,451,471,489,497,505,513,517,529,559],{"__ignoreMap":39},[136,419,420,422,424],{"class":138,"line":139},[136,421,211],{"class":210},[136,423,215],{"class":214},[136,425,218],{"class":210},[136,427,428,430,432],{"class":138,"line":146},[136,429,223],{"class":210},[136,431,226],{"class":214},[136,433,218],{"class":210},[136,435,436,438,440,442,445,447,449],{"class":138,"line":157},[136,437,233],{"class":210},[136,439,10],{"class":214},[136,441,238],{"class":210},[136,443,444],{"class":241},"散布図",[136,446,245],{"class":210},[136,448,10],{"class":214},[136,450,218],{"class":210},[136,452,453,455,457,460,462,464,467,469],{"class":138,"line":252},[136,454,233],{"class":210},[136,456,226],{"class":214},[136,458,459],{"class":284}," class",[136,461,288],{"class":210},[136,463,292],{"class":291},[136,465,466],{"class":153},"chart",[136,468,292],{"class":291},[136,470,218],{"class":210},[136,472,473,475,478,480,483,485,487],{"class":138,"line":259},[136,474,278],{"class":210},[136,476,477],{"class":214},"svg",[136,479,238],{"class":210},[136,481,482],{"class":142},"\u003C!-- 大きなデータを使用 -->",[136,484,245],{"class":210},[136,486,477],{"class":214},[136,488,218],{"class":210},[136,490,491,493,495],{"class":138,"line":269},[136,492,306],{"class":210},[136,494,226],{"class":214},[136,496,218],{"class":210},[136,498,499,501,503],{"class":138,"line":275},[136,500,316],{"class":210},[136,502,226],{"class":214},[136,504,218],{"class":210},[136,506,507,509,511],{"class":138,"line":303},[136,508,245],{"class":210},[136,510,215],{"class":214},[136,512,218],{"class":210},[136,514,515],{"class":138,"line":313},[136,516,256],{"emptyLinePlaceholder":255},[136,518,519,521,524,527],{"class":138,"line":323},[136,520,211],{"class":210},[136,522,523],{"class":214},"script",[136,525,526],{"class":284}," setup",[136,528,218],{"class":210},[136,530,532,535,538,541,544,547,550,553,556],{"class":138,"line":531},11,[136,533,534],{"class":214},"import",[136,536,537],{"class":210}," {",[136,539,540],{"class":284}," actualConsensusData",[136,542,543],{"class":210}," }",[136,545,546],{"class":214}," from",[136,548,549],{"class":291}," '",[136,551,552],{"class":153},"~/composables/actual-consensus-data",[136,554,555],{"class":291},"'",[136,557,558],{"class":142}," // 35MB\n",[136,560,562,564,566],{"class":138,"line":561},12,[136,563,245],{"class":210},[136,565,523],{"class":214},[136,567,218],{"class":210},[41,569,571],{"id":570},"after修正後","After（修正後）",[31,573,575],{"className":201,"code":574,"language":203,"meta":39,"style":39},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>散布図\u003C/h1>\n\n    \u003CClientOnly>\n      \u003Cdiv class=\"chart\">\n        \u003Csvg>\u003C!-- 大きなデータを使用 -->\u003C/svg>\n      \u003C/div>\n    \u003C/ClientOnly>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { actualConsensusData } from '~/composables/actual-consensus-data' // 35MB\n\u003C/script>\n",[15,576,577,585,593,609,613,621,639,656,665,673,681,689,693,704,725],{"__ignoreMap":39},[136,578,579,581,583],{"class":138,"line":139},[136,580,211],{"class":210},[136,582,215],{"class":214},[136,584,218],{"class":210},[136,586,587,589,591],{"class":138,"line":146},[136,588,223],{"class":210},[136,590,226],{"class":214},[136,592,218],{"class":210},[136,594,595,597,599,601,603,605,607],{"class":138,"line":157},[136,596,233],{"class":210},[136,598,10],{"class":214},[136,600,238],{"class":210},[136,602,444],{"class":241},[136,604,245],{"class":210},[136,606,10],{"class":214},[136,608,218],{"class":210},[136,610,611],{"class":138,"line":252},[136,612,256],{"emptyLinePlaceholder":255},[136,614,615,617,619],{"class":138,"line":259},[136,616,233],{"class":210},[136,618,264],{"class":214},[136,620,218],{"class":210},[136,622,623,625,627,629,631,633,635,637],{"class":138,"line":269},[136,624,278],{"class":210},[136,626,226],{"class":214},[136,628,459],{"class":284},[136,630,288],{"class":210},[136,632,292],{"class":291},[136,634,466],{"class":153},[136,636,292],{"class":291},[136,638,218],{"class":210},[136,640,641,644,646,648,650,652,654],{"class":138,"line":275},[136,642,643],{"class":210},"        \u003C",[136,645,477],{"class":214},[136,647,238],{"class":210},[136,649,482],{"class":142},[136,651,245],{"class":210},[136,653,477],{"class":214},[136,655,218],{"class":210},[136,657,658,661,663],{"class":138,"line":303},[136,659,660],{"class":210},"      \u003C/",[136,662,226],{"class":214},[136,664,218],{"class":210},[136,666,667,669,671],{"class":138,"line":313},[136,668,306],{"class":210},[136,670,264],{"class":214},[136,672,218],{"class":210},[136,674,675,677,679],{"class":138,"line":323},[136,676,316],{"class":210},[136,678,226],{"class":214},[136,680,218],{"class":210},[136,682,683,685,687],{"class":138,"line":531},[136,684,245],{"class":210},[136,686,215],{"class":214},[136,688,218],{"class":210},[136,690,691],{"class":138,"line":561},[136,692,256],{"emptyLinePlaceholder":255},[136,694,696,698,700,702],{"class":138,"line":695},13,[136,697,211],{"class":210},[136,699,523],{"class":214},[136,701,526],{"class":284},[136,703,218],{"class":210},[136,705,707,709,711,713,715,717,719,721,723],{"class":138,"line":706},14,[136,708,534],{"class":214},[136,710,537],{"class":210},[136,712,540],{"class":284},[136,714,543],{"class":210},[136,716,546],{"class":214},[136,718,549],{"class":291},[136,720,552],{"class":153},[136,722,555],{"class":291},[136,724,558],{"class":142},[136,726,728,730,732],{"class":138,"line":727},15,[136,729,245],{"class":210},[136,731,523],{"class":214},[136,733,218],{"class":210},[19,735,736],{"id":736},"注意点",[41,738,739],{"id":739},"デメリット",[389,741,742,752,767],{},[48,743,744,747],{},[58,745,746],{},"初期表示が遅くなる可能性",[45,748,749],{},[48,750,751],{},"SSRされないため、JavaScriptが読み込まれるまで空白になる",[48,753,754,757],{},[58,755,756],{},"SEOへの影響",[45,758,759,764],{},[48,760,761,763],{},[15,762,17],{},"内のコンテンツは検索エンジンにインデックスされにくい",[48,765,766],{},"ただしチャートやインタラクティブなUIは元々SEO対象外なので問題なし",[48,768,769,772],{},[58,770,771],{},"フラッシュ（ちらつき）",[45,773,774],{},[48,775,776],{},"ページ読み込み時に一瞬空白が見える場合がある",[41,778,779],{"id":779},"フォールバック表示",[24,781,782],{},"読み込み中の表示を設定できる：",[31,784,786],{"className":201,"code":785,"language":203,"meta":39,"style":39},"\u003CClientOnly>\n  \u003Ctemplate #fallback>\n    \u003Cdiv class=\"loading\">読み込み中...\u003C/div>\n  \u003C/template>\n\n  \u003CHeavyComponent />\n\u003C/ClientOnly>\n",[15,787,788,796,801,806,811,815,820],{"__ignoreMap":39},[136,789,790,792,794],{"class":138,"line":139},[136,791,211],{"class":210},[136,793,264],{"class":214},[136,795,218],{"class":210},[136,797,798],{"class":138,"line":146},[136,799,800],{"class":241},"  \u003Ctemplate #fallback>\n",[136,802,803],{"class":138,"line":157},[136,804,805],{"class":241},"    \u003Cdiv class=\"loading\">読み込み中...\u003C/div>\n",[136,807,808],{"class":138,"line":252},[136,809,810],{"class":241},"  \u003C/template>\n",[136,812,813],{"class":138,"line":259},[136,814,256],{"emptyLinePlaceholder":255},[136,816,817],{"class":138,"line":269},[136,818,819],{"class":241},"  \u003CHeavyComponent />\n",[136,821,822,824,826],{"class":138,"line":275},[136,823,245],{"class":210},[136,825,264],{"class":214},[136,827,218],{"class":210},[19,829,830],{"id":830},"いつ使うべきか",[81,832,833,843],{},[84,834,835],{},[87,836,837,840],{},[90,838,839],{},"ケース",[90,841,842],{},"ClientOnly使用",[100,844,845,853,861,868,876],{},[87,846,847,850],{},[105,848,849],{},"大きなデータファイルを使用",[105,851,852],{},"✅ 推奨",[87,854,855,858],{},[105,856,857],{},"ブラウザAPIを使用（window, document等）",[105,859,860],{},"✅ 必須",[87,862,863,866],{},[105,864,865],{},"チャート・グラフ",[105,867,852],{},[87,869,870,873],{},[105,871,872],{},"テキストコンテンツ",[105,874,875],{},"❌ SSRした方がよい",[87,877,878,881],{},[105,879,880],{},"SEO重要なコンテンツ",[105,882,875],{},[19,884,885],{"id":885},"参考",[45,887,888,897],{},[48,889,890],{},[891,892,896],"a",{"href":893,"rel":894},"https://nuxt.com/docs/api/components/client-only",[895],"nofollow","Nuxt公式ドキュメント - ClientOnly",[48,898,899,900],{},"本プロジェクトでの使用例: ",[15,901,902],{},"apps/web/app/pages/financial-quiz/eps-per-scatter.vue",[904,905,906],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}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 pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}",{"title":39,"searchDepth":146,"depth":146,"links":908},[909,912,919,923,927,928],{"id":21,"depth":146,"text":22,"children":910},[911],{"id":43,"depth":157,"text":43},{"id":67,"depth":146,"text":67,"children":913},[914,915,917,918],{"id":70,"depth":157,"text":71},{"id":183,"depth":157,"text":916},"代替案: \u003CClientOnly>（応急処置）",{"id":190,"depth":157,"text":191},{"id":332,"depth":157,"text":332},{"id":408,"depth":146,"text":408,"children":920},[921,922],{"id":411,"depth":157,"text":412},{"id":570,"depth":157,"text":571},{"id":736,"depth":146,"text":736,"children":924},[925,926],{"id":739,"depth":157,"text":739},{"id":779,"depth":157,"text":779},{"id":830,"depth":146,"text":830},{"id":885,"depth":146,"text":885},null,"大きなデータファイルを扱うページでSSRエラーを回避する方法","md",{},"/nuxt-client-only-guide",false,"2025-12-15T00:00:00.000Z",{"title":5,"description":930},"2025-12/2025-12-15/nuxt-client-only-guide",[939,940,941,942],"nuxt","ssr","performance","troubleshooting","hfWeomBcnvUyg4YtprCbMkTI0wV2TkukCeLR2zLXKlQ",[],[946,950,954,957,961],{"title":947,"path":948,"publishedAt":949},"ページ遷移が遅い問題：SSR vs SSG の選択ミス","/ssr-vs-ssg-page-transition-slow","2025-12-05T00:00:00.000Z",{"title":951,"path":952,"publishedAt":953},"ブログ一覧→記事ページ遷移が遅い問題の調査","/blog-page-transition-slow-investigation","2025-12-06T00:00:00.000Z",{"title":955,"path":956,"publishedAt":953},"Blog再読み込みで一覧が消える＆記事遷移が遅い調査メモ","/blog-reload-and-slow-transition-investigation",{"title":958,"path":959,"publishedAt":960},"Cloudflare Worker のバンドル削減2日目、外部HTML化で287KiB空けて miller-viewer 島は予測の1割だった","/nuxt-worker-bundle-reduction-miller-viewer","2026-07-30T00:00:00.000Z",{"title":962,"path":963,"publishedAt":964},"Vueページは必ずWorkerバンドルに載る — 静的HTML化と「島マウント」でCloudflare Workersの上限から逃げる","/worker-bundle-reduction-content-islands","2026-07-29T00:00:00.000Z","https://log.eurekapu.com/og/blog/nuxt-client-only-guide.png?v=2025-12-15T00%3A00%3A00.000Z&title=Nuxt%20SSR%E3%82%A8%E3%83%A9%E3%83%BC%E5%AF%BE%E7%AD%96%3A%20%E3%83%87%E3%83%BC%E3%82%BF%E5%88%86%E5%89%B2%E3%81%A8ClientOnly&author=Kei%20Komatsu&sig=cfa2325598a59b26",1785654952980]