Vue基于NUXT的SSR详解

什么是SSR

SSR是指服务器端渲染(Server-side rendering)，是将Vue组件在服务器端渲染成HTML字符串，然后再将这个HTML字符串返回给浏览器端，浏览器接收到这个HTML字符串后进行解析，即可渲染出页面来。

相对于SPA（单页应用程序）的客户端渲染（CSR），SSR更加利于SEO，加快页面的渲染速度，提升用户体验。

NUXT介绍

NUXT是一个基于Vue.js生态的更高层次的框架，它为基于Vue.js的Web开发提供了许多大型项目所需的特性，比如服务器端渲染、生成静态站点等。

NUXT的特点

• 支持服务端渲染
• 支持静态站点生成
• 支持自动生成路由配置
• 支持自动代码分层，使得更好的组织应用结构
• 支持多种异步数据获取方式
• 支持对应用程序进行自动缓存，以提高应用性能
• 支持多种应用程序配置项的快速设置

对于构建大型应用程序，NUXT的服务端渲染和自动路由配置为开发者提供了巨大的便利。

NUXT对SSR的实现

NUXT基于Vue.js实现了基于服务器的渲染（server-side rendering），即SSR，提供了一个全新的方式来构建Vue.js应用程序。通过服务器端渲染，NUXT可以快速生成并返回静态HTML。如果需要在客户端交互，NUXT会在客户端提供vue.js和vuex.js等相关的组件。

NUXT的服务端渲染原理

• 服务器端响应请求，根据路由匹配到对应的页面组件
• 在服务器端渲染页面组件，并将渲染后的html字符串返回给浏览器端
• 在浏览器端激活该页面组件，并绑定事件和数据

NUXT的服务端渲染示例1

在components目录下定义HelloWorld组件：

<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello,world'
    }
  }
}
</script>

在pages目录下定义index.vue路由页面：

<template>
  <div>
    <h1>这是首页</h1>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}
</script>

在NUXT的配置文件nuxt.config.js中添加配置项，开启服务端渲染：

export default {
  target: 'server'
}

在终端中执行npm run dev命令启动开发服务器，并访问http://localhost:3000，可以看到页面在服务端已经完成渲染，页面源代码中已经存在我们定义的HelloWorld组件的内容。

NUXT的服务端渲染示例2

在api目录下定义project.js文件，用于模拟异步数据请求：

const getProject = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: { name: 'NUXT项目', id: 1 } })
    }, 1000)
  })
}

export default {
  getProject
}

在pages目录下定义project.vue路由页面，异步获取数据并在页面上展示：

<template>
  <div>
    <h1>{{ project.name }}</h1>
  </div>
</template>

<script>
import api from '@/api/project.js'

export default {
  async asyncData() {
    const project = await api.getProject()
    return { project: project.data }
  }
}
</script>

在访问浏览器路由/project时，服务端会异步获取数据并将完整页面返回给浏览器端，加快了页面的渲染速度。

参考资料

• NUXT.js官网：https://nuxtjs.org/
• Vue SSR Guide：https://ssr.vuejs.org/
• Vue.js官网：https://vuejs.org/