这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
CSR
客户端渲染(Client-Side Rendering)。常见于B端WEB应用开发。
核心是通过ID渲染内容<div id="root" />，渲染工作在客户端进行，所需的资源（HTML CSS JS），在一次请求中记载完成。动态加载首屏时间长。
SSR
服务端渲染(Server-Side Rendering)
服务端语言负责渲染代码耦合度高，维护起来较困难
同构SSR
改善SSR下前端代码和服务端代码耦合我问题，前后端一体化
SSG
静态站点生成（Static Site Generation）
优点：相比SSR不需要每次请求由服务端处理，可大幅降低服务端压力
缺点：内容偏静态，无法为用户定制生成
SSR、SSG优点：
- 有利于页面
SEO - 更短的首屏时间，只需
HTML即可展现页面，服务器通讯比客户端快，不需请求大量JS
SSR实现核心：
- 同构（客户端服务端共同参与, 保证时间触发）
- 脱水：服务器端将返回数据脱水
- 注水：客户端渲染拿到服务端数据，保证客户端和服务器端数据同步
Next.js
实现快速搭建SSR项目
数据注入
getInitailProps`
内部跳转在客户端走数据注入的方案，直接访问走服务器端（需要兼容Node、V8）
getServerSideProps
仅在服务器端注入
getStaticProps
SSG
客户端注入
useEffect
文件式路由
利用文件系统自动生成路由，预定义路由优先级更高
路由跳转
link/useRouter：进行diff比对，性能较高
TDK Header修改
有利于页面SEO
多端适配
rem- 媒体查询
大图优化
webp
BFF层
作为服务构建包，不影响客户端构建bundle体积
开发：
VsCode中的Javascript调试终端package.json配置Next.js提供的终端debug
总结
之前有跟着Next.js官网教程搭过建议的博客页，对于Next.js一些实战的内容也有一定了解。这次课程最大收获是CSR、SSR、同构SSR、`SSG``这些前端方案的区别对比，让我有了更深入的了解进行技术选型。
