Vue SSR

Vue SSR

什么是SSR？/为什么要使用？/ 什么情况下该用 / 基本使用方法——直接看官方文档 SSR

需求：

• 理解 SSR 项目各个文件配置流程

请求过程

构建步骤

这是官方给出的构建步骤示意图

对于客户端应用程序和服务器应用程序，我们都要使用 webpack 打包 - 服务器需要「服务器 bundle」然后用于服务器端渲染(SSR)，而「客户端 bundle」会发送给浏览器，用于混合静态标记。

运行项目

github 地址：

git clone https://github.com/ZHAISHENKING/vue-study.git --branch vue-ssr

先把项目运行起来，看看效果

cd vue-ssr
npm i/yarn
npm i nodemon # nodemon会使node启动项目热重载
npm run build
cd server && nodemon 04-ssr.js # 启动

启动成功后。打开 localhost:3000

文件分析

src 目录下component views 目录与vue的SPA模式结构相同，主要分析下面几个文件:

• main.js 前端入口文件
• entry-client.js 客户端配置
• entry-server.js 请求上下文
• router/index.js 路由配置
• server/04-ssr.js 服务端配置

main.js

import Vue from 'vue'
import App from './App.vue'

import {
    createRouter } from './router/index';

// 返回工厂函数，每次请求创建一个Vue实例
export function createApp(context) {
   
  // 1.创建路由器实例
  const router = createRouter()

  // 2.创建Vue实例
  const app = new Vue({
   
    router,
    context, // 上下文用于给渲染器传递参数
    render: h => h(App)
  })
  
  return {
   app, router}
}

entry-server.js

import {
    createApp } from "./main";

// 返回一个函数，接收请求上下文，返回创建的vue实例
export default context => {
   
  // 这里返回一个Promise，确保路由或组件准备就绪
  return new Promise((resolve, reject) => {
   
    const {
    app, router } = createApp(context);
    // 跳转到首屏的地址
    router.push(context.url);
    // 路由就绪，返回结果
    router.onReady(() => {
   
      resolve(app);
    }, reject);
  });
};