我真的不明白 Next.js 有什么计划让 cookie 在客户端组件中工作。他们当前的 cookie 文档与客户端组件不兼容。
在服务器组件中,您可以使用服务器操作读取和设置 cookie 。对于客户端组件,您可以使用服务器操作来设置它们,但看起来您无法读取cookie。尝试使用 cookies().get(name) 会导致以下错误。
您正在导入需要 next/headers 的组件。这只适用于服务器
...
组件,但其父组件之一标记为“使用客户端”,因此它是客户端组件。其中之一被标记为带有“use client”的客户端条目:
./app/client/hooks/useCookies.ts
./app/client/components/SomeComponent.tsx
当然,您可以添加服务器操作来读取 cookie,我已经测试过它是否有效。但我拒绝用异步函数处理和不必要的服务器行程来搞乱我的代码,只是为了读取浏览器中已经存在的 cookie。
我还尝试过库,例如cookies-next,它似乎是 Next.js cookies 的最佳维护和工作库。它的作用是在客户端的客户端组件中读取和设置 cookie。
使用该库的问题是初始渲染闪烁,因为该库似乎无法通过应用程序路由读取 cookie 服务器端。即使我使用路由段配置手动启用动态路由,所有 cookie 在初始 SSR 请求中都未定义。当我到达客户端时,首先找到并正确读取 cookie。而且静态渲染的话,cookie显然是无法读取的。
我还尝试使用内置 cookie 系统的 Next.js 设置 cookie,然后使用客户端组件中的 cookies-next 库读取它们。即使使用该解决方案,初始 SSR 请求中的 cookie 也未定义。
因此我想知道,谁能告诉我在使用 Next.js 应用程序路由时是否有办法使这两个条件一起工作?
我真的必须读取服务器组件中的 cookie 并将 cookie 值作为序列化值传递给客户端组件吗?这也意味着当我为 cookie 设置新值时它们不会自动更新。
我觉得这里有一些东西非常不对劲,或者我希望我完全错过了一些东西。cookie 的全部目的是您应该能够在客户端和服务器端读取它们。