快捷導(dǎo)航

基于Vue3實(shí)現(xiàn)SSR(服務(wù)端渲染)功能

更新時(shí)間：2024年11月17日 09:47:46 作者：JJCTO袁龍

在現(xiàn)代網(wǎng)頁(yè)開發(fā)中,用戶體驗(yàn)日益成為網(wǎng)站成功的重要因素,從加載時(shí)間到SEO優(yōu)化,越來越多的開發(fā)者開始關(guān)注使用服務(wù)端渲染（SSR）來提升應(yīng)用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實(shí)現(xiàn)這一功能,需要的朋友可以參考下

什么是服務(wù)端渲染（SSR）？

簡(jiǎn)單來說，服務(wù)端渲染是一種將網(wǎng)頁(yè)在服務(wù)器端生成 HTML 輸出的技術(shù)。相比于傳統(tǒng)的客戶端渲染（CSR），SSR 能夠在首次加載時(shí)提供完整的 HTML 標(biāo)記，這樣用戶花費(fèi)更少時(shí)間加載頁(yè)面，并能在搜索引擎中獲得更高的可見度。通過服務(wù)器直接生成并傳遞 HTML，SSR 還可以提高首屏渲染速度，降低用戶的感知延遲。

Vue 3 的 SSR 特性

Vue 3 在 SSR 上有了顯著改進(jìn)與優(yōu)化，將其分為兩個(gè)主要部分：

Vue 3 服務(wù)器入口：這是生成 HTML 的輸出，依賴于 Vue 的渲染函數(shù)。
Vue 3 客戶端重 hydration：它可在用戶加載頁(yè)面后提升用戶交互體驗(yàn)，通過在頁(yè)面加載后將用戶的交互轉(zhuǎn)移至 Vue 的組件上。

如何實(shí)現(xiàn) SSR

接下來，讓我們一步步實(shí)施 Vue 3 的 SSR。我們將創(chuàng)建一個(gè)簡(jiǎn)單的 Vue 應(yīng)用，并展示如何設(shè)置 SSR。

第一步：環(huán)境設(shè)置

首先，請(qǐng)確保你已經(jīng)安裝了 Node.js 和 npm。然后，我們開始創(chuàng)建一個(gè)新的 Vue 項(xiàng)目。打開終端并運(yùn)行：

npm init -y
npm install vue vue-server-renderer express

第二步：創(chuàng)建 Vue 應(yīng)用

在項(xiàng)目根目錄下創(chuàng)建一個(gè) src/ 文件夾，并在其中創(chuàng)建 app.js 文件：

// src/app.js
const { createSSRApp } = require('vue');

module.exports = function () {
  const app = createSSRApp({
    data: () => ({
      message: 'Hello, SSR with Vue 3!'
    }),
    template: `<div>{{ message }}</div>`
  });

  return { app };
};

這個(gè)簡(jiǎn)單的 Vue 應(yīng)用返回了一條消息。在 SSR 的情況下，應(yīng)用程序即將被服務(wù)器渲染，因此這是創(chuàng)建我們的 Vue 實(shí)例的方式。

第三步：創(chuàng)建服務(wù)器

接下來，我們需要?jiǎng)?chuàng)建一個(gè)服務(wù)器，以便將應(yīng)用渲染成 HTML，并將其發(fā)送到客戶端。在項(xiàng)目根目錄下創(chuàng)建 server.js 文件：

// server.js
const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('vue-server-renderer').createRenderer();
const appEntry = require('./src/app');

const server = express();

server.get('/', async (req, res) => {
  const { app } = appEntry();

  try {
    const html = await renderToString(app);
    res.send(`
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue 3 SSR Demo</title>
      </head>
      <body>
        <div id="app">${html}</div>
        <script src="/client.js"></script>
      </body>
      </html>
    `);
  } catch (error) {
    res.status(500).send('Server Error');
  }
});

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

在這個(gè)文件中，我們創(chuàng)建了一個(gè) Express 服務(wù)器，并在根路徑（/）時(shí)使用 renderToString 函數(shù)將 Vue 組件渲染為 HTML。需要注意的是，這里引入的 app 是我們之前創(chuàng)建的 Vue 應(yīng)用。

第四步：客戶端重渲染

為了讓 Vue 應(yīng)用程序在瀏覽器中變得活躍，我們需要?jiǎng)?chuàng)建客戶端 JavaScript 文件。在 src/ 文件夾下，創(chuàng)建一個(gè)新的 client.js 文件并加入以下內(nèi)容：

// src/client.js
import { createSSRApp } from 'vue';
import appEntry from './app';

const { app } = appEntry();
app.mount('#app');

這個(gè)文件創(chuàng)建了一個(gè)相同的 Vue 應(yīng)用，并把它掛載到我們?cè)?HTML 中創(chuàng)建的根元素上。

第五步：測(cè)試應(yīng)用

現(xiàn)在，我們已經(jīng)完成了 Vue 3 SSR 的實(shí)現(xiàn)，可以啟動(dòng)服務(wù)并測(cè)試應(yīng)用。在命令行中運(yùn)行以下命令：

node server.js

打開瀏覽器，訪問 http://localhost:3000，你將看到 “Hello, SSR with Vue 3!” 的消息顯示在頁(yè)面上，這個(gè)內(nèi)容是由服務(wù)器渲染的。

結(jié)論

Vue 3 的服務(wù)端渲染設(shè)置相對(duì)簡(jiǎn)單，能顯著提高應(yīng)用性能與用戶體驗(yàn)。我們通過一個(gè)簡(jiǎn)單的示例展示了如何設(shè)置基礎(chǔ)的 SSR 應(yīng)用，但在實(shí)際開發(fā)中，應(yīng)用可能會(huì)涉及路由、狀態(tài)管理等更多高級(jí)功能。

隨著 Vue 3 的流行與應(yīng)用場(chǎng)景的擴(kuò)展，SSR 在提升用戶體驗(yàn)和 SEO 方面的優(yōu)勢(shì)無疑使它成為開發(fā)者的首選解決方案。今后的網(wǎng)頁(yè)開發(fā)中，SSR 將會(huì)扮演更為重要的角色。

到此這篇關(guān)于基于Vue3實(shí)現(xiàn)SSR(服務(wù)端渲染)功能的文章就介紹到這了,更多相關(guān)Vue3實(shí)現(xiàn)SSR內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: