[{"data":1,"prerenderedAt":714},["ShallowReactive",2],{"content-/blog-page-transition-slow-investigation":3,"all-pages-for-dir":697,"related-/blog-page-transition-slow-investigation":698,"og-image-/blog-page-transition-slow-investigation":713},{"id":4,"title":5,"body":6,"category":682,"concepts":682,"description":683,"extension":684,"meta":685,"navigation":686,"ogImage":682,"path":687,"project_name":682,"published":688,"publishedAt":689,"seo":690,"source":682,"stem":691,"tags":692,"todo":682,"unpublished":688,"updatedAt":689,"__hash__":696},"pages/2025-12/2025-12-06/blog-page-transition-slow-investigation.md","ブログ一覧→記事ページ遷移が遅い問題の調査",{"type":7,"value":8,"toc":662},"minimark",[9,13,17,30,33,36,41,48,52,61,71,75,81,88,91,93,96,100,111,170,173,194,198,201,203,206,210,279,283,391,395,405,453,456,461,465,468,517,519,522,598,610,612,615,638,641,658],[10,11,5],"h1",{"id":12},"ブログ一覧記事ページ遷移が遅い問題の調査",[14,15,16],"h2",{"id":16},"問題",[18,19,20,24,25,29],"p",{},[21,22,23],"code",{},"/blog"," から記事ページへのクリック遷移に",[26,27,28],"strong",{},"約1秒のラグ","がある。静的サイトなのに遅すぎる。",[31,32],"hr",{},[14,34,35],{"id":35},"調査結果",[37,38,40],"h3",{"id":39},"chrome-devtoolsで計測","Chrome DevToolsで計測",[18,42,43,44,47],{},"ページ遷移時のネットワークリクエストを確認したところ、",[26,45,46],{},"65個のリクエスト","が発生していた。",[37,49,51],{"id":50},"問題の原因過剰なプリフェッチ","問題の原因：過剰なプリフェッチ",[53,54,56,57,60],"h4",{"id":55},"_1-大量の_payloadjsonリクエスト10個以上","1. 大量の",[21,58,59],{},"_payload.json","リクエスト（10個以上）",[62,63,68],"pre",{"className":64,"code":66,"language":67},[65],"language-text","/blog/openai-vs-google-considerations/_payload.json\n/blog/nvidia-moat/_payload.json\n/blog/tax-consultation-form/_payload.json\n/blog/tax-accountant-inquiry/_payload.json\n/blog/drawio-viewer-test/_payload.json\n/blog/blood-medicine-world/_payload.json\n/blog/blood-type-basics/_payload.json\n/blog/ai-native-future-scenarios/_payload.json\n/blog/investment-critical-point/_payload.json\n/blog/scenario4-tipping-point/_payload.json\n/blog/data-value-breakthrough-analysis/_payload.json\n/blog/brownian_motion_infographic/_payload.json\n","text",[21,69,66],{"__ignoreMap":70},"",[53,72,74],{"id":73},"_2-各記事のcssjsも個別にロード","2. 各記事のCSS/JSも個別にロード",[62,76,79],{"className":77,"code":78,"language":67},[65],"openai-vs-google-considerations.T4dg9TZR.css\nnvidia-moat.BnXyxzET.css\ntax-consultation-form.CLOIx3Et.css\n... など\n",[21,80,78],{"__ignoreMap":70},[53,82,84,85],{"id":83},"_3-巨大なblog_payloadjson","3. 巨大な",[21,86,87],{},"/blog/_payload.json",[18,89,90],{},"全記事のメタデータ（140件以上）を含む巨大なJSON。",[31,92],{},[14,94,95],{"id":95},"原因の分析",[37,97,99],{"id":98},"nuxtlinkのデフォルト動作","NuxtLinkのデフォルト動作",[18,101,102,103,106,107,110],{},"Nuxtは",[21,104,105],{},"\u003CNuxtLink>","コンポーネントで",[26,108,109],{},"ビューポート内のリンクを自動的にプリフェッチ","する。",[62,112,116],{"className":113,"code":114,"language":115,"meta":70,"style":70},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003C!-- これがデフォルト動作 -->\n\u003CNuxtLink to=\"/blog/article-name\">記事タイトル\u003C/NuxtLink>\n","vue",[21,117,118,127],{"__ignoreMap":70},[119,120,123],"span",{"class":121,"line":122},"line",1,[119,124,126],{"class":125},"sxvE3","\u003C!-- これがデフォルト動作 -->\n",[119,128,130,134,138,142,145,149,153,155,158,162,165,167],{"class":121,"line":129},2,[119,131,133],{"class":132},"shFtX","\u003C",[119,135,137],{"class":136},"sHkkW","NuxtLink",[119,139,141],{"class":140},"s4oTP"," to",[119,143,144],{"class":132},"=",[119,146,148],{"class":147},"sMJiu","\"",[119,150,152],{"class":151},"sdGka","/blog/article-name",[119,154,148],{"class":147},[119,156,157],{"class":132},">",[119,159,161],{"class":160},"sG7-3","記事タイトル",[119,163,164],{"class":132},"\u003C/",[119,166,137],{"class":136},[119,168,169],{"class":132},">\n",[18,171,172],{},"ブログ一覧ページには多数のリンクがあるため：",[174,175,176,180,186,189],"ol",{},[177,178,179],"li",{},"ページ表示時にビューポート内の全リンクを検出",[177,181,182,183,185],{},"各リンク先の",[21,184,59],{},"をプリフェッチ",[177,187,188],{},"各記事のCSS/JSもプリロード",[177,190,191],{},[26,192,193],{},"結果：大量の同時リクエストでネットワークが詰まる",[37,195,197],{"id":196},"なぜ遷移時に遅く感じるか","なぜ「遷移時」に遅く感じるか",[18,199,200],{},"実際は「遷移前のプリフェッチ完了待ち」と「遷移後のハイドレーション」が重なっている。",[31,202],{},[14,204,205],{"id":205},"解決策",[37,207,209],{"id":208},"対策1-nuxtlinkのprefetch無効化推奨","対策1: NuxtLinkのprefetch無効化（推奨）",[62,211,213],{"className":113,"code":212,"language":115,"meta":70,"style":70},"\u003C!-- ブログ一覧のリンクでprefetchを無効化 -->\n\u003CNuxtLink :to=\"article.path\" :prefetch=\"false\">\n  {{ article.title }}\n\u003C/NuxtLink>\n",[21,214,215,220,264,270],{"__ignoreMap":70},[119,216,217],{"class":121,"line":122},[119,218,219],{"class":125},"\u003C!-- ブログ一覧のリンクでprefetchを無効化 -->\n",[119,221,222,224,226,229,233,235,237,240,243,246,248,250,253,255,257,260,262],{"class":121,"line":129},[119,223,133],{"class":132},[119,225,137],{"class":136},[119,227,228],{"class":132}," :",[119,230,232],{"class":231},"senZ8","to",[119,234,144],{"class":132},[119,236,148],{"class":132},[119,238,239],{"class":140},"article",[119,241,242],{"class":132},".",[119,244,245],{"class":140},"path",[119,247,148],{"class":132},[119,249,228],{"class":132},[119,251,252],{"class":231},"prefetch",[119,254,144],{"class":132},[119,256,148],{"class":132},[119,258,259],{"class":136},"false",[119,261,148],{"class":132},[119,263,169],{"class":132},[119,265,267],{"class":121,"line":266},3,[119,268,269],{"class":160},"  {{ article.title }}\n",[119,271,273,275,277],{"class":121,"line":272},4,[119,274,164],{"class":132},[119,276,137],{"class":136},[119,278,169],{"class":132},[37,280,282],{"id":281},"対策2-nuxtconfigtsでグローバル設定","対策2: nuxt.config.tsでグローバル設定",[62,284,288],{"className":285,"code":286,"language":287,"meta":70,"style":70},"language-typescript shiki shiki-themes vitesse-light vitesse-light","export default defineNuxtConfig({\n  experimental: {\n    // 全体的にprefetchを無効化\n    payloadExtraction: false\n  },\n  // または\n  router: {\n    options: {\n      // プリフェッチを完全に無効化\n      linkPrefetchedClass: false\n    }\n  }\n})\n","typescript",[21,289,290,304,313,318,329,335,341,349,357,363,373,379,385],{"__ignoreMap":70},[119,291,292,295,298,301],{"class":121,"line":122},[119,293,294],{"class":136},"export",[119,296,297],{"class":136}," default",[119,299,300],{"class":231}," defineNuxtConfig",[119,302,303],{"class":132},"({\n",[119,305,306,310],{"class":121,"line":129},[119,307,309],{"class":308},"sz8Xr","  experimental",[119,311,312],{"class":132},": {\n",[119,314,315],{"class":121,"line":266},[119,316,317],{"class":125},"    // 全体的にprefetchを無効化\n",[119,319,320,323,326],{"class":121,"line":272},[119,321,322],{"class":308},"    payloadExtraction",[119,324,325],{"class":132},": ",[119,327,328],{"class":136},"false\n",[119,330,332],{"class":121,"line":331},5,[119,333,334],{"class":132},"  },\n",[119,336,338],{"class":121,"line":337},6,[119,339,340],{"class":125},"  // または\n",[119,342,344,347],{"class":121,"line":343},7,[119,345,346],{"class":308},"  router",[119,348,312],{"class":132},[119,350,352,355],{"class":121,"line":351},8,[119,353,354],{"class":308},"    options",[119,356,312],{"class":132},[119,358,360],{"class":121,"line":359},9,[119,361,362],{"class":125},"      // プリフェッチを完全に無効化\n",[119,364,366,369,371],{"class":121,"line":365},10,[119,367,368],{"class":308},"      linkPrefetchedClass",[119,370,325],{"class":132},[119,372,328],{"class":136},[119,374,376],{"class":121,"line":375},11,[119,377,378],{"class":132},"    }\n",[119,380,382],{"class":121,"line":381},12,[119,383,384],{"class":132},"  }\n",[119,386,388],{"class":121,"line":387},13,[119,389,390],{"class":132},"})\n",[37,392,394],{"id":393},"対策3-ページネーションの導入既に導入済み","対策3: ページネーションの導入（既に導入済み）",[18,396,397,400,401,404],{},[26,398,399],{},"注意",": 本プロジェクトでは既に",[21,402,403],{},"ArticleTable","コンポーネントで20件ページネーションを導入済み。",[62,406,408],{"className":113,"code":407,"language":115,"meta":70,"style":70},"\u003C!-- 既存の実装 -->\n\u003CArticleTable :articles=\"allArticles\" :items-per-page=\"20\" />\n",[21,409,410,415],{"__ignoreMap":70},[119,411,412],{"class":121,"line":122},[119,413,414],{"class":125},"\u003C!-- 既存の実装 -->\n",[119,416,417,419,421,423,426,428,430,433,435,437,440,442,444,448,450],{"class":121,"line":129},[119,418,133],{"class":132},[119,420,403],{"class":136},[119,422,228],{"class":132},[119,424,425],{"class":231},"articles",[119,427,144],{"class":132},[119,429,148],{"class":132},[119,431,432],{"class":140},"allArticles",[119,434,148],{"class":132},[119,436,228],{"class":132},[119,438,439],{"class":231},"items-per-page",[119,441,144],{"class":132},[119,443,148],{"class":132},[119,445,447],{"class":446},"sM54T","20",[119,449,148],{"class":132},[119,451,452],{"class":132}," />\n",[18,454,455],{},"しかしページネーション導入だけでは不十分。NuxtLinkのprefetchがデフォルトで有効なため、表示されている20件分のプリフェッチは依然として発生する。",[18,457,458],{},[26,459,460],{},"つまり、ページネーション + prefetch無効化の両方が必要。",[37,462,464],{"id":463},"対策4-インターセクションオブザーバーで遅延プリフェッチ","対策4: インターセクションオブザーバーで遅延プリフェッチ",[18,466,467],{},"ユーザーがスクロールして近づいた時だけプリフェッチ：",[62,469,471],{"className":285,"code":470,"language":287,"meta":70,"style":70},"// nuxt.config.ts\nexport default defineNuxtConfig({\n  experimental: {\n    // ビューポートに入った時だけprefetch\n    viewTransition: true\n  }\n})\n",[21,472,473,478,488,494,499,509,513],{"__ignoreMap":70},[119,474,475],{"class":121,"line":122},[119,476,477],{"class":125},"// nuxt.config.ts\n",[119,479,480,482,484,486],{"class":121,"line":129},[119,481,294],{"class":136},[119,483,297],{"class":136},[119,485,300],{"class":231},[119,487,303],{"class":132},[119,489,490,492],{"class":121,"line":266},[119,491,309],{"class":308},[119,493,312],{"class":132},[119,495,496],{"class":121,"line":272},[119,497,498],{"class":125},"    // ビューポートに入った時だけprefetch\n",[119,500,501,504,506],{"class":121,"line":331},[119,502,503],{"class":308},"    viewTransition",[119,505,325],{"class":132},[119,507,508],{"class":136},"true\n",[119,510,511],{"class":121,"line":337},[119,512,384],{"class":132},[119,514,515],{"class":121,"line":343},[119,516,390],{"class":132},[31,518],{},[14,520,521],{"id":521},"優先度と推奨対応",[523,524,525,544],"table",{},[526,527,528],"thead",{},[529,530,531,535,538,541],"tr",{},[532,533,534],"th",{},"対策",[532,536,537],{},"効果",[532,539,540],{},"実装難易度",[532,542,543],{},"推奨度",[545,546,547,562,575,586],"tbody",{},[529,548,549,553,556,559],{},[550,551,552],"td",{},"prefetch無効化",[550,554,555],{},"高",[550,557,558],{},"低",[550,560,561],{},"⭐⭐⭐",[529,563,564,567,569,572],{},[550,565,566],{},"ページネーション",[550,568,555],{},[550,570,571],{},"中",[550,573,574],{},"⭐⭐",[529,576,577,580,582,584],{},[550,578,579],{},"payloadExtraction無効化",[550,581,571],{},[550,583,558],{},[550,585,574],{},[529,587,588,591,593,595],{},[550,589,590],{},"遅延プリフェッチ",[550,592,571],{},[550,594,555],{},[550,596,597],{},"⭐",[18,599,600],{},[26,601,602,603,605,606,609],{},"最も手軽で効果的なのは、ブログ一覧の",[21,604,105],{},"に",[21,607,608],{},":prefetch=\"false\"","を追加すること。",[31,611],{},[14,613,614],{"id":614},"関連ドキュメント",[616,617,618,626,632],"ul",{},[177,619,620,625],{},[621,622,624],"a",{"href":623},"/nuxt-prefetch-guide","NuxtLinkのprefetchとは何か：理解と最適な設定"," - prefetchの詳細解説",[177,627,628],{},[621,629,631],{"href":630},"/ssr-vs-ssg-page-transition-slow","ページ遷移が遅い問題：SSR vs SSG の選択ミス",[177,633,634],{},[621,635,637],{"href":636},"/nuxt-content-d1-not-used","Nuxt Content v3：D1データベースは本当に必要なのか？",[14,639,640],{"id":640},"参考リンク",[616,642,643,651],{},[177,644,645],{},[621,646,650],{"href":647,"rel":648},"https://nuxt.com/docs/guide/going-further/experimental-features#payloadextraction",[649],"nofollow","Nuxt - Prefetching",[177,652,653],{},[621,654,657],{"href":655,"rel":656},"https://nuxt.com/docs/api/components/nuxt-link#props",[649],"NuxtLink - Props",[659,660,661],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}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 .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}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}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 .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}",{"title":70,"searchDepth":129,"depth":129,"links":663},[664,665,669,673,679,680,681],{"id":16,"depth":129,"text":16},{"id":35,"depth":129,"text":35,"children":666},[667,668],{"id":39,"depth":266,"text":40},{"id":50,"depth":266,"text":51},{"id":95,"depth":129,"text":95,"children":670},[671,672],{"id":98,"depth":266,"text":99},{"id":196,"depth":266,"text":197},{"id":205,"depth":129,"text":205,"children":674},[675,676,677,678],{"id":208,"depth":266,"text":209},{"id":281,"depth":266,"text":282},{"id":393,"depth":266,"text":394},{"id":463,"depth":266,"text":464},{"id":521,"depth":129,"text":521},{"id":614,"depth":129,"text":614},{"id":640,"depth":129,"text":640},null,"ブログ一覧から記事ページへの遷移に1秒以上かかる問題を調査。Nuxtの過剰なプリフェッチが原因と判明","md",{},true,"/blog-page-transition-slow-investigation",false,"2025-12-06T00:00:00.000Z",{"title":5,"description":683},"2025-12/2025-12-06/blog-page-transition-slow-investigation",[693,694,252,695],"nuxt","performance","troubleshooting","zt6XgKbNRabqFvheaKog1mz-rrxnp586D5LXiqU6hWA",[],[699,703,706,707,709],{"title":700,"path":701,"publishedAt":702},"Nuxt SSRエラー対策: データ分割とClientOnly","/nuxt-client-only-guide","2025-12-15T00:00:00.000Z",{"title":704,"path":705,"publishedAt":689},"Blog再読み込みで一覧が消える＆記事遷移が遅い調査メモ","/blog-reload-and-slow-transition-investigation",{"title":624,"path":623,"publishedAt":689},{"title":631,"path":630,"publishedAt":708},"2025-12-05T00:00:00.000Z",{"title":710,"path":711,"publishedAt":712},"Nuxt Content v3 + Cloudflare Pages で直リンク時に404になる問題の解決","/nuxt-content-cloudflare-404-fix","2026-02-11T00:00:00.000Z","https://log.eurekapu.com/og/blog/blog-page-transition-slow-investigation.png?v=2025-12-06T00%3A00%3A00.000Z&title=%E3%83%96%E3%83%AD%E3%82%B0%E4%B8%80%E8%A6%A7%E2%86%92%E8%A8%98%E4%BA%8B%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB%E3%81%8C%E9%81%85%E3%81%84%E5%95%8F%E9%A1%8C%E3%81%AE%E8%AA%BF%E6%9F%BB&author=Kei%20Komatsu&sig=717c12c05319c05f",1785654952994]