🛠️ Developer Tools

Next.jsアプリをクッキー地獄から救う「プリコンピュートパターン」

ブラウザで表示されるURLはそのままに、サーバー側ではクッキーの代わりにURLセグメントでユーザー状態をエンコード。プリコンピュートパターンは、Next.jsサイトをダイナミック化させるクッキー呼び出しの落とし穴を回避し、CDNによる静的配信の恩恵を再び享受させる。

Next.jsプリコンピュートパターンのURLリライトが、静的ページのためにクッキーデータを隠蔽する図

⚡ Key Takeaways

  • ルートレイアウトでの1回の `cookies()` 呼び出しがNext.jsアプリ全体をダイナミック化する――プリコンピュートがそれを防ぐ。 𝕏
  • プロキシリライトを通じてユーザー状態をbase64url URLセグメントにエンコードし、不可視でキャッシュ可能な静的バリアントを実現する。 𝕏
  • 最大10~20コンボにスケールする。それ以上はビルド時間が爆発するため、賢く選ぶ必要がある。 𝕏
  • TTFBを70%以上改善し、実際のアプリではダイナミックカートとハイブリッド化して静的化する。 𝕏
Takeshi Ito
Written by

Takeshi Ito

Japanese open source reporter covering IPA (Information-technology Promotion Agency), OSS in Japanese government, and APAC communities.

Worth sharing?

Get the best Open Source stories of the week in your inbox — no noise, no spam.

Originally reported by Dev.to

Stay in the loop

The week's most important stories from Open Source Beat, delivered once a week.