首頁 > 文章 > web前端 > Vue3中的SSR函數：實作伺服器端渲染

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

WBOY原創: 2023-06-18 11:01:373650瀏覽

隨著行動互聯網的普及和雲端運算技術的快速發展，前端框架漸漸成為了WEB開發的主力。前端框架除了提供了方便的頁面結構、互動效果和動態內容展示外，還具有快速開發、可維護、效能優化等優點，大大提高了開發效率和使用者體驗。而Vue.js作為一款廣受歡迎的前端框架，其3.0版本正式發布，帶來了更多的創新與最佳化。其中，伺服器端渲染（Server Side Rendering，簡稱SSR）的實作是Vue3中的重要更新。

一、SSR的定義與優點

SSR是指在服務端完成頁面的渲染工作，而不是在客戶端使用JavaScript動態產生DOM樹，以達到快速提高頁面渲染速度和搜尋引擎優化的目的。傳統的SPA（Single Page Application）架構通常採用客戶端渲染模式，透過Vue.js在客戶端渲染的方式展示頁面，優點是動態互動性好，使用者體驗較好。但是，由於SPA只有在JavaScript下載和解析完成後才能展示頁面，因此會有頁面載入速度較慢、SEO不友善等問題。而SSR將伺服器端渲染後的HTML文件傳送到客戶端，不僅可以優化載入速度和SEO，還具備更好的初始渲染效能、可存取性、利於社群分享等優點。

二、Vue3中的SSR實作

Vue.js在2.0版本中提供了支援伺服器端渲染的方案，用於滿足一些特殊的需求場景。而在Vue3中，SSR得到了更完善的支持，其中核心就是createRenderer函數。下面，我們來一起來看看Vue3中的SSR實作。

安裝相關依賴

Vue3官方提供了@vue/server-renderer和@vue/compiler-sfc兩個核心依賴，前者用於產生HTML、CSS 、Script等資源，並將其轉為字串傳回。後者則提供了.vue檔的編譯和解析能力，可以將.vue檔轉換為渲染函數。

定義渲染函數

Vue3推薦使用render函數而不是template模板，可以透過createRenderer函數定義渲染函數。 createRenderer函數傳回了一個對象，其中包含了渲染函數和其他相關資訊。

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer();
const app = require('./app');

renderer.renderToString(app).then((html) => {
  console.log(html);
}).catch((err) => {
  console.error(err);
});

其中，app為Vue實例，需要先透過createApp函數來初始化，然後將其掛載到DOM元素上。接下來，就可以使用渲染函數對app進行渲染了。

建立路由器和容器元件

SSR下需要使用vue-router和vuex等工具，來支援不同路由對應的元件和狀態管理。在這之前，需要建立路由器和容器元件。

const { createRouter } = require('vue-router');
const App = require('./App.vue');

const router = createRouter({
  routes: [
    { path: '/', component: App }
  ]
});

編寫實作SSR的程式碼

const express = require('express');
const { createSSRApp } = require('vue');

const server = express();
const template = `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue3 SSR</title>
    </head>
    <body>
      <!--vue-ssr-outlet-->
    </body>
  </html>
`;

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer({
  template: template
});

server.use(express.static('dist'));

server.get('*', async (req, res) => {
  const app = createSSRApp(require('./src/App.vue'));
  const router = require('./src/router').default;
  app.use(router);
  const html = await renderer.renderToString(app);
  res.send(html);
});

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

在編寫實作SSR的程式碼時，需要建立一個express項目，並使用createSSRApp函數來建立Vue實例，然後將路由器、狀態管理、createRenderer函數等都整合在一起。

三、SSR的注意事項

在使用SSR實作頁面渲染時，需要注意以下幾點：

需要依賴各種外部資源，包括靜態資源、資料介面、資料庫、快取和檔案儲存等。同時，也為維運同學帶來更多的挑戰。
由於伺服器端渲染至少需要相當於渲染所需的時間，因此SSR的效能表現主要受到伺服器和網路頻寬的影響，而客戶端的效能從整體上不會有太大影響。
SSR需要將Vue元件轉換為字串格式進行渲染，因此需要Vue元件的轉換和編譯，這會帶來一定的消耗和編譯時間。

總之，SSR是一種比較新的技術，在性能和使用方面需要注意各種問題的處理，可以根據自身的需求進行技術選型和實際使用。尤其是在大型即時系統中，需要特別注意SSR的安全性、可維護性和效能等面向。

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

JavaScript 架构 css vue.js html 前端框架 express 字符串接口 JS 对象 dom 数据库搜索引擎性能优化 SEO

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Vue3中的defineAsyncComponent函數：非同步載入元件下一篇：Vue3中的defineAsyncComponent函數：非同步載入元件

看更多