Vue 的 SSR 是什么？有什么好处？

Vue 3月前 133

Vue.js是一种流行的JavaScript框架，它用于构建单页面应用程序（SPA）。SPA应用程序运行在客户端上，通过JavaScript来处理路由和呈现页面。但是，在某些情况下，SPA可能会导致SEO问题、加载速度慢等问题。为了解决这些问题，Vue提供了一种叫做服务端渲染（Server-Side Rendering，SSR）的方式。

SSR是指将Vue应用程序在服务端上呈现为HTML，然后将所有需要的HTML发送给浏览器端。在浏览器端，浏览器将客户端应用程序“插入”到服务端渲染的HTML中。这样就可以解决很多SPA的问题，例如SEO优化以及更快的加载时间等等。

Vue SSR的好处很多。首先，它提高了SEO的效果。因为搜索引擎爬虫只能读取HTML，而不能执行JavaScript代码。这将导致搜索引擎错过很多SPA应用中的重要信息。使用SSR，你可以让浏览器生成多个已呈现的HTML页面，以便搜索引擎能够正确地抓取所有必要的信息。

其次，SSR可以提高页面加载速度。在SPA应用程序中，页面的首次加载需要在浏览器中下载相应的JavaScript和资源文件。这通常会导致较慢的加载时间，因为大量的下载和解析对于某些用户来说是不可行的。然而，在SSR中，HTML是在服务器上生成，并发送到浏览器，因此可以提供更快的加载时间和更好的性能。

最后，SSR可以提高页面的用户体验。当用户首次访问你的页面时，他们将看到一个完整的HTML页面，而不是在JavaScript处理之前都是空白的。这将导致更快的感知时间和更好的用户体验。

示例：

假设你有一个Vue应用程序，其中包含一个用于显示商品列表的组件。在SPA中，当用户访问产品页面时，JavaScript代码将从客户端侧拉取数据并动态渲染商品列表。这将导致加载时间变慢，用户必须等待直到组件完全加载并渲染完毕。

为了使用SSR，你可以将组件从客户端侧移到服务端。在服务端，你可以使用Node.js来呈现组件，生成HTML，并将它发送给客户端。当页面被加载时，客户端浏览器只需要展示服务端渲染的HTML，而不需要等待JavaScript下载完成。

例如，你可以使用Vue SSR来更新你的商品列表组件：

<template>
  <div>
    <h3>Products</h3>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  asyncData({ store }) {
    return store.dispatch('loadItems');
  },
  created() {
    this.items = this.$store.state.items;
  }
};
</script>