SSR与SSG

SSR 与 SSG

什么是 SSR

SSR (Server side render)

将组件或页面通过服务器生成 html 字符串,再发送到浏览器,简单理解下来,发了一个请求,服务器返回的不是接口数据,而是一整个页面的 HTML 结构,再结合界面之前定义的 CSS 把页面展示出来;

SSR 优点

  • 例如 SEO

因为访问一个请求,返回的就是页面全部的 HTML 结构,包含所需要呈现的所有数据,于是例如搜索引擎或者爬虫的数据抓取;

SSR 缺点

  • 性能全都依赖于服务器

  • 前端界面开发可操作性不高

什么是 CSR

CSR (Client side render)

CSR 往往都是单页面应用,即一个 HTML 文件和若干个 js、css 文件。

打开 build 后的 HTML 文件,发现代码很简单,页面和组件的元素都是放在了 js 里,由 js 动态渲染到 HTML 中。CSR 模式是目前前端开发项目中应用最为广泛的。

但有些也场景,特别是需要 SEO 优化的时候,CSR 就不太合适了

什么是 SSG

SSG (Static Site Generation)

顾名思义就是静态网站生成,也就是常说的“网页静态化”,除了适合 SEO,还很方便 CDN 加速,比较适合内容相对比较固定的资讯发布类网站。