下面是“Vue 服务端渲染SSR示例详解”的完整攻略。

Vue 服务端渲染SSR示例详解

什么是Vue 服务端渲染

在Web中，常用的前端框架可以分为两类：传统的客户端渲染（CSR）框架和服务端渲染（SSR）框架。传统的CSR框架（如Vue.js、React等）是指通过JavaScript动态地处理DOM元素的方式来渲染页面。而SSR框架是指在服务器端生成HTML页面，并将页面发送到客户端，避免了客户端渲染的一些弊端，如首次加载速度过慢、SEO不友好等。

Vue 服务端渲染是指在服务器端使用Vue.js的服务器端渲染引擎将Vue组件渲染为标准的HTML字符串，然后将HTML、CSS和JavaScript打包到一个完整的HTML页面中，最后将页面发送到客户端，以提高页面的首次加载速度和SEO友好度。

Vue 服务端渲染的优势

Vue 服务端渲染有以下优势：

加速首次加载速度：Vue 服务端渲染可以在服务器端生成完整的HTML页面，避免客户端网络请求和JavaScript的下载、解析、编译等时间，大大加快首次页面加载速度，提升用户体验。
更好的SEO：Vue 服务端渲染可以在服务器端生成完整的HTML页面，使得搜索引擎可以直接获取到页面的内容和关键字，提升SEO效果。

Vue 服务端渲染的实现

使用Vue.js实现服务端渲染需要遵循下面步骤：

使用Vue.js的服务器端渲染引擎将Vue组件渲染为HTML字符串。
在服务器中使用打包工具，将生成的HTML字符串、CSS和JavaScript打包成一个完整的HTML页面。
在服务器端启动一个HTTP服务器，将打包好的完整HTML页面发送到客户端。

Vue 服务端渲染示例

下面是两个使用Vue服务端渲染的示例：

示例一

<template>
  <div>
    <p>我是一个Vue组件</p>
    <p>当前时间: {{ time }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date().toLocaleString(),
    };
  },
};
</script>

在这个示例中，我们定义了一个服务端渲染的Vue组件，组件中包含了当前时间的展示。我们可以使用Vue.js的服务器端渲染引擎将这个组件渲染为HTML字符串。

const Vue = require("vue");
const renderer = require("vue-server-renderer").createRenderer();

const app = new Vue({
  template: `<div>
                <p>我是一个Vue组件</p>
                <p>当前时间: {{ time }}</p>
            </div>`,
  data() {
    return {
      time: new Date().toLocaleString(),
    };
  },
});

const html = await renderer.renderToString(app);

在这段代码中，我们使用了Vue.js的服务器端渲染引擎将Vue组件渲染为HTML字符串。具体地，我们使用了vue-server-renderer模块中的createRenderer方法创建一个渲染器，然后调用renderToString方法将Vue实例渲染为HTML字符串。

示例二

在这个示例中，我们将一个完整的Vue应用程序进行服务端渲染。我们可以在客户端渲染的基础上，稍加修改即可实现服务端渲染。

<template>
  <div>
    <p>我是一个Vue组件</p>
    <p>当前时间: {{ time }}</p>
    <button @click="onClick">点击我更新时间</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      time: new Date().toLocaleString(),
    };
  },
  methods: {
    async onClick() {
      const res = await axios.get("/get_time");
      this.time = res.data.time;
    },
  },
};
</script>

在这个示例中，我们新增了一个按钮，点击按钮后会从服务器端获取最新的时间并更新页面上的时间。我们的服务器端代码和客户端代码都是用的Node.js，我们可以在服务器端渲染时添加一个路由获取最新时间，并在客户端中注册一个路由来响应时间的更新。

const server = express();

server.get("/get_time", (req, res) => {
  res.send(JSON.stringify({ time: new Date().toLocaleString() }));
});

const renderer = require("vue-server-renderer").createRenderer({
  template: fs.readFileSync("./src/index.template.html", "utf-8"),
});

server.get("/", async (req, res) => {
  const app = await createApp(req.url);

  const context = {
    url: req.url,
  };

  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      res.status(500).end("Internal Server Error");
      return;
    }

    res.end(html);
  });
});

function createApp(url) {
  const router = createRouter();
  const store = createStore();

  const app = new Vue({
    router,
    store,
    template: `<div id="app"><router-view/></div>`,
  });

  return app;
}

在这个示例中，我们在服务器端添加了一个路由/get_time，用于获取最新的时间。在客户端代码中，我们可以将这个路由加入到Vue的路由配置中。

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/about",
      component: About,
    },
    {
      path: "/get_time",
      component: GetTime,
    },
  ],
});

这样一来，我们就可以实现服务端渲染，并在客户端注册相应的路由，使得我们的Vue应用程序可以支持路由切换和动态数据更新。同时，我们可以通过服务端渲染让我们的页面更快地加载，并有更好的SEO效果。