Vue SSR服務端渲染完全指南

Vue SSR服務端渲染是一種將Vue組件渲染為HTML字元串，並在伺服器上將其發送到客戶端的方式。Vue SSR服務端渲染具有許多優點，例如更好的SEO和更快的首次載入速度等。在本指南中，我們將深入了解Vue SSR服務端渲染以及如何使用Vue SSR服務端渲染來加快您的網站的渲染速度。

一、Vue服務端渲染框架

Vue服務端渲染框架是一個可降低網站載入速度的前沿技術。伺服器端將Vue組件渲染成HTML字元串，然後將HTML字元串返回給客戶端，客戶端再將HTML字元串渲染為DOM。Vue服務端渲染架框架主要包含以下幾個組件：

1、Vue.js：Vue.js是一個流行的JavaScript框架，它提供了一種組件化的方式構建Web應用程序。

2、Vue Server Renderer：Vue Server Renderer是Vue SSR服務端渲染的官方渲染器，它將Vue組件渲染為HTML字元串。

3、Vue Router：Vue Router是一個官方的Vue.js路由管理器，它可以用於構建SPA應用程序。

4、Vuex：Vuex是一個Vue.js狀態管理模式的實現，用於管理應用程序的狀態。

二、Vue服務端渲染

Vue服務端渲染是使用Vue.js和Vue Server Renderer將Vue組件渲染為HTML字元串並將其返回給客戶端的過程。Vue服務端渲染的主要優點是可以提高網站的SEO和載入速度。搜索引擎可以輕鬆地讀取HTML字元串並將其索引，從而提高您的網站在搜索結果中的排序。此外，客戶端需要渲染HTML字元串而不是等待JavaScript下載和執行，從而實現更快的首次載入速度。

使用Vue服務端渲染時，您的代碼必須滿足以下要求：

1、應用程序代碼必須是「可序列化」的，這意味著它能夠在伺服器端和客戶端之間傳遞。

2、您的組件必須有一個純函數render()，它接受一個createElement()函數作為其第一個參數，並返回虛擬DOM節點。該函數應儘可能簡單，因為它是在伺服器端上執行的。

3、您的組件在掛載之後必須用於伺服器端和客戶端，這意味著您需要在組件中處理不同的生命周期事件。

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

export default context => {
  const { url } = context;

  const app = new Vue({
    render: h => h(App, { props: { url } }),
  });

  return { app };
};

三、Vue3服務端渲染

Vue3服務端渲染是使用Vue3和Vue Server Renderer將Vue組件渲染為HTML字元串並將其返回給客戶端的過程。Vue3服務端渲染與Vue2有所不同，它需要使用@vue/server-renderer包中的createInjectFunction()函數作為模板生成函數。請注意，createRenderer()的調用也有所不同。

import { createSSRApp } from 'vue';
import { createRouter } from './router';
import App from './App.vue';
import { renderToString } from '@vue/server-renderer';

export default async context => {
  const router = createRouter();

  router.push(context.url);

  const app = createSSRApp(App);

  app.config.globalProperties.$url = context.url

  app.use(router);

  const html = await renderToString(app);

  return html;
};

四、Vue伺服器渲染

Vue伺服器渲染是一個基於Node.js編寫的伺服器，使用Vue Server Renderer將Vue組件渲染為HTML字元串，並將其返回給客戶端。在Vue伺服器渲染中，您可以通過NPM包管理器輕鬆地使用各種依賴項，並可以通過不同的模板引擎生成HTML字元串。

const express = require('express');

const { createRenderer } = require('vue-server-renderer');

const app = express();

const renderer = createRenderer();
app.get('/', async (req, res) => {
 const html = await renderer.renderToString({
 template: '
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/192494.html