SSR

Vue #

相关知识 #

• 服务端渲染 (SSR) -Vue3 官网
• Vue SSR 指南 - Vue2官网

• 服务端渲染 - Vite官网
• vite-plugin-vue - GitHub
  • compression - GitHub
• vite-plugin-ssr - 官网

• express - 官网
  • serve-static
• vue-router createMemoryHistory - 官网
• pinia ssr - 官网

• 用 preload 预加载页面资源 - 掘金

原理 #

通过asyncData获取数据，数据获取成功后，通过vue/server-renderer将数据渲染到页面中，生成完整的 html 内容，服务端将这段 html 发送给客户端，实现服务端渲染

基本交互流程 #

1. 在浏览器访问首页时，Web 服务器根据路由拿到对应数据渲染并输出 html，输出的 html 包含两部分

   • 路由页对应的页面及已渲染好的数据（后端渲染）
   • 完整的 SPA 程序代码

2. 在客户端首屏渲染完成之后，其实已经是一个和之前的 SPA 相差无几的应用程序了，接下来我们进行的任何操作都只是客户端的应用进行交互

整体流程 #

1. 配置两个入口文件，一个是客户端使用，一个是服务端使用，一套代码两套执行环境
2. 服务端渲染需要 Vue 实例，每一次客户端请求页面，服务端渲染都是用一个新的 Vue 实例，服务端利用工厂函数每次都返回一个新的 Vue 实例
3. 获取请求页面的路由，生成对应的 vue 实例
4. 如果页面中需要调接口获取数据，通过 asyncData 获取数据，数据获取成功后，通过异步的方式再继续进行初始化，通过 vue/server-renderer 将数据渲染到页面中，生成 html 内容

开发 #

git repo #

• 代码 - GitHub私有仓库

nginx 配置 #

使用三级域名

server {
  listen            80;
  server_name       xxxx.zdzhangdi.cn;
  server_tokens     off;

  location / {
      allow         xxx;
      deny          all;

      proxy_set_header           Host              $host;
      proxy_set_header           X-Real-IP         $remote_addr;
      proxy_set_header           X-Forwarded-For   $proxy_add_x_forwarded_for;
      proxy_pass                 http://localhost:xxx;
  }
}

进程守护 #

• pm2