在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响应中。根据您的用例,您可以考虑在必要时利用这些组件进行服务器端渲染。