Next.js | 青训营笔记

121 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天。以下是整理出的一些课程知识,作为笔记记录学习。

Web应用

从用户视角来看,web应用可以分为B端应用和C端应用两种。

  • B端应用:类似教学管理平台这种面向内部用户的web应用
  • C端应用:可以发布到公网上的web应用

渲染模式

分为CSR(客户端渲染 Client-Side Rendering)、SSR(服务器端渲染 Server-Side Rendering)、SSG(静态站点生成 Static Site Generation)

  • CSR:常见的B端渲染方式,前后端分离,服务器压力相对更轻,渲染工作在服务端进行,服务器直接返回不加工的HTML,首次看到完成渲染的页面等待时间更长。
  • SSR:前端只负责UI和交互,第一次页面请求的响应体中就会有在页面中展示出的元素。
  • BFF(服务于前端的后端 Backend For Frontend):后端接口给前端服务时的“中介”
  • SSG:在构建的时候直接把html输出到磁盘,每次访问把html返回给客户端。 C端应用更看重信息的曝光程度,SSR的渲染模式会在响应体中携带页面内容,更方便第一时间讲信息传递出去(SEO)。此外SSR/SSG可以拥有更快的首屏时间。

SSR实现

  • 同构:客户端和服务器端要做同样的工作来保证服务器响应时包含完整的客户端页面内容。
  • 脱水注水:服务器端把初始化数据剥离出来,在服务器端渲染时再注入回去,保证服务器端和客户端的初始化数据相同。
  • getInitialProps:内部的跳转会走客户端的路由,直接访问页面会走服务端的路由。
  • getServerSideProps:只走服务器端的路由。
  • getStaticProps:SSG模式中在服务端构建时执行。

CMS

  • 数据管理平台,SSR模式一般不会选择去生产数据而是搬运数据,开发一个数据管理平台可以帮助运营低成本地管理应用。