这是我参与「第五届青训营 」伴学笔记创作活动的第19天，昨天学习了关于Node.js实战项目的内容，今天将相关知识进行了简单地整理。
课程目标
具备C端Web应用开发的基本能力
- B端：面向内部用户
- C端：面向整个互联网用户
CSR、SSR、SSG三种渲染模式
CSR (Client Side Rendering，客户端渲染)
-
常见B端Web应用开发模式，前后端分离，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作。
-
不关心模板页面的渲染
SSR (Server Side Rendering，服务端渲染)
-
代码耦合度很高
-
希望服务端第一次只把渲染好的 HTML 发给客户端，这样客户端就能直接显示出来网页的样式。然后，客户端再根据 HTML 需要的 js 向服务端请求 js，然后客户端再把 js 装到已经绘制好的 HTML上
同构SSR：
-
BBF（backend for frontend）：服务于前端应用的后端，对下游请求的数据进行拼接，传递到前端进行交互，前端与后端的中介
-
前后端一体化，前端后端都要参与渲染
-
SSG（Static Site Generation，静态站点生成）
-
静态站点生成，在构建时直接把页面结构输出html到磁盘（CDN），每次访问直接把html返回给客户端，相当于一个静态资源。
-
CDN：建立并覆盖在Internet上，由分布在不同区域的边缘节点服务器组成的分布式网络
-
相比SSR，因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力
-
缺陷在于只能生成偏静态的页面，无法生成与用户相关的内容，即所有用户访问界面相同
SSR、SSG的优势
1、利于SEO（Search Engine Optimization）
浏览器的推广程度取决于搜索引擎对站点检索的排名。搜索引擎可以理解为一种爬虫，会爬取指定页面的HTML，并根据用户输入的关键词对页面内容进行排序检索。
2、更短的首屏时间
SSR/SSG只需要请求一个HTML界面就能展示出页面，虽然在服务器上调取接口，但服务器间的通信远比客户端快。因为不再需要请求大量js文件，这使得SSR/SSG有更短的首屏时间。
什么是Next.js
SSR的实现
- 基于React提供的相关服务器端渲染API实现，整个过程比较繁琐，从零实现对新手不友好。
- 因此Next.js作为封装好的集合可以帮助我们快速上手服务器端渲染。
Next.js
-
一个构建于node.js之上的开源Web开发框架，支持基于React的Web应用程序功能，例如服务端渲染和生成静态网站
-
上手快，能力集全，而且覆盖了足够多的性能优化和生态
-
对于初学者掌握前后端一体化的开发模式很友好
Nextjs客户端开发
Nextjs 初始化
数据注入
-
getInitialProps
在服务器端执行，在页面层绑定 使用router跳转当前页，会在客户端执行这一部分 -
getServerSideProps
与getServerSideProps不同，使用router跳转当前页，也在服务端执行 -
getStaticProps
如涉及动态路由（有参），需使用getStaticPaths列出所有可能的情况
CSS modules
[name.module.scss]
Layout
使每个页面共用页眉页尾
文件式路由
基于文件系统的路由器。当文件被添加到page目录下会自动作为一个路径可用
Nextjs服务端开发
BFF层开发
没有参数可以直接区别请求类型
Strapi - headless CMS
一个接口的生成有以下几个过程：
1、content-type builder 编辑结构体
2、content manager 配置数据源，并发布
3、settings roles 里选择对应角色并勾选要发布的接口类型
4、如果涉及嵌套，在接口后加上 populate=deep 参数 (npm install strapi-plugin-populate-deep --save), 没安装可用参数populate=* ，但只能嵌套一层
