这是我参与 [第五届青训营] 伴学笔记创作活动的第6天
B端应用
内部应用 to Business B端应用；C端应用 to Client
nextjs用于开发b端应用的框架
三种渲染模式
CSR：
客户端渲染(Client-Side Rendering)。常见B端WEB应用开发模式，前后端分离,服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的 HTML用户在后续访问操作——b端应用给客户端的html直接响应的流不会包含页面中的任何 元素——
SPA:单页面应用,它所需的资源(HTML CSS JS等)，在一次请求中就加载完成，不需刷新地动态加载,首屏时间更长
SSR：
SSR(Server-Side Rendering)即服务端渲染。它从服务器端返回页面，不进行前后端分离。传统SSR代码耦合度高，页面逻辑和服务端逻辑混杂，维护成本高——而前端只负责UI和页面切换
同构SSR：前后端一体化，一套代码在服务器上运行一遍，到达浏览器又运行一遍。前端后端都要参与渲染，而且首次渲染出的HTML要一样，客户端与服务端的渲染行为要保持一致，使渲染结构相同
BFF：Backend for Frontend，服务于前端应用的后端。对于大型、复杂的项目，下游服务多，会在接口和模板页面间加入bff层级，会将下游数据汇总、处理，作为前后端的中介，让接口只关注数据
SSG：
静态站点生成，效果上与ssr相同，不同之处在于会将网页所有结果上传到分布cdn上，使网页应用访问一个静态资源。由于只需一次性响应，服务端的压力会减小。但这样会使得所有用户得到相同的服务，无法做到用户个体相关服务。适用于信息展示曝光类的应用。
为什么ssr/ssg？
- 搜索引擎基于爬虫计算网站展示排名，c端应用需要向互联网搜索引擎展示网页内容，所以需要ssr/ssg响应爬虫请求并渲染网页内容
- ssr/ssg会在服务端渲染页面，通常较快，不需要请求大量js文件，使得首屏时间更短，提升了用户体验
Next.js
react提供了ssr相关框架，但上手难度较高；为实现同构ssr，还需要大量繁杂且重复的工作，拖慢了开发效率
Next.js构建于Node.js，支持基于React的Web应用程序，上手快、生态好，能使使用者快速掌握前后端一体化开发模式
创建Next.js项目
npx create-next-app@latest --typescript
数据注入
客户端注入
在ssr模式下，页面会在第一次请求中获取数据，将服务端渲染的数据注入到客户端。如果使用 useEffect钩子请求数据，便不是利用服务端渲染注入数据了，这样也会导致浏览器SEO无法获取网页信息。于是Next.js提供了自己的钩子函数用以数据注入
getInitialProps
ssr模式，首次渲染是在服务端渲染，不过使用路由跳转当前页面，会在客户端渲染
getServerSideProps
同样是ssr，不过即使使用router跳转，也会在服务端执行
getStaticProps
是ssg模式，如果涉及路由需要使用 getStaticPaths配置所有可能的情况
总结
为了利于搜索引擎SEO，需要以服务端渲染的形式写应用，服务端渲染需要响应html文档流，并且做到与客户端文档结构同构。而Next.js便是一个上手快、生态良好的编写服务端渲染应用的框架。对于初次学习服务端渲染相关的我来说，Next.js需要学习的仍有很多。关于数据注入、路由处理等等方面需要进一步学习。
