Nextjs - 如何将 SSR 与“使用客户端”全局导航栏一起使用？

Question

我是 nextjs 的新手，我正在努力弄清楚如何组织我的项目。我有一个站点全局的导航栏，我使用

useState()

来确定当前选择哪个选项卡。想象一下像 Instagram 导航栏一样的东西，包括主页、搜索等..

我最初的想法是将此导航栏放在根目录中

layout

（顺便说一句，使用应用程序路由器）。但由于这将

'use client'

添加到根，因此它下面的所有内容都无法在服务器上渲染，对吧？这看起来基本上违背了nextjs的要点。

所以我的第二个想法是将导航栏单独添加到每个页面，本质上是在叶子而不是根添加导航栏。但这感觉真的很笨重，因为我说过你可以访问 10 多个页面，而且所有页面的底部都有相同的组件。无论如何，这是最好的方法，或者解决这个问题的常见方法是什么？

Answer 1

您可以将导航栏提取为独立组件，并将其导入到服务器组件中，如根布局，允许您保留渲染策略。