从Next.js到服务端渲染的学习

最新推荐文章于 2024-08-12 02:37:45 发布

weixin-sjk6070

最新推荐文章于 2024-08-12 02:37:45 发布

阅读量500

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chunzhenwang/article/details/104348319

版权

本文详细介绍了Next.js服务端渲染的原理和实践，包括getInitialProps的使用、Next.js与Mobx的结合、Next.js配置方法以及如何自定义服务端渲染。还提供了相关仓库链接，帮助读者深入理解React服务端渲染和客户端同构。

摘要由CSDN通过智能技术生成

在next.js里提供了一个静态异步方法：getInitialProps,它能异步获取JS普通对象并绑定在props上，通过这个方法我们就可以在服务的获取接口数据。
static async getInitialProps({ req }) {
console.log(req)
return {}
}
复制代码观察上面代码，会发现还有一个req对象，它指代的为服务的的request对象，但是作为一个前后端分离的独立前端工程，并没有与服务端有这方面的互动。但是在传统的react项目中，获取接口数据一般使用componetDidMounted,在Next.js我们仍然可以使用它,由于这个函数只存在于客户端，继续使用componetDidMounted可能会失去SSR应用的灵魂。
Next.js + Mobx ?
如果我们项目中使用了Mobx进行状态管理，如何在getInitialProps里面进行"dispatch"呢,注入到this.props呢，当然这是不可以的，因为getInitialProps是一个静态方法，无法使用this这一对象。这时候若你非要结合Next.js与Mobx，那你可能不能使用getInitialProps，而使用componetDidMounted了，或者你只能单页面单store。
二、Next.js怎么配置
Next.js 是react进行服务端渲染的一个工具，默认以pages为渲染路由的路径。
如何对next.js做一些配置呢？有两种方式，方法一：在根目录的next.config.js里进行配置；方法二：自定义一个server.js。
next.config.js
可以使用BundleAnalyzerPlugin对webpack进行相关配置，如