静的レンダリングが機能しない問題

問題

ブログページを作成し、それらのページが静的レンダリングが正常に行われていることを確認して開発を進めていました。しかし、ある時点で静的レンダリングが行われなくなり、リクエストごとに新しいレンダリングが行われる現象を発見しました。

原因

アプリの上部にあるProviderでNext.jsが提供するcookies関数を使用していました。

import { cookies } from 'next/headers';

function Proivder {
  const cookie = cookies().....
}

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

cookiesも動的関数の一つであり、Providerでこれを使用したため、その下のすべてのページとコンポーネントもこの動的データに依存するようになります。そのため、以前は静的ページとして正常に動作していたページも動的ページに変換されました。

解決策

ページの上部に以下のコードを追加して解決しました。

export const dynamic = 'force-static';

ただし、このコードを挿入すると以下のような問題があるので注意が必要です：

• 動的データへのアクセス不可：この設定を使用すると、headers、cookiesなどのリクエスト時点のデータにアクセスできなくなります。これらの関数を呼び出すと、デフォルト値または空のデータが返されます。