剖析 Vue SSR：用 Vuex 和 Vue-Router 实现手写简易服务端渲染

前端

2023-11-08 21:59:32

在当今快节奏的世界中，网站加载速度已成为影响用户体验和搜索引擎排名的关键因素。服务端渲染 (SSR) 便应运而生，它能显著缩短首屏加载时间，为用户提供无缝的浏览体验。

何谓服务端渲染？

服务端渲染是指在服务器端将应用程序渲染为完整的 HTML 页面，然后将该页面发送给客户端浏览器。与客户端渲染不同，客户端渲染是在浏览器中进行渲染的。

Vue SSR 的优势

提升 SEO 性能： 由于搜索引擎无法直接解析客户端 JavaScript，SSR 可以生成可被抓取的 HTML 页面，从而提高网站的搜索引擎可见性。
优化首屏加载速度： SSR 直接向浏览器发送渲染后的 HTML 页面，绕过浏览器解析和渲染 JavaScript 的过程，极大地加快了首屏加载时间。

Vuex 和 Vue-Router 在 SSR 中的作用

Vuex： Vuex 是一个状态管理库，用于在 SSR 应用程序中管理状态。它提供了一个集中式存储，使应用程序组件可以共享数据，无论它们是在服务器端还是客户端端渲染的。
Vue-Router： Vue-Router 是一个路由库，用于在 SSR 应用程序中管理导航。它允许您定义路由并指定每个路由对应的组件，使您能够轻松构建单页面应用程序。

手写简易 Vue SSR

以下步骤将指导您手动创建简单的 Vue SSR 应用程序：

安装依赖项：

npm install vue vue-server-renderer vue-router vuex

创建服务器端入口文件：

// server.js
import { createSSRApp } from 'vue'
import { createServerRenderer } from 'vue-server-renderer'
import App from './App.vue'
import createRouter from './router'
import createStore from './store'

const app = createSSRApp(App)
const router = createRouter()
const store = createStore()

router.push('/')

const renderer = createServerRenderer({
  renderToString: app.renderToString
})

app.mount('#app')

创建客户端入口文件：

// client.js
import { createApp } from 'vue'
import { createRouter } from './router'
import { createStore } from './store'
import App from './App.vue'

const app = createApp(App)
const router = createRouter()
const store = createStore()

router.push('/')

app.use(router)
app.use(store)

app.mount('#app')