CSR vs SSR vs SSG

CSR (Client Side Rendering)

React(Angular/Vue)—前后端分离

c1.png

• FCP first content page
  爬虫拿不到数据
  （首次加载的html文档没有内容，目前大多数搜索引擎对js识别能力不强）
  3个html生命周期：
  加载html文档->加载js文件->api请求->加载数据

SSR(Server Side Rendering)

JSP/PHP前一个前端时代，在服务端生成完整的html页面
1.用户可以在js运行js，绑定事件之前就能看到页面
2.api请求发生在服务端，理论上优于http call

• 被淘汰：前端程序员不友好=》java等要写后台语言

c2.png c.png

JAMStack &SSG

JAMSTack(Js,API,Markup)是一种Static site generate(SSG)技术，不依赖web server 框架

c3.png c4.png

前端性能指标

c5.png

SSG技术复杂度很高

c6.png

CDN和api server
SSR=>Next.js
SSG=>Next.js/Gatsby.js【taobao/google】
缓存：空间换时间

c7.png

CSR=》小型项目=admin system

c8.png

爬虫爬不到东西=》商业x
SSR

c9.png

对api请求发生在用户请求过程中

SSG=〉适合电商

c10.png

对api请求发生在build过程

=》测速工具：lighthouse

Gatsby vs Nextjs

Gatsby : SSG content manage system非常擅长, 都有继承，但是专注于SSG对于SSR很不友好
Nextjs: 都能用，但是SSG没有Gatsby那么继承（开箱即用）