「译」getInitialProps vs getServerSideProps in Next.js

Next.js v9.3版本引入了getServerSideProps，在定义服务端渲染这边页面上的props，getServerSideProps基本上取代了getInitialProps.
如今，仍然有些开发者对于使用哪个方法还是比较困惑，在这篇文章会通过各自举例来解释 getServerSideProps和getInitialProps工作原理，让我们开始吧！

getServerSideProps和getInitialProps内部工作原理

基本上来说，如果你要在编译阶段发出任何请求之前渲染页面，你应该使用getStaticProps，该方法会使页面静态化进行渲染，也意味着后续不会被重复渲染直到下一次的编译。虽然该方法对于渲染速度及SEO有显著的提高，但它不适合经常改变的动态数据渲染方式。

如果你希望在请求时渲染页面，你可以使用getServerSideProps方法，在客户端得到请求响应时渲染页面。该方法会对每个请求都是做页面渲染，虽然该方法使得服务端会对每个请求重新构建页面，从而降低整体的访问速度，然而该方法相比React在客户端渲染的普通方式有着较大的SEO优势。

next-getserversideprops-getstaticprops-diagram.png

关于语言和框架的升级，向后兼容性很重要，尽管老的模式或方法在后续的工程里不再使用，它们仍然被维护，以此保证不破坏遗留代码及边界情况。这就是getInitialProps的情况，它几乎和getServerSideProps有着一样的用法行为。

getServerSideProps和getInitialProps那两者有什么不同点吗？
老的getInitialProps方法和新的getServerSideProps方法最大的区别点在于当用户点击链接访问不同区域时，如何在转换过程中使用该功能。
getInitialProps这边转换在服务端初始化页发生，在客户端会再次执行，然而如果有涉及到数据库之类的逻辑，在客户端这边是不能直接访问的，这将会是发生问题。
【个人补充：这块就是确保同构的一致性，因为服务端没有DOM，所以不能处理事件等DOM相关行为，只能输出HTML String。因此相同的代码客户端需要再跑一次，把DOM的行为再加上，这样才能输出一张功能完整的页面供用户使用，这也是同构渲染的意义所在】
举个例子：

// Import a User model
import User from "../models/User"
function Page({ User }) {
    return 
Username: {User.username}
  }

  Page.getInitialProps = async (ctx) => {
    // Get user id
    const User = await User.findOne(ctx.query.id)
    // return props
    return {
        User
    }
  }

  export default Page

在这个代码片段中，页面初始化可以通过User数据模型获取用户信息，然而在客户端当User数据模型不可使用的时候会操作失败。
作为其中一个解决方案，可以使用Next.js 自带的API服务进行端点接口提供，但这样比在服务端这边User数据模型直接访问数据库效率要低很多。
另外一个解决方案，可以使用getServerSideProps方法，该方法会在服务端初始化页面执行，在客户端页面转换阶段，getServerSideProps会在服务端生成一个API 调用接口，会再次运行处理逻辑并返回JSON格式作为结果。
通过做此更改，我们修复了getInitialProps在切换时产生的问题。下面这个例子，可以访问数据库的同时，在初始页面的时候也不会报错

// Import a User model
import User from "../models/User"
function Page({ User }) {
    return 
Username: {User.username}
  }
  export async function getServerSideProps(context) {
    // Get user id
    const User = await User.findOne(ctx.query.id)
    return {
      props: {User}, // will be passed to the page component as props
    }
  } 

  export default Page

那么什么情况下用哪个合适呢？
如果你通过Next.js创建了一个新的应用，那么你没有理由要使用遗留方法getServerSideProps，因为getServerSideProps和getStaticProps方法会更加实用，语义更加明确。
在这篇文章，我们将阐明getServerSideProps和getInitialProps的区别，通过看一个例子来看看我们是如何解决getServerSideProps解决getInitialProps中的切换问题。
我希望你喜欢这篇文章，如果你有任何问题，请留言。要了解更多关于Next.js和其他元框架的信息，请务必查看这篇比较Next.js和Remix的文章。
LogRocket是一个使得Next.js应用完全可视化的工具。
调试Next应用程序可能很困难，特别是当用户遇到难以再现的问题时。如果您对监视和跟踪状态、自动显示JavaScript错误、跟踪缓慢的网络请求和组件加载时间感兴趣。
LogRocket就像一个网页和app的DVR录制机，录制Next.js应用程序上发生的一切,您不必猜测问题发生的原因，而是可以聚合和报告问题发生时应用程序的状态,LogRocket还监视应用程序的性能，报告客户端CPU负载、客户端内存使用情况等指标。
LogRocket Redux中间件包在用户会话中增加了一个额外的可见层。LogRocket记录Redux存储中的所有操作和状态。

原文：https://blog.logrocket.com/getinitialprops-vs-getserversideprops-nextjs/