Next.jsではsearchParamsの扱いにご用心

当ブログは主にNext.jsを使って構築している（現時点でのバージョンは14.2.2）。先日、トップページから記事一覧ページに遷移するときに少しもっさりしている感じがした。

こういった感覚というのは大体合っているもので後から問題が見つかるパターンが多い。そこで怪しいと思ったキャッシュ関連を調査していると、そもそも記事一覧ページが動的Route （SSRの一種）として生成されていることが分かった。

以下がビルド時の出力結果。

Route (app)                                               Size     First Load JS
┌ ○ /                                                     338 B           292 kB
...
├ ƒ /posts                                                475 B           662 kB
├ ● /posts/[slug]                                         490 B           662 kB
├   ├ /posts/p1e0lpm
├   ├ /posts/p18vcqd
├   ├ /posts/p16vfnq
├   └ [+11 more paths]
...
└ ○ /sitemap.xml                                          0 B                0 B
+ First Load JS shared by all                             87 kB
  ├ chunks/313-7c44dae77fe97d18.js                        31.4 kB
  ├ chunks/73ebd006-83408596cd117cc0.js                   53.6 kB
  └ other shared chunks (total)                           1.93 kB

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
ƒ  (Dynamic)  server-rendered on demand

/postsを見るとƒとあり、これは動的Routeで生成されていることを表している（前の記号はλだったと思うが、定義が変わったのか？）。現在の記事一覧ページはただのリストを表示させているだけなので動的Routeにするメリットは全くない。

まず、静的Routeを使うと何が嬉しいのか。それはTTFB（Time To First Byte）が短縮され、高パフォーマンスを出せる点である。

静的Routeであればリクエストが発生する前にサーバがレンダリングを行う。 あらかじめ生成されたキャッシュ（Full Route Cache）をレスポンスするため非常に初期表示が早い。

もし、これが動的Routeだとキャッシュを即座にレスポンスせずにサーバでレンダリングしてからレスポンスするため若干ラグが発生する。

では、なぜ静的Routeで生成されるべきページが動的Routeになっていたのか。

初めはどこかのコンポーネントでデータ取得を行っているのではないかと考えた。全てのコンポーネントを辿ってみたが、そういった箇所はなかった。

消去法でgenerateMetadataをコメントアウトしてからビルドすると以下のような出力結果になった。

Route (app)                                               Size     First Load JS
┌ ○ /                                                     338 B           292 kB
...
├ ○ /posts                                                475 B           666 kB
├ ● /posts/[slug]                                         490 B           666 kB
├   ├ /posts/p1e0lpm
├   ├ /posts/p18vcqd
├   ├ /posts/p16vfnq
├   └ [+11 more paths]
...
└ ○ /sitemap.xml                                          0 B                0 B
+ First Load JS shared by all                             87 kB
  ├ chunks/313-7c44dae77fe97d18.js                        31.4 kB
  ├ chunks/73ebd006-83408596cd117cc0.js                   53.6 kB
  └ other shared chunks (total)                           1.93 kB

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
ƒ  (Dynamic)  server-rendered on demand

（/postsが静的Routeとして生成されている）

generateMetadata自体は動的Routeにスイッチさせるような関数ではない。意外な結果なのだが、searchParamsを参照すると強制的に動的Routeになってしまうようである。

page.tsxで渡されるparamsはgenerateStaticParams¹ で指定すればSSGにできるが、searchParamsは指定できない。それゆえ、searchParamsを使うだけでは動的Routeにはならないという思い込みがあったのが今回の反省だ。

元のgenerateMetadataは以下のようになっていた。

1
export const generateMetadata = ({ searchParams }: { searchParams: Record<string, string | string[] | undefined> }) => {
2
  const category = (searchParams.category as string) ?? 'blog';
3
  return {
4
    title: `${category.charAt(0).toUpperCase()}${category.slice(1)}`,
5
    description: 'Blog posts of Keisuke Hayashi.',
6
    alternates: {
7
      canonical: '/posts',
8
    },
9
    openGraph: {
10
      url: '/posts',
11
    },
12
  } satisfies Metadata;
13
};

これはパラメータの値によってページタイトルを動的に変更したくてこの形にした。例えばhttps://kkhys.me/posts?category=techというURLであればタイトルはTechになる。

結果的に対症療法として以下のようにメタデータを設定することにした。

1
export const metadata = {
2
  title: 'Blog',
3
  description: 'Blog posts of Keisuke Hayashi.',
4
  alternates: {
5
    canonical: '/posts',
6
  },
7
  openGraph: {
8
    url: '/posts',
9
  },
10
} satisfies Metadata;

静的Routeかつページタイトルを動的に変更したければhttps://kkhys.me/posts/techのようなURLにするしかない。これだとあまり美しくないからURL設計を見直さなければならない。

Next.jsは便利だが、こういった規約を強制させられる点がイマイチなところだ。今後generateStaticParamsでsearchParamsを設定できるようになると良いけど、その可能性は低いかもしれない。

コンポーネントでsearchParamsの値が必要な場合はpage.tsxのpropsから引っ張ってくるのではなく、useSearchParamsを使ってCSRでレンダリングする方が場合によっては有効。

パラメータの扱い方についてまとめると、searchParamsを使うとページは動的Routeにオプトインされる。 コンテンツはビルド時ではなくリクエスト時にレンダリングされるため、CDNを使ってレスポンスを高速化できない。

searchParamsの代わりにuseSearchParamsを使うと部分的にクライアントコンポーネントになり、ページは静的Routeにオプトインされる。 CDNを使った高速化が可能だが、リクエストごとにクライアント上でハイドレーションが必要になる。

今回の件については Reddit が参考になった。最近はStack Overflowよりもredditの方が有益な情報が落ちていることが多いように感じる。

また、Next.jsリポジトリのこの Issue も参考になる。

generateStaticParams関数を使うと指定されたパスパラメータはビルド時にSSGが実行される。逆に指定しなければリクエスト時にSSGが実行されるのでできるだけ指定した方が良い ↩