这是我参与「第五届青训营 」伴学笔记创作活动的第13天
为什么要去了解Next.js？
我们所接触的Web应用可以分为B端应用和C端应用
- B端应用（To Bussiness）（企业端）
- C端应用（To Customer）（客户端）
CSR、SSR、SSG三种渲染模式
CSR（Client-Side Rendering）客户端渲染：常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作
- 痛点：SPA程序所需要的资源在一次请求中就加载完成，无需动态加载，首屏时间（输入链接到能看到元素的时间）更长。
SSR（Server-Side Rendering）服务端渲染：从原型的JSP和PHP就已经体现了服务端渲染，这种模式下Java和PHP负责渲染的逻辑，而前端只负责UI和交互。
- 痛点：旧时JSP/PHP混入HTML前后端不分离，会导致代码耦合度高，维护成本高。服务器压力大。
同构SSR：前后端一体化，一套代码在服务器上运行一遍，到达浏览器有运行一遍。前后端都要参与渲染，而且首次渲染出的HTML要一样。
BFF（Backend For Frontend）：服务于前端应用的后端（中间层），前后端之间的中介，BFF不会直接操作数据库，而是将下游数据拼接汇总。
SSG（Static Site Generation）静态站点生成：在构建的时候直接把结果页面输入html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源。
- 优点：相比SSR，不需要每次请求都由服务器端处理，减轻压力。
- 痛点：只能用于偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面是相同的。
SSR、SSG的优势
- 利于SEO（搜索引擎优化）
浏览器的推广程度，取决于搜索引擎对站点检索的排名。搜索引擎可以理解为一种爬虫，它会爬取指定页面的HTML，并根据用户输入的关键字对页面内容进行排序检索，最后形成我们看到的结果。B端应用里的元素由于渲染时机无法被爬取到。
- 更短的首屏时间
SSR/SSG只需要请求一个HTML文件就能展示出页面，服务器之间通信远比客户端快，不需要请求大量Js文件。
什么是Next.js？
去帮助新手更快开发一个SSR/SSG项目。
基于React提供的相关服务器端渲染API实现，这个过程实现比较繁琐重复，迫切需要封装好的集合来快速上手服务器端渲染。
Next.js
Next.js是一个构建于Node.js之上的开源Web开发框架，支持基于React的Web应用程序功能。上手快，能力几圈，而且覆盖了足够多的性能优化和生态。
客户端开发
数据注入
- getInitialProps
网站内部的Link会走客户端，直接访问走服务器端，逻辑需要同时兼容Node环境和浏览器V8环境。
- getServerSideProps
即使使用router跳转当前页，也只会在服务端执行这部分逻辑。
- getStaticProps
SSG，在服务器端构建时进行。 如果涉及动态路由（带参数），需要使用getStaticPaths配置所有可能的参数情况。
CSS Modules
Next.js支持使用文件命名约定的CSS模块。[name].module.css
Layout
通过在入口文件导入Layout，可以实现每个页面公共的页眉页尾。
文件式路由
Next.js有一个基于页面概念的文件系统的路由器，当一个文件被添加到pages目录中时，他会自动作为一个路径可用。
路由跳转
- next/link跳转
- useRouter跳转
- 原生跳转（不会进行Diff比对渲染）
header的修改
修改TDK（title、description、keywords）
多媒体适配
- CSS适配
- JS适配
大图优化
webp（图片大小为原来2/3,慢网速更快的解析时间，但快网速解析时间比png更长 ）
服务端开发
Strapi-headles CMS
初始化: npx create-strapi-app my-project --quickstart
一个接口的生成有以下几个过程:
- content-type builder 编辑结构体
- content manager 配置数据源，并且发布
- settings roles 里选择对应角色并勾选要发布的接口类型
- 如果涉及嵌套，在接口后加上 populate=deep 参数 (npm install strapi-plugin-populate-deep--save) ，没安装加参数 populate=* ，但只能嵌套一层
