新規開発中のWebアプリケーションで、一覧ページのネットワークタブを何気なく確認したら、画面に表示されているリストの各詳細ページがすべてリクエストされていることに気付き、驚いた。
「実装ミスかしら」とぞっと総毛だって実装を見直してみるが、特段へんてこな記述は見つけられない。
ただnext/link
をmap
で回しているだけである。
だいたいこういうときはnext
のお節介が原因のことが多い。
そういうわけで、next/link
を調べてみると案の定prefetch
というオプションがあり、デフォルトがtrue
となっていた。
ビューポート内にある はすべてプリロードされます (初期状態やスクロール中)。prefetch={false} を渡すことでプリフェッチは無効になります。prefetch が false に設定されている場合でも、ホバー時にはプリフェッチが行われます。静的生成を使用しているページでは、ページ遷移を高速化するためにデータと一緒に JSON ファイルがプリロードされます。プリフェッチは本番環境での> み有効です。
とのこと。
基本的に気にしなくてもいい気がするけど、サーバーに負荷をかけるのでfalse
にしても問題ない気がする。
prefetch が false に設定されている場合でも、ホバー時にはプリフェッチが行われます
とあるのでfalse
にしたところで、そこまでページ遷移のユーザー体験を損なわないと思われる。
next
は本当にお節介で裏側で色々なことをしてくれる。しっかり理解しないと思わぬ副作用を生むことがあるのでドキュメントを読むことを心掛けたい。