Next.js｜ 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第8天

一、本堂课重点内容：

1. CSR, SSR, SSG
2. 什么是 Next.js
3. Next.js 客户端开发
4. Next.js 服务端开发
5. 项目核心功能讲解

二、详细知识点介绍：

CSR客户端渲染，常见B断WEB应用开发模式，前后端分离，服务器压力相对于轻松，服务器直接返回不加工的HTML用户在后续访问操作。所有元素请求编译后加载，B端常常用于开发管理平台。内容一口气拉完，所以首屏时间会更长。它不会关心页面模板怎么渲染。

SSR服务端渲染，把服务器端所有页面元素全部返回。它的代码耦合度高，且模板语音中混杂编程语言对于一些复杂的功能，维护起来会更痛苦。同构SSR，BFF服务于前端应用的后端。前端一体化，一套react代码在服务器上运行一遍，到达浏览器又运行一遍。SSR：核心同构客户端做的事情，服务端也会做一遍，做到预期相同。

ssg静态站点生成，访问的静态页面，相对于静态资源。它不会每一次向服务器请求，所以会减轻服务器压力，但是无法生成用户相关的内容，也就是所有用户访问的内容都是相同的。 ssr和ssg可以利于seo，帮助浏览器推广。可以一个html请求文件就能展现出页面，使得首屏时间更短，也不需要大量js文件。

next.js，react ssr 需要我们做大量的重复工作，没有深层次的代码逻辑，next.js 帮助前后端一体化。getStaticprops，在服务器端构建时执行。getinitiaprops 会在客户端里走

三、实践练习例子：

如果涉及动态路由（带参数），需要使用getStaticpaths配置所有可能的参数情况。

四、课后个人总结： SSR相当于你去点餐你要什么，厨师给你上什么，SSG是厨师把所有菜都准备好，然后给你选择。