这是我参与「第五届青训营」伴学笔记创作活动的第 10 天
本堂课重点：
- CSR/SSR/SSG 概念
- Next.js 开发
知识点解释：
1. CSR（客户端渲染 Client Side Render）
即在客户端渲染网页结构，一般情况下我们所熟知的 Vue、React 均采用这种模式。在构建时并不会生成HTML结构，仅仅包含js代码的引用。在浏览器端将HTML结构渲染出来。客户端渲染会在项目体积较大的时候可能会导致较长的首屏加载时间，用户体验不好，且对于SSO来说并不友好。
2. SSR（服务端渲染 Server Side Render）
浏览器请求时，服务器直接生成HTML结构并返回，这种模式其实并不少见，曾经的php和jsp都是这种模式。Vue 和 React 也对这种模式进行了支持，例如 React 下有 Vercel 主导的 Next.js 框架支持服务端渲染，Vue 下也有类似的框架 Nuxt.js。与前者的区别是，php和jsp的前后端代码实际上仍是分离的，需要动态交互的部分还是需要js介入。而React和Vue在服务端和客户端都是同一套代码，这也就导致其比前者多了一步水合 hydrate (也称注水) 的操作。
在这种模式下，服务端在生成HTML的同时对其进行“脱水”，即将渲染结构的初始数据分离出来，单独储存，以便让前端读取。在浏览器收到页面后，相关的代码读取这部分内容，再对html结构进行“注水”（水合），使得服务端和客户端的数据同步，且浏览器端的元素能够正常交互。
比起CSR，SSR能够大幅缩短首屏加载的时间，且对于SSO友好，但是需要服务器支持。
3. SSG（静态网页生成 Static Site Generation）
这种形式实际上和SSR类似，但是无需运行一个服务端，HTML结构在构建时就已经创建完了，用户访问时，仍然是个静态页，却具有SSR首屏加载时间短的优势，适合那些修改不频繁的站点，例如一些开发文档。
初始化 Next.js 项目
Next.js 提供了一个脚手架，直接就能够创建项目
npx create-next-app@latest --typescript
接下来就能够看到创建完成的项目目录了。可能会有下面这些文件
.eslintrc.json - eslint 的配置文件，配置了eslint使用的语法规则
.gitignore - git 仓库的忽略文件
next-env.d.ts - TypeScript 的类型定义，是为了方便引入Next声明的类型
next.config.js - Next.js 的配置文件
pages - 页面目录
styles - 样式目录
public - 公共资源目录，会在构建时被原样拷贝
