Next.js项目中能否在React类组件内运行SSR服务端渲染代码？

你无法直接在React类组件中运行仅服务端可用的SSR模块代码。

核心原因 #

Next.js Pages Router 的SSR执行流程是固定的：

1. 服务端先执行页面的getServerSideProps方法，获取所有需要的动态数据
2. 服务端将getServerSideProps返回的props序列化为JSON，和渲染后的HTML一起返回给客户端
3. 客户端拿到内容后，会加载组件代码并执行hydrate操作，此时组件的所有生命周期、渲染逻辑都会在客户端再执行一次

如果直接在part.js类组件中引入仅服务端可用的模块，客户端hydrate阶段执行组件代码时会直接报错，因为该模块不存在于客户端运行环境中。

同时你尝试将函数作为prop从getServerSideProps传递给组件的操作本身就不符合Next.js的规则：getServerSideProps返回的所有prop必须是可序列化为JSON的普通数据，函数、类实例等不可序列化的内容无法传递。

可行的解决办法 #

• 如果你需要的参数是路由参数、请求头、Cookie、用户IP这类请求维度的信息：这类信息本身就可以在getServerSideProps的入参中直接获取，不需要到组件层才能拿到，你直接在getServerSideProps中调用SSR模块，将结果作为普通prop依次传递给view.js、part.js即可。
• 如果你需要的参数是仅组件渲染后才能得到的动态状态（比如用户交互产生的状态、DOM计算结果）：你可以新增一个Next.js API路由，将SSR模块的调用逻辑放到API路由中（API路由只会在服务端执行），然后在part.js的componentDidMount生命周期中请求这个API路由，把组件内的参数传递给服务端，拿到返回结果后再更新组件状态即可。

所有需要在SSR阶段完成的逻辑，都必须收敛到页面的getServerSideProps中，组件层的代码默认会在服务端和客户端两端执行，不要在组件中直接引入仅服务端可用的依赖。

内容的提问来源于stack exchange，提问作者Chamupathi Gigara Hettige