Next.js 学习 - 生命周期
Next.js 是一个基于 React 的框架，除了继承 React 组件的生命周期之外，还扩展了自己的数据获取和页面渲染生命周期。以下是 Next.js 生命周期的主要部分：
1. 页面初始化
Next.js 的页面组件具有独特的生命周期，因为它们可以在服务器端（SSR）和客户端渲染（CSR）中运行。
服务端渲染生命周期
当用户首次访问一个页面时，Next.js 会在服务器端预先渲染页面。这时，页面的数据获取生命周期发生在服务端。
客户端渲染生命周期
页面首次加载后，如果用户在同一个应用中导航到其他页面，页面将通过客户端渲染。这时，页面的生命周期类似于普通的 React 组件。
2. 数据获取生命周期
Next.js 提供了几个用于数据获取的函数，这些函数定义了在不同阶段如何获取页面数据：
getStaticProps
- 何时调用：构建时（
next build）。 - 作用：用于预渲染静态页面，可以在构建时获取数据，并将其传递给页面的 props。
- 常用场景：博客文章、产品页面等不经常变动的内容。
getStaticPaths
- 何时调用：构建时，和
getStaticProps搭配使用。 - 作用：用于动态生成静态页面的路径，Next.js 会根据这个函数返回的路径预先生成静态页面。
- 常用场景：动态路由，例如博客文章的详情页。
getServerSideProps
- 何时调用：每次请求时。
- 作用：在服务端获取数据，并将其传递给页面的 props。每次请求页面时，Next.js 都会调用该函数获取最新的数据。
- 常用场景：数据变化频繁的页面，如用户个人资料页面。
getInitialProps（旧方法）
- 何时调用：页面初始化时，无论是服务端渲染还是客户端渲染。
- 作用：在早期版本中用于获取初始数据。它可以在服务端和客户端运行，但现在被
getStaticProps和getServerSideProps所取代。
3. 页面渲染
在 Next.js 中，页面渲染有三种主要方式：
- 静态生成（Static Generation）：在构建时生成静态 HTML 文件。通过
getStaticProps获取数据并生成页面。 - 服务器端渲染（Server-Side Rendering，SSR）：每次请求时生成 HTML 文件。通过
getServerSideProps获取数据并渲染页面。 - 客户端渲染（Client-Side Rendering，CSR）：页面首次渲染在服务器端完成，随后在客户端通过 JavaScript 动态更新页面。通常在交互频繁的应用中使用。
4. 页面加载和导航
Next.js 具有内置的客户端导航功能，通过 <Link> 组件和 next/router 可以实现无刷新导航。在导航过程中，Next.js 会通过客户端预取数据，并在 useEffect 生命周期钩子中处理页面更新。
5. API 路由
Next.js 还支持 API 路由，允许你在 pages/api 目录中创建后端 API。这些 API 路由可以处理请求并返回 JSON 数据，类似于标准的 Express 路由。
6. 增量静态再生成（ISR）
Next.js 具有一种称为 增量静态再生成（Incremental Static Regeneration, ISR）的机制，它允许你在构建后定期重新生成静态页面。你可以通过在 getStaticProps 中设置 revalidate 来指定页面重新生成的间隔时间。
总结来说，Next.js 的生命周期可以分为数据获取、页面渲染以及客户端交互三个主要阶段，并且针对不同的渲染方式提供了不同的数据获取钩子，以灵活应对静态、动态内容的需求。
原文地址：https://blog.csdn.net/Chloeeeeeeee/article/details/142959914
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！