在NextJS 12中，客户端组件将构建为静态页面，并将所有用于seo的HTML包含在getStaticProps（）方法中。
我已经在NextJS 13中开始了一个新项目，无论我做什么，它都不会在初始html中呈现标记为use client的组件。它只对服务器端组件执行此操作，并且服务器上可以呈现的内容有限。
有没有办法获得一个客户端组件，该组件请求构建一个api请求，以静态地作为html提供，就像在pages目录中使用getStaticProps（）一样？
我已经尝试在服务器组件上获取并传递给客户端组件作为 prop ，并在客户端组件内发出api请求。我正在为按需重新验证设置下一个标记标头
文档说这是默认行为，但它不是。我可以在github上找到很多人在抱怨同样的问题，但没有明确的答案，如果nextjs13真的有可能在源代码中为客户端组件提供html。
1条答案
按热度按时间6ioyuze21#
在Next.js 13中，您所描述的行为发生了变化。客户端组件现在在客户端上进行了水合，这意味着它们在浏览器中呈现和执行，而不是在服务器上。引入此更改是为了提高性能并减少初始HTML有效负载的大小。
因此，发出API请求的客户端组件不能像服务器端组件那样使用getStaticProps（）方法静态呈现为HTML。客户端组件的HTML不包含在初始服务器响应中，因为它依赖于客户端JavaScript执行来呈现和获取数据。
如果您想使用API请求中的数据预呈现客户端组件，可以使用SSR或预取数据并将其作为props传递。
您提到，您尝试在服务器组件中发出API请求，并将其作为prop传递给客户端组件。这种方法可以工作，但是客户端组件仍然需要在客户端进行水合。初始HTML响应将不包括完全呈现的客户端组件，但它可以接收预取的数据作为 prop ，并使用它在客户端呈现。这样，组件仍然可以访问渲染所需的数据。
虽然Next.js 13专注于客户端组件的客户端水合，但服务器组件和混合组件（服务器和客户端组件的组合）仍然允许服务器端渲染和包含在初始HTML响应中。根据您的用例，您可以考虑在必要时利用这些组件进行服务器端渲染。