SSR(服务端渲染)与SSG(静态页面生成)

2023-04-15 15:51| 来源: 网络整理| 查看: 265

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 框架兼容性

【本文地址】

公司简介

联系我们