next.js 13.4应用路由器布局渲染层次结构问题和中间件中的cookie(设置后立即未定义cookie)

pgx2nnw8 于 2023-05-28 发布在其他

关注(0)|答案(1)|浏览(196)

在NextJs 13.4应用路由器中，layout.tsx等同于页面路由器中的_app.tsx。但它的执行顺序不同（即：在layout.tsx之前呈现page.tsx）。这里的问题是，我们不能在入口点文件（layout.tsx）中创建全局服务器上下文（服务器组件之间的数据共享）。
我面临的另一个问题是，如果我试图使用middleware.ts文件设置浏览器cookie，我无法读取page.tsx/layout.tsx中的cookie（即：显示为undefined）。但是在刷新页面后，我可以在日志中查看cookie。
请帮助我克服上述问题。
Thank you！
我希望layout.txt应该在page. tsx之前。
并在middleware. ts中设置后立即访问layout.tsx/page.tsx中的cookie。

next.js

来源：https://stackoverflow.com/questions/76316465/next-js-13-4-app-router-layout-rendering-hierarchy-issue-and-cookies-in-middle-w

1条答案

按热度按时间

bz4sfanl1#

虽然你不能在服务器组件中使用React上下文API，但有几种技术可以用来在服务器组件之间共享数据。
1.将数据作为props传递：

export default async function RootLayout({ children }) {
  const data = await fetchData();

  return (
    <html lang="en">
      <body>
        <ServerComponentA data={data} />
        <ServerComponentB data={data} />
        {children}
      </body>
    </html>
  );
}

1.您可以在每个需要数据的组件中独立地获取数据。接下来，将自动对相同数据的fetch请求执行重复数据消除。如果你无法使用fetch，React提供了一个缓存功能，允许你在请求期间手动缓存数据。
至于中间件中的cookie问题，这似乎是一个已知的问题-https://github.com/vercel/next.js/issues/49442

赞(0）回复(0）举报 2023-05-28

我来回答

next.js 13.4应用路由器布局渲染层次结构问题和中间件中的cookie(设置后立即未定义cookie)

1条答案

相关问题

热门标签

最新问答