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

重点知识点内容介绍

1、CSR, SSR, SSG

2、什么是 Next.js

3、Next.js 客户端开发

4、Next.js 服务端开发

CSR，SSR，SSG

CSR：客户端渲染Client Side Rendering，渲染工作在客户端（浏览器）进行，而不是在服务器端进行。
前后端分离，减轻服务器压力，可以做成SPA增量渲染
不利于SEO，首屏渲染时间长
SSR：服务端渲染Server Side Rendering，整个渲染过程是在服务器端进行，服务器返回渲染完成的HTML例如JSP，PHP
有利于SEO，首屏渲染时间短
占用服务器资源，无法只渲染可变区域每次跳转新页面都要在服务器重新渲染整个页面，代码耦合度高难以维护
同构SSR：一套 React 代码在服务器上运行一遍，到达浏览器又运行一遍。服务端渲染完成页面结构，客户端渲染绑定事件
SSG：静态站点生成Static Site Generation，在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源
与SSR相比可以将页面输出到CDN缓存，更减轻服务器压力
与SSR相比无法针对不同用户生成不同页面，只能生成静态数据否则每次数据变动都要重新生成

Next.js 是一个构建于 Node.js之上的开源 Web 开发框架支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。

Next.js的特点：上手快，能力集全，而且覆盖了足够多的性能优化和生态。对于新同学掌握前后端一体化的开发模式很友好。

Next.js初始化： npx create-next-app@latest --typescript

接口生成主要有以下过程

content-type builder 编辑结构体

content manager 配置数据源，并且发布

settings roles 里选择对应角色并勾选要发布的接口类型