Vue.js 服务端渲染 + Vuex 打造单页面应用-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，单页面应用已经成为了一种非常流行的开发模式。Vue.js 作为一款优秀的前端框架，在单页面应用的开发中也表现出了非常出色的特点。但是，在单页面应用中，我们也会遇到一些问题，比如首屏加载时间过长、SEO 不友好等等。为了解决这些问题，我们可以采用服务端渲染的方式来优化单页面应用的开发。

本文将介绍如何使用 Vue.js 服务端渲染和 Vuex 打造一个单页面应用，并解决首屏加载时间过长和 SEO 不友好的问题。

什么是服务端渲染

服务端渲染（Server-Side Rendering，SSR）是指在服务器端将 HTML 模板和数据组装成完整的 HTML 页面，然后再将页面返回给客户端。相对于传统的客户端渲染（Client-Side Rendering，CSR），服务端渲染可以提高首屏加载速度和 SEO 友好度。

服务端渲染的优点：

首屏加载速度快：因为服务端渲染可以在服务器端将完整的 HTML 页面返回给客户端，所以首屏加载速度会比客户端渲染快很多。
SEO 友好：搜索引擎爬虫可以直接爬取渲染好的 HTML 页面，而不需要通过 JavaScript 去解析页面，所以可以提高 SEO 友好度。
更好的用户体验：因为首屏加载速度快，所以用户体验会更加流畅。

服务端渲染的缺点：

开发难度大：相对于客户端渲染，服务端渲染的开发难度会更大，需要考虑到服务器端和客户端两端的交互和数据同步。
服务器压力大：因为服务端需要在服务器端进行渲染，所以会增加服务器的压力。

服务端渲染的实现方式

Vue.js 服务端渲染可以采用两种方式实现：

基于 Node.js 的服务器端渲染（Server-Side Rendering with Node.js）
基于静态 HTML 文件的预渲染（Pre-rendering）

在这里我们介绍第一种方式，即基于 Node.js 的服务器端渲染。

基于 Node.js 的服务器端渲染需要用到两个库：

vue-server-renderer：该库可以将 Vue.js 组件渲染成 HTML 字符串，并且支持将渲染好的 HTML 字符串注入到模板中。
express：该库是一个常用的 Node.js Web 框架，用于处理 HTTP 请求和响应。

下面是一个基于 Node.js 的服务器端渲染的示例代码：

// javascriptcn.com 代码示例
const express = require('express')
const app = express()
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

app.get('*', (req, res) => {
  const vm = new Vue({
    data: {
      message: 'Hello, Vue.js!'
    },
    template: '<div>{{ message }}</div>'
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000')
})

在上面的代码中，我们创建了一个 Express 应用，并在该应用的路由中创建了一个 Vue 实例，并将该实例渲染成 HTML 字符串，然后将该字符串注入到 HTML 模板中，并将完整的 HTML 页面返回给客户端。

使用 Vuex 管理应用状态

在单页面应用中，数据状态管理是非常重要的一环。Vue.js 提供了一个非常好用的状态管理库 Vuex，可以帮助我们管理应用的状态。

Vuex 的核心概念包括：

State：应用的状态数据。
Mutation：用于修改 State 的方法。
Action：用于触发 Mutation 的方法。
Getter：用于获取 State 的计算属性。

下面是一个基于 Vuex 的状态管理的示例代码：

// javascriptcn.com 代码示例
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

export default store

在上面的代码中，我们创建了一个 Vuex 的 Store，包含了 State、Mutation、Action 和 Getter 四个核心概念。其中 State 表示应用的状态数据，Mutation 表示修改 State 的方法，Action 表示触发 Mutation 的方法，Getter 表示获取 State 的计算属性。我们可以在 Vue.js 的组件中通过 this.$store 访问到该 Store，并使用其中的 State、Mutation、Action 和 Getter。

使用 Vue.js 服务端渲染 + Vuex 打造单页面应用

现在我们已经了解了 Vue.js 服务端渲染和 Vuex 状态管理的基本概念，下面我们将介绍如何使用 Vue.js 服务端渲染 + Vuex 打造一个单页面应用。

首先，我们需要安装 Vue.js、Vue Router 和 Vuex：

npm install vue vue-router vuex

然后，我们创建一个 Vue.js 的组件 App.vue，用于渲染应用的主要内容：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ title }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    title() {
      return this.$store.getters.getTitle
    }
  }
}
</script>

在上面的代码中，我们使用了 Vue.js 的计算属性来获取应用的标题，该计算属性通过 Vuex 的 Getter 获取应用的标题。

然后，我们创建一个 Vue.js 的路由配置 router.js，用于配置应用的路由：

// javascriptcn.com 代码示例
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
]

export default new Router({
  mode: 'history',
  routes
})

在上面的代码中，我们使用了 Vue.js 的路由配置来配置应用的路由，其中 mode: 'history' 表示使用 HTML5 History API 来管理路由。

然后，我们创建一个 Vue.js 的状态管理配置 store.js，用于管理应用的状态：

// javascriptcn.com 代码示例
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    title: 'Vue.js SSR + Vuex SPA'
  },
  mutations: {
    setTitle(state, title) {
      state.title = title
    }
  },
  actions: {
    setTitle(context, title) {
      context.commit('setTitle', title)
    }
  },
  getters: {
    getTitle(state) {
      return state.title
    }
  }
})

export default store

在上面的代码中，我们使用了 Vuex 的状态管理来管理应用的标题，其中 State 表示应用的标题数据，Mutation 表示修改 State 的方法，Action 表示触发 Mutation 的方法，Getter 表示获取 State 的计算属性。

最后，我们创建一个基于 Node.js 的服务器端渲染的入口文件 server.js，用于启动服务器并渲染应用：

// javascriptcn.com 代码示例
const express = require('express')
const app = express()
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const router = require('./router')
const store = require('./store').default

app.use(express.static('dist'))

app.get('*', (req, res) => {
  const vm = new Vue({
    router,
    store,
    template: `
      <div id="app">
        <App />
      </div>
    `,
    components: {
      App: () => import('./App.vue')
    }
  })

  router.push(req.url)

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>${store.state.title}</title>
        </head>
        <body>${html}</body>
      </html>
    `)
  })
})

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000')
})

在上面的代码中，我们创建了一个基于 Node.js 的服务器端渲染的入口文件 server.js，其中我们使用了 Express 应用来处理 HTTP 请求和响应。在应用的路由配置和状态管理配置中，我们分别使用了 Vue Router 和 Vuex 来管理应用的路由和状态。在渲染页面时，我们使用了 Vue.js 的服务端渲染和 Vuex 来渲染应用的状态和组件，并将渲染好的 HTML 页面返回给客户端。

总结

本文介绍了如何使用 Vue.js 服务端渲染和 Vuex 打造一个单页面应用，并解决了首屏加载时间过长和 SEO 不友好的问题。在实现过程中，我们使用了 Express 应用来处理 HTTP 请求和响应，使用了 Vue Router 来管理应用的路由，使用了 Vuex 来管理应用的状态，同时还使用了 Vue.js 的服务端渲染来提高应用的首屏加载速度和 SEO 友好度。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6556f729d2f5e1655d1546d9