如何在我的NextJS应用程序中创建具有多个部分的服务器端渲染侧导航栏

How to create a server side rendered side navigation bar which has multiple sections in my NextJS app

提问人：Vineeth Vishwanath 提问时间：11/15/2023 最后编辑：Vineeth Vishwanath 更新时间：11/16/2023 访问量：41

问：

我想在我的 NextJS 应用程序上创建一个服务器端渲染的侧导航栏。它有多个带有子部分的部分。这些小节只有在单击与特定部分相邻的下拉箭头时才可见（类似于下拉列表）

此导航栏将出现在我的应用程序的所有页面中。SEO对我来说是重中之重，所以理想情况下，我希望我所有的组件都呈现在服务器端。

有没有办法在不求助于客户端渲染的情况下实现这一点？

我使用“use client”创建了我的组件，使其在客户端呈现。我已经对此进行了研究，但无法找到一种方法来使相同的组件服务器端可渲染。我对 nextjs 还很陌生，所以请为我指出正确的方向

reactjs next.js 服务器端渲染 next.js13

答：

0赞 Beast80K 11/16/2023 #1

问题 1 导航栏：

我想在我的 NextJS 应用程序上创建一个服务器端渲染的侧面导航栏.....我已经对此进行了研究，但无法找到一种方法来使相同的组件服务器端可渲染。我对 nextjs 还很陌生，所以请为我指出正确的方向。有没有办法在不求助于客户端渲染的情况下实现这一点？

试：

我使用“use client”创建了我的组件，使其在客户端呈现。

这是正确的事情，因为：

NextJS 说（阅读第 6个链接）如果你的组件有交互性（事件），或者它们使用浏览器 API（localStorage、地理位置等），那么你必须将它们作为客户端。因为，当这个组件在服务器上呈现时，它不会获得任何浏览器级别的 API，也不会理解事件，因为服务器没有浏览器，它会运行代码。
另一件事是并非所有库都支持服务器端渲染，因此您必须在客户端使用此类组件（否则您会遇到诸如窗口未定义等错误）。use client

溶液：您必须将具有交互性的组件保留为客户端组件。由于导航栏组件具有事件，因此保持客户端渲染。

问题 2 SEO：

搜索引擎优化对我来说是重中之重

溶液：SEO是在页面上实现的，通过导出页面中的函数.js（如果您使用的是应用程序路由器）和在页面路由器中使用NextJS提供的标签。在页面路由器中，服务器端渲染对于一个页面，需要导出一个异步函数。generateMetadata<Head>getServerSideProps

你可以结合SSR（服务器端渲染）和CSR（客户端渲染），只需在page.js中导入你的组件（有些会有），然后你导出你的函数（这照顾到页面的SEO）。use clientgenerateMetadata

请阅读：

应用路由器： https://nextjs.org/docs/app
Pages 路由器： https://nextjs.org/docs/pages
渲染： https://nextjs.org/docs/app/building-your-application/rendering
服务器组件： https://nextjs.org/docs/app/building-your-application/rendering/server-components
客户端组件： https://nextjs.org/docs/app/building-your-application/rendering/client-components
何时使用服务器和客户端组件？： https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components

Pages 路由器：

如果您仍有疑问，请发表评论。