基础系列-SSR服务端渲染

含义

服务端渲染(SSR):指的是页面在服务器端已经生成了完整的HTML页面结构,不需要浏览器解析(请求 js 文件,执行 js 文件,ajax 请求,获取数据生成完整的 html 结构等一系列操作)。

作用

为什么需要服务端渲染

单页面富应用(SPA)的局限:

之前我们开发的应用程序,如果直接请求可以看到上面几乎没有什么内容,当我们请求下来静态资源之后会执行 JS ,JS 会去请求数据,并且渲染我们想要看到的。

所有有局限性:

  • 首屏显示的速度较慢
  • 不利于SEO优化

所以,服务端渲染最主要是解决上面两个问题。

CSR,客户端渲染,单页面富应用(SPA)就是依赖的客服端渲染。

同构

一套代码既可以在服务端运行又可以在客户端运行,这就是同构应用。

同构是一种 SSR 的形态,是现代 SSR 的一种表现形式,

当用户发出请求时,先在服务器通过 SSR 渲染出首页的内容。

但是对应的代码同样可以在客户端被执行。

执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染。

使用

React SSR

使用 React SSR主要有两种方式:

  • 手动搭建一个 SSR 框架;
  • 使用已经成熟的 SSR 框架: Next.js

Vue SSR

使用 Nuxt.js 框架