这是我参与[第五届青训营]笔记创作活动的第八天

本课堂重点内容：

• CSR, SSR, SSG
• 什么是 Next.js
• Next.js 客户端开发
• Next.js 服务端开发
• 核心功能讲解

详细知识点介绍：

CSR：

客户端渲染。常见B端 Web 应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的 HTML 用户在后续访问操作。SPA：单页面应用，所需的资源在一次请求中就加载完成，无需刷新动态加载，首屏时间更长

同构SSR：

BFF，服务于前端应用的后端，前后端一体化，一套 React 代码在服务器上运行一遍，到达浏览器又运行一遍。前后端都参与渲染，而且首次渲染出的 HTML 要一样。

SSG：

静态站点生成，在构建的时候直接把结果页面输出 html 到磁盘，每次访问直接把 html 返回给客户端，相当于一个静态资源。相比 SSR 因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力，缺陷则在于只能用于偏静态的页面，无法生成与用户相关的内容，也就是说，所有的用户访问的页面都是相同的。

SSR、SSG 优势：

• 利于 SEO
• 更短的首屏时间

何为 Next.js

Next.js 是一个构建于 Node.js之上的开源 Web 开发框架，支持基于 React 的 Web 应用程序功能。其优势在于上手快、能力全、且覆盖足够多的性能优化和生态。对初学者较为友好。

实践练习例子：

next.js 初始化

npx create-next-app@latest --typescript

数据注入：

getInitialProps

在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由（即路由跳转跑客户端，其余跑服务器端

getServerSideProps

SSR，与前者不同的是，即使使用 router 跳转当前页，也只会在服务端执行（即只跑服务器端）

getStaticProps

SSG，在服务器端构建时执行，如果涉及动态路由（带参数），需要使用 getStaticPaths 配置所有可能的参数情况

文件式路由

Next.js 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到 pages 目录中时，会自动作为一个路径可用

个人课后总结：

Next.js需要一定的node基础和React基础