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

大纲

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

课程目标

具备C端Web应用开发的基本能力

什么是B端？ 挂在内网，给内部群体使用

什么是C端？ 在互联网上，面向所有群体（Next.js用于开发C端）

CSR SSR SSG

CSR

客户端渲染

常用B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作

（B端应用和服务器响应的HTML并不会包含页面中的任何元素） 因为是动态加载，所以首屏时间会更长

SSR

SSR并不是新鲜的概念，从原先的JSP/PHP就已经体现了服务器端渲染。

这种模式下JAVA PHP去负责渲染的逻辑，而前端只负责UI和交互。

同构SSR

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

BFF： 服务于前端应用的后端。 （例如Node.js写的中介 中间层）

SSG

静态站点生成，在构建的时候直接把结果页面输出HTML到磁盘，每次访问直接把HTML返回给客户端，相当于一个静态资源。

相比SSR 因为不需要每次请求都由服务器处理，所以大幅度减轻服务器压力

缺陷就在于只能用于偏静态的页面，无法生成与用户相关的内容。

SSR SSG可以拥有更短的首屏时间，提高用户体验度。

什么是Next.js

Next.js 是一种 React 的服务端渲染框架，且 Next.js 集成度极高，框架自身集成了 webpack、babel、express 等，使得开发者可以仅依赖 Next、react、react-dom 就可以非常方便的构建自己的SSR React 应用，开发者甚至都不用像以前那样关心路由。 Next.js 的高度集成性，使得我们很容易就能实现代码分割、路由跳转、热更新以及服务端渲染和前端渲染。