这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
CSR
渲染的工作在客户端渲染，后端对其不加工
B端应用的响应不会包含html的任何元素
单页面应用，不需要动态加载，一次性获取完数据就行。所以首屏时间长
SSR
服务器端把页面的元素返回回去
代码耦合度高，不进行前后端分离，模板页面里有html，也有服务器端语言
这种模式下java、php负责渲染逻辑，前端只负责ui
同构SSR
response里面是一个html界面，而CSR里面的元素不会体现在response里。这是区分的方法
BFF：服务于前端应用的后端
SSG
静态：每个用户看的应用都一样，相当于静态页面
SSR、SSG的优势——利于SEO
SSR SSG更短的首屏时间。因为只需要请求一个HTML文件，不再需要大量js文件
SSR的实现
核心：同构——客户端做的事，服务端原封不动做一遍，保证二者状态相同
可以用next.js
src里面
- client——客户端的事情
- server——服务端的事
- pages——页面的正常开发
保证两边都有同一个路由就行
不同构，其实页面也一样的。同构的原因因为模板可能绑事件，如果服务端不同构，无法返回相关js，导致事件是个空事件，没有反应。
脱水和注水——客户端拿的数据跟服务端对不上，需要把客户端拿的初始化数据脱掉，在服务端再把新水注进来，保证数据跟服务端一致
nextjs
直接用react的ssr开发，很不友好，重复工作很多
目录结构
- pages：放的模板页面
- public
- styles
- next-env.d.ts：保证ts编译器选择nextjs，可以放到gitgiglo当中
- next.config.js：配置，可以补充一些webpack的配置
不同于react：数据注入不一样。可以用三个api，也可以客户端注入，但是一般不这么写
三个api
getinitprops：点击的时候从客户端走，输入链接的时候从服务端走
getserversideprops：只从服务端走
css modules
在类名基础上加一个hash，这样就不会重复使用、样式互串
layout
可以加一个layer组件，这样可以重复使用header、footer之类的了
文件式路由
一个文件被加到pages中，就会当成一个页面使用
多媒体适配
css适配
js适配
大图优化
webp
客户端开发
BFF不区分路由是get还是post。可以对res的method做判断，这跟express不同
开发方法：debug测不到
- 用js debug 控制台来断代码
