静态渲染不工作的问题

问题

我曾经创建了博客页面，并确认它们在开发前能够很好地进行静态渲染。然而，在某个时刻，我发现静态渲染不再发生，而是每次请求都会进行新的渲染。

原因

我在应用顶部的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等。调用这些函数将返回默认值或空数据。