{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/nexr-link-prefetch",
  "path": "/posts/nexr-link-prefetch",
  "publishedAt": "2024-11-07T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "nextjs",
    "Link",
    "prefetch"
  ],
  "textContent": "新規開発中のWebアプリケーションで、一覧ページのネットワークタブを何気なく確認したら、画面に表示されているリストの各詳細ページがすべてリクエストされていることに気付き、驚いた。\n\n「実装ミスかしら」とぞっと総毛だって実装を見直してみるが、特段へんてこな記述は見つけられない。\n\nただnext/linkをmapで回しているだけである。\n\nだいたいこういうときはnextのお節介が原因のことが多い。\n\nそういうわけで、next/linkを調べてみると案の定prefetchというオプションがあり、デフォルトがtrueとなっていた。\n\n> ビューポート内にある <Link />\n> はすべてプリロードされます (初期状態やスクロール中)。prefetch={false} を渡すことでプリフェッチは無効になります。prefetch が false に設定されている場合でも、ホバー時にはプリフェッチが行われます。静的生成を使用しているページでは、ページ遷移を高速化するためにデータと一緒に JSON ファイルがプリロードされます。プリフェッチは本番環境での> み有効です。\n\nとのこと。\n\n基本的に気にしなくてもいい気がするけど、サーバーに負荷をかけるのでfalseにしても問題ない気がする。\n\n> prefetch が false に設定されている場合でも、ホバー時にはプリフェッチが行われます\n\nとあるのでfalseにしたところで、そこまでページ遷移のユーザー体験を損なわないと思われる。\n\nnextは本当にお節介で裏側で色々なことをしてくれる。しっかり理解しないと思わぬ副作用を生むことがあるのでドキュメントを読むことを心掛けたい。",
  "title": "nextjsのLinkコンポーネントは事前にプリフェッチしているらしい"
}