Nextjs 中 getInitialProps/getServerSideProps/getStaticProps 的区别

[nmsn]

如题

[nmsn]

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

getStaticProps

能够在 build 阶段就执行预渲染，会被打包到静态文件当中，可以进行 CDN

可以发起请求，更多的使用在 CMS 之类的无权限的静态资源请求上面

getInitialProps/getServerSideProps

• getInitialProps 是一直以来页面初始化使用的方法
• getServerSideProps 在 v9.3.0 版本之后出现的提供更好功能和语义的方法

getInitialProps

getInitialProps 会在首次加载的情况下，在服务端执行，后续通过 next/link、next/router 进入的页面将会在客户端执行

getInitialProps 是页面组件的静态方法，通过使用

Index.getInitialProps = async (ctx) => {
...
}

来挂载方法

getInitialProps 中不应该出现服务端方法，因为可能在客户端执行，会报错

getServerSideProps

getServerSideProps 当中可以执行服务端方法，无论是在服务端渲染还是客户端渲染，完全可以替代 getInitialProps 方法

在页面的的文件下，导出

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

使用推荐

如果是开发新版本的 Nextjs 应用，推荐使用新方法 getStaticProps 和 getServerSideProps， 放弃使用 getInitialProps 方法