問題点

ブログのページを作って、そのページが静的レンダリングがうまくいくことを確認して開発を進めたことがあります。その時、いつの間にか静的レンダリングがされず、リクエストするたびに新しいレンダリングをする現象を発見しました。

原因

app上部に位置してるProivderでNext.jsで提供してる関数cookiesを使いました。

import { cookies } from 'next/headers'；

function Proivder { { const cookie = cookies(); } from 'next/headers'
  const cookie = cookies().....
}

Next.jsにはデフォルトで静的レンダリングが設定されています。しかし、レンダリング中にキャッシュされていないリクエストや.dynamic functionを使用すると、動的レンダリングに切り替わります。

cookiesもdynamic functionの一つであり、Proivderでこれを使用したため、下位の全てのページとコンポーネントもこの動的データに依存することになります。 そのため、今まで静的ページとしてうまく動作していたページも動的ページに転換されたのです。

解決方法

ページ上部に下記のコードを貼り付けて解決しました。

export const dynamic = 'force-static'；

しかし、このコードを挿入すると下記のような問題があるので注意する必要があります。

• 動的データへのアクセス不可: この設定を使うとheaders, cookiesなどのリクエスト時データにアクセスすることができなくなります。このような関数を呼び出すとデフォルト値や空のデータを返します。