Next.js的页面的生命周期和React的生命周期有什么不同？

Question

请问下，Next.js（pages router）的页面的生命周期和React的生命周期有什么不同？

我们知道在next.js中，可以有自定义的一些方法，如getServerSideProps。

export const getServerSideProps: GetServerSideProps = async () => {
  xxx
}

export default function index({data}) {
  yyy
}

请教几个问题：
1、next.js pages router 有哪些方法呢？除了getServerSideProps之外还有哪些呢？

2、在写组件(export default function index({data}))的时候，和react.js的组件的生命周期方法有哪些不同呢？ 还是说完全相同？

Answer 1

getServerSideProps 只是服务端渲染（SSR）的方法， 当用户发起请求时，Next.js 会在服务器端执行 getServerSideProps 函数来获取数据并将数据作为 props 传递给页面组件。跟 React 的生命周期并不冲突。

推荐一篇文章什么是 CSR、SSR、SSG、ISR - 渲染模式详解来了解多种渲染模式。

Answer 2

Next.js 是一个基于 React 的框架，所以在组件级别，React 的生命周期方法（ componentDidMount, componentDidUpdate, componentWillUnmount 等）在 Next.js 里一样可以用，但是Next.js 在页面级别引入了一些特殊的生命周期函数，主要用来数据获取和预渲染。
1.getServerSideProps: 这个函数在每次页面请求时候都会在服务器端运行。它返回的对象会作为 props 传递给页面组件。

2.getStaticProps: 这个函数在构建时候在服务器端运行。它返回的对象会作为 props 传递给页面组件。这个函数适合用来数据在构建时就可以确定，并且不需要在每次页面请求时候更新的场景。

你的第二个问题，Next.js 的页面组件和普通的 React 组件基本是相同的

Answer 3

你说的这个api的next12 pages的，最新的next版本是13，看官网https://nextjs.org/。文件写再app下面。next13默认ssr渲染，