详解vue服务端渲染(SSR)初探

本文将详细讲解Vue服务端渲染(SSR)的核心概念、实现过程和优化技巧，帮助读者全面理解Vue SSR的工作原理和优化方法。

什么是Vue SSR？

Vue SSR是指将Vue组件在服务器端渲染成HTML字符串，然后再将该字符串发送给浏览器端进行解析和展示的技术。与客户端渲染(CSR)不同，Vue SSR可以让搜索引擎更好地解析网站内容，提高网站的SEO性能，同时也可以加快页面的首次渲染速度，提供更好的用户体验。

Vue SSR的实现过程主要包括以下几个步骤：

创建Vue实例
创建Vue路由
在服务器端渲染Vue组件
将渲染得到的HTML字符串发送给浏览器端
在浏览器端激活Vue组件

Vue SSR的优势和局限性

Vue SSR的优势主要包括：

改善SEO：由于搜索引擎爬取的是服务器端渲染出的HTML代码，可以提高网站的SEO性能。
首屏渲染速度优化：浏览器端只需要接收到服务器端渲染过的HTML字符串，可以大幅优化首屏加载速度。
缓解SPA应用页面多次请求的问题：通过服务器端渲染，可以在页面初始化时即将大部分HTML代码推送给浏览器端，减少后续SPA应用的请求负担。

Vue SSR的局限性主要包括：

开发成本高：与客户端渲染相比，Vue SSR需要在服务器端进行Vue组件的渲染，需要额外的服务器开销和服务端开发经验。
资源占用更多：由于服务器需要进行组件渲染，可能需要更多的CPU和内存资源。
对于某些特定组件的支持不完全：例如一些自定义组件或组件库，可能需要特殊的配置才能支持服务端渲染。

Vue SSR的实现

创建Vue实例

创建Vue实例和基本的Vue组件非常类似，只需要引入Vue组件库和Vue路由库，然后再将Vue实例挂载到服务器端的HTML模板中即可。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

const createApp = async () => {
  const app = new Vue({
    router,
    render: h => h(App)
  })

  return { app }
}

export default createApp

创建Vue路由

在创建Vue路由时，需要根据不同的URL地址来渲染不同的Vue组件。可以通过Vue路由来实现这一功能，同时也可以提高SPA应用开发的可维护性。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

export function createRouter() {
  return new VueRouter({
    mode: 'history',
    routes
  })
}

渲染Vue组件

在渲染Vue组件时，需要通过Vue SSR提供的renderToString方法将Vue组件渲染成HTML字符串，然后再将该字符串发送给浏览器端。

import { createApp } from './app'

const server = require('express')()

server.get('*', async (req, res) => {
  const { app } = await createApp()

  const context = { url: req.url }
  const html = await renderer.renderToString(app, context)

  res.end(html)
})

其中，context对象用来传递额外的参数和数据给Vue组件，例如选择不同的模板、传递异步数据等。

客户端激活Vue组件

在浏览器端接收到HTML字符串后，需要将字符串解析成DOM，并激活其中的Vue组件。

import { createApp } from './app'

const { app, router } = createApp()

router.onReady(() => {
  app.$mount('#app')
})

其中，onReady方法用来保证Vue路由已经加载完毕才进行组件的激活和挂载。

Vue SSR的优化

进行Vue SSR的优化可以从以下几个方面进行：

异步加载路由：可以提高服务器响应速度，同时减小Vue组件的体积，加快页面的首次渲染速度。
缓存组件：可以避免重复渲染同一组件，提高服务器性能。
预渲染部分页面：对于一些非常稳定的页面，例如商品详情页、营销页面，可以在服务器预渲染，并将渲染结果缓存到静态文件中，再通过CDN加速访问。
采用Node.js的Cluster模块：可以使用多核CPU来提高服务器性能，提升并发处理能力。

示例说明

以下是使用Vue SSR进行服务端渲染的示例：

示例1：简单的Vue SSR渲染

// server.js

const Vue = require('vue')
const server = require('express')()
const createRenderer = require('vue-server-renderer').createRenderer

server.get('*', async (req, res) => {
  const app = new Vue({
    data: {
      message: 'Hello, Vue SSR'
    },
    template: `<div>{{ message }}</div>`
  })

  const renderer = createRenderer()
  const html = await renderer.renderToString(app)

  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>Vue SSR App</title></head>
      <body>${html}</body>
    </html>
  `)
})

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000')
})

示例2：使用Vue Router进行SSR渲染

// server.js

const Vue = require('vue')
const server = require('express')()
const createRenderer = require('vue-server-renderer').createRenderer
const { createRouter } = require('./router')

server.get('*', async (req, res) => {
  const router = createRouter()

  router.push(req.url)

  const app = new Vue({
    router,
    data: {
      message: 'Hello, Vue SSR'
    },
    template: `
      <div>
        <h1>{{ message }}</h1>
        <router-view></router-view>
      </div>
    `
  })

  const renderer = createRenderer()
  const html = await renderer.renderToString(app)

  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>Vue SSR App</title></head>
      <body>${html}</body>
    </html>
  `)
})

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000')
})

// router.js

const Vue = require('vue')
const VueRouter = require('vue-router')

Vue.use(VueRouter)

exports.createRouter = () => {
  return new VueRouter({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: () => import('./pages/Home.vue')
      },
      {
        path: '/about',
        component: () => import('./pages/About.vue')
      }
    ]
  })
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解vue服务端渲染(SSR)初探 - Python技术站

详解vue服务端渲染(SSR)初探

详解vue服务端渲染(SSR)初探

什么是Vue SSR？

Vue SSR的优势和局限性

Vue SSR的实现

创建Vue实例

创建Vue路由

渲染Vue组件

客户端激活Vue组件

Vue SSR的优化

示例说明

示例1：简单的Vue SSR渲染

示例2：使用Vue Router进行SSR渲染

相关文章