Vue 服务端渲染 · Vue.js教程

在开始服务端渲染前，我们先看看它能给我们带来什么，以及什么时候需要用它。

谷歌和Bing可以很好地索引同步的Javascript应用。同步在这里是个关键词。如果应用启动时有一个加载动画，然后内容通过ajax获取，那爬虫不会等待他们加载完成。

这意味着在异步获取内容的页面上很需要进行搜索引擎优化的时候，服务端渲染就很重要。

用户可能在网络比较慢的情况下从远处访问网站 - 或者通过比较差的带宽。 这些情况下，尽量减少页面请求数量，来保证用户尽快看到基本的内容。

可以用 Webpack的代码拆分 避免强制用户下载整个单页面应用，但是，这样也远没有下载个单独的预先渲染过的HTML文件性能高。

对于世界上的一些地区人，可能只能用1998年产的电脑访问互联网的方式使用计算机。而Vue只能运行在IE9以上的浏览器，你可以也想为那些老式浏览器提供基础内容 - 或者是在命令行中使用 Lynx的时髦的黑客。

如果你只是用服务端渲染来改善一个少数的营销页面（如 首页，关于，联系 等等）的SEO，那你可以用预渲染替换。预渲染不像服务器渲染那样即时编译HTML,预渲染只是在构建时为了特定的路由生成特定的几个静态页面。其优势是预渲染的设置更加简单，可以保持前端是一个完整的静态站。

你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染，它被广泛地用在Vue应用上 - 事实上，创建者也是Vue核心团队成员之一。

准备在行动中体验服务端渲染吧。服务端渲染(即SSR)听起来很复杂，不过一个简单的Node脚本只需要3步就可以实现这个功能:

// 步骤 1:创建一个Vue实例
var Vue = require('vue')
var app = new Vue({
  render: function (h) {
    return h('p', 'hello world')
  }
})

// 步骤 2: 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()

// 步骤 3: 将 Vue实例 渲染成 HTML

renderer.renderToString(app, function (error, html) {
  if (error) throw error
  console.log(html)
  // => 
hello world
})

这并不困难。当然这个示例比大部分应用都简单。我们不必担心：

一个Web服务器

流式响应

组件缓存

构建过程

路由

Vuex状态管理

这个指南的其余部分，我们将探讨这些功能怎样运作。一旦你理解了基础，我们会提供更多细节和进一步的示例来帮助你解决意外情况。

如果没有一个Web服务器，很难说是服务端渲染，所以我们来补充它。我们将构建一个非常简单的服务端渲染应用，只用ES5，也不带其他构建步骤或Vue插件。

启动一个应用告诉用户他们在一个页面上花了多少时间。

new Vue({
  template: '你已经在这花了 {{ counter }} 秒。',
  data: {
    counter: 0
  },
  created: function () {
    var vm = this
    setInterval(function () {
      vm.counter += 1
    }, 1000)
  }
})

为了适应服务端渲染，我们需要进行一些修改，让它可以在浏览器和Node中渲染：

在浏览器中，将我们的应用实例添加到全局上下文（ window）上,我们可以安装它。

在Node中，导出一个工厂函数让我们可以为每个请求创建应用实例。

实现这个需要一点模板：

// assets/app.js
(function () { 'use strict'
  var createApp = function () {
    // ---------------------
    // 开始常用的应用代码
    // ---------------------

    // 主要的Vue实例必须返回，并且有一个根节点在id "app"上，这样客户端可以加载它。

    return new Vue({
      template: '你已经在这花了 {{ counter }} 秒。',
      data: {
        counter: 0
      },
      created: function () {
        var vm = this
        setInterval(function () {
          vm.counter += 1
        }, 1000)
      }
    })

    // -------------------
    // 结束常用的应用代码
    // -------------------
  }
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = createApp
  } else {
    this.app = createApp()
  }
}).call(this)

现在有了应用代码，接着加一个 html文件。

  
  

					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/zaji/3012936.html