Vue3中的SSR函數詳解：實作伺服器端渲染-Vue.js-PHP中文網

Vue3中的SSR函數詳解：實作伺服器端渲染

WBOY

發布： 2023-06-18 09:04:08

原創

5619 人瀏覽過

隨著前端技術的不斷發展，越來越多的網站開始嘗試採用伺服器端渲染（SSR）的方式加速頁面回應速度和改善SEO效果。而Vue3作為當下最熱門的前端框架之一，在其最新版本中也加入了對SSR的全面支持，本文將對Vue3中的SSR函數進行詳細的分析和講解。

一、什麼是SSR？

在正式介紹Vue3中的SSR函數之前，我們需要先了解什麼是伺服器端渲染（SSR）。簡單來說，SSR就是在伺服器端將Vue元件渲染成HTML字串，然後將該HTML字串傳送給瀏覽器來展示。相對於傳統的客戶端渲染（CSR）方式，SSR能夠提升首屏渲染速度，提升SEO效果與使用者體驗。

二、Vue3中的SSR函數

Vue3中提供了一組針對SSR的函數，其中包括createSSRApp、createRenderer和 renderToString。

createSSRApp

createSSRApp是Vue3中專門用來建立SSR應用程式的函數。和 createApp 的差異在於這個函數會傳回一個相對於服務端的應用程式實例，以及在建立這個應用程式實例時需要引入一個所謂的 context 上下文對象，這個對象包含了與渲染相關的內容，例如頁面 URL、請求 headers 等。

createRenderer

createRenderer 是用來建立一個渲染器的函數，可以接受一個參數，這個參數是一個 RenderOptions 物件。這個物件裡面封裝了關於渲染器的相關配置，例如將應用的實例傳入這裡啟動，如何分別處理不同種類的 vnode 等。

renderToString

renderToString 是對應於這個 SSR 應用程式的 render 函數。這個函數只接受一個 Vue 應用實例作為參數，如果要渲染多個應用實例則需要依序呼叫。這個函數的回傳值，也就是渲染的結果字串。

三、實作伺服器端渲染

以上三個函數是Vue3中用來支援SSR的核心函數，接下來我們將透過一個簡單的範例來展示如何使用它們來實現伺服器端渲染。

我們假設我們有一個簡單的Vue元件如下：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3 SSR!'
    }
  }
}
</script>

登入後複製

我們需要先修改一下入口文件，用createSSRApp函數來創建我們的應用實例：

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

登入後複製

然後我們需要建立一個renderer，來對Vue實例進行渲染：

import { createRenderer } from 'vue'
import { createMemoryHistory, createRouter, RouterView } from 'vue-router'
import { renderToString } from '@vue/server-renderer'
import { createApp } from './main'

const renderer = createRenderer({
  history: createMemoryHistory(),
  renderOptions: {
    head: `
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    `
  }
})

const router = createRouter({
  history: createMemoryHistory(),
  routes: [{ path: '/', component: RouterView }]
})

async function render() {
  const { app } = await createApp()
  const html = await renderer.renderToString(router)
  return `<html><body>${html}</body></html>`
}

登入後複製

我們引入了vue-server-renderer中的createRenderer函數，並且建立了router實例。接下來，我們需要將App.vue檔案裡的資料預先填好，確保伺服器端渲染出來的HTML字串資料和客戶端渲染時是相同的。我們可以透過在伺服器端請求時，先將先前渲染的結果寫入頁面中，再傳到客戶端渲染即可。

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  const initialState = window.__INITIAL_STATE__
  if (initialState) {
    app.$data = initialState
  }
  return { app }
}

登入後複製

最後，我們將渲染出來的HTML字串回傳給客戶端即可。

import express from 'express'
import { render } from './server'

const app = express()

app.get('*', async (req, res) => {
  const html = await render(req.url)
  res.send(html)
})

const PORT = 3000
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`)
})

登入後複製

以上就是一個簡單的Vue3伺服器端渲染的實作範例。

四、總結

本文介紹了Vue3中的SSR函數，並透過一個簡單的範例介紹如何使用這些函數來實現伺服器端渲染。相信透過本文的介紹，讀者已經可以對Vue3中的SSR函數有一個較為清晰的認識，並且可以透過它們來實現自己的伺服器端渲染應用。

以上是Vue3中的SSR函數詳解：實作伺服器端渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！