CSR客户端渲染
- 请求HTML页面——白屏
- 请求JS资源,执行JS代码渲染——可视(loading状态)+可交互
- 请求API接口——完全可视
pros
- 服务端响应速度快(因为返回的只是一个空白页面)
- 部署简单
- 唯一支持单页面应用的渲染方式(SPA可以带来更小的跳转感知,不会整页刷新)
cons
- 首页白屏
- JS资源包体积大
- 网站流量质量统计会更麻烦
- 对搜索引擎不友好
SSR服务端渲染
- 请求HTML页面,在服务端请求API接口,渲染完成并返回——可视
- 请求JS资源,执行JS代码再次渲染(同构)——可交互
- 没有API接口的请求,在第一步服务端渲染时候已经完成
SSR:生成的内容是动态的,可以根据不同用户渲染不用内容,但是不能直接获取浏览器的API.使用场景登陆态的掘金首页,更新的速度很快,需要根据用户信息请求API接口,再完成渲染
SSR 不是没有客户端渲染,而是首屏在服务端渲染完毕之后,再接由客户端渲染
pros
- 页面立即可视
- 客户端不需要发起API接口请求
- 对SEO友好
cons
- 服务端处理慢
- UI 框架兼容性问题
SSG(static site generation)静态页面生成
- 在build阶段提前静态化,生成好了可视的HTML页面
- 请求HTML页面——可视
- 请求JS资源,执行JS代码再次渲染(同构)——可交互
- 没有API接口的请求,在第一步服务端渲染时候已经完成
SSG和SSR的区别,SSG是在前端资源build阶段完成渲染,动态的数据和路径在getStaticPaths、getStaticProps两个方法中执行完成;SSR是在请求发起之后再去渲染
SSG:生成的内容是动态的,但是不能不能直接获取浏览器的API(在node中没有window),并且也不能跟用户相关.使用场景可以是多篇博客文章——路由是动态的,并且更新速度不会太快,根据博客内容决定,所有用户看到的文章也都是也一样的
pros
- 页面立即可视
- 客户端不需要发起API接口请求
- 对SEO友好
- 服务端处理快
cons
- 对数据的任何更改都需要重新打包发布前端资源
- UI 框架兼容性
