Frontend Weekly 2024-10-25

デフォルトキャッシュの無効化または変更#

破壊的な変更として、fetch や GET ルートハンドラー、クライアントルーターのデフォルトのキャッシュ戦略に次のような変更が加えられた。

• Fetch のキャッシュオプションをno-storeに変更
  • キャッシュを有効化したい場合は、fetch のキャッシュオプションにforce-cacheを指定するなどの対応が必要
  • 余談：今までデフォルトがforce-cacheであるという説明が稀に見られたが、Dynamic functions 以降はno-storeになるなど最適だと思われるオプションが自動的に選択されていたため不正確
• GET ルートハンドラーのデフォルトキャッシュを無効化
  • キャッシュを有効化したい場合は、GET ルートハンドラを定義したファイルでexport dynamic = 'force-static'を指定するなどの対応が必要
• クライアントルーターがデフォルトでページコンポーネントをキャッシュしないように変更
  • ただし、一部の動作は変更されない
    • Partial Rendering を引き続きサポートするため、共有レイアウトデータはサーバーから refetch されない
    • ブラウザがスクロール位置を復元できるように、Back/forward navigation ではキャッシュが有効
  • 余談：このキャッシュへの理解が不十分であり、例えば商品データを追加したのに一覧に反映されないバグが稀に見られた。revalidatePathなどによる明示的な再検証が必要

Async Request APIs#

cookiesやheaders、params、searchParamsなどの API が非同期関数に変更された。

Form Component#

HTML のform要素の拡張であり、送信時に共有レイアウトとクライアントの状態を保持するクライアントナビゲーションなどをサポートしており、パフォーマンスや UX の向上が期待できる。

https://nextjs.org/blog/next-15#form-component

1
import Form from "next/form";
2

3
export default function Page() {
4
  return (
5
    <Form action="/search">
6
      <input name="query" />
7
      <button type="submit">Submit</button>
8
    </Form>
9
  );
10
}

その他#

その他のいくつかの変更点。

• React 19 のサポート
• 利用していない Server Action が公開されないように変更
  • https://nextjs.org/blog/next-15#enhanced-security-for-server-actions
• instrumentation.js が Stable に昇格
  • https://nextjs.org/blog/next-15#instrumentationjs-stable