Vue 3深度探索：自定義渲染器與服務端渲染

Amd794發表於2024-06-14

Vue服務端

title: Vue 3深度探索：自定義渲染器與服務端渲染
date: 2024/6/14
updated: 2024/6/14
author: cmdragon

excerpt:
這篇文章介紹瞭如何在Vue框架中實現自定義渲染器以增強元件功能，探討了虛擬DOM的工作原理，以及如何透過SSR和服務端預取資料最佳化首屏載入速度。同時，講解了同構應用的開發方式與狀態管理技巧，助力構建高效能前端應用。

categories:

前端開發

tags:

自定義渲染
虛擬DOM
Vue框架
SSR服務端渲染
同構應用
資料預取
狀態管理

掃碼關注或者微信搜一搜：程式設計智域前端至全棧交流與成長

Vue 3基礎回顧

Vue 3簡介

Vue.js是一個漸進式JavaScript框架，用於構建使用者介面。Vue 3是Vue.js的第三個主要版本，它在2020年釋出，帶來了許多新特性和改進，旨在提高效能、可維護性和可擴充套件性。

Vue 3的新特性

組合式API：Vue 3引入了組合式API，允許開發者以函式式的方式組織元件邏輯，提高了程式碼的可重用性和可維護性。
效能提升：Vue 3透過使用Proxy代替Object.defineProperty來實現響應式系統，提高了資料變更的檢測效率，從而提升了效能。
Tree-shaking支援：Vue 3支援Tree-shaking，這意味著最終打包的應用只包含實際使用的功能，減少了應用體積。
更好的TypeScript支援：Vue 3提供了更好的TypeScript支援，使得型別推斷和程式碼提示更加準確。
自定義渲染器：Vue 3允許開發者建立自定義渲染器，使得Vue可以在不同的平臺和環境中執行，如WebGL或Node.js。

響應式系統的改進

Vue 3的響應式系統基於Proxy物件，它能夠攔截物件屬性的讀取和設定操作，從而實現更加高效和精確的依賴跟蹤。與Vue 2相比，Vue
3的響應式系統在初始化和更新時更加高效，減少了不必要的效能開銷。

Vue 3的核心概念

組合式API：透過setup函式，開發者可以定義元件的響應式狀態和邏輯，並使用Composition API提供的函式來組織程式碼。
響應式資料與副作用：Vue 3使用Proxy來建立響應式物件，當這些物件的屬性被訪問或修改時，Vue會自動追蹤依賴，並在資料變化時觸發相應的副作用。
生命週期鉤子：Vue 3保留了Vue 2的生命週期鉤子，並允許在setup函式中訪問它們，以便在元件的不同階段執行特定的邏輯。

探索Vue 3渲染機制

Vue 3的渲染流程

Vue 3的渲染流程主要包括以下幾個步驟：

初始化：建立Vue例項時，會進行初始化操作，包括設定響應式資料、註冊元件、掛載DOM等。
模板編譯：如果使用模板語法，Vue會將其編譯成渲染函式。
虛擬DOM：根據渲染函式生成虛擬DOM。
渲染：將虛擬DOM渲染到真實的DOM中。
更新：當資料變化時，Vue會重新生成虛擬DOM，並與上一次的虛擬DOM進行對比，計算出實際需要變更的最小操作，然後更新DOM。

模板編譯

cmdragon's Blog
Vue 3的模板編譯器負責將模板字串轉換為渲染函式。這個過程包括解析模板、最佳化靜態節點、生成程式碼等步驟。
以下是Vue 3模板編譯器的主要步驟：

1. 解析（Parsing）

解析階段將模板字串轉換為抽象語法樹（AST）。AST是一個物件樹，它精確地表示了模板的結構，包括標籤、屬性、文字節點等。Vue
3使用了一個基於HTML解析器的自定義解析器，它能夠處理模板中的各種語法，如插值、指令、事件繫結等。

2. 最佳化（Optimization）

最佳化階段遍歷AST，並標記出其中的靜態節點和靜態根節點。靜態節點是指那些在渲染過程中不會發生變化的節點，如純文字節點。靜態根節點是指包含至少一個靜態子節點且自身不是靜態節點的節點。標記靜態節點和靜態根節點可以避免在後續的更新過程中對它們進行不必要的重新渲染。

3. 程式碼生成（Code Generation）

程式碼生成階段將最佳化後的AST轉換為渲染函式。這個渲染函式是一個JavaScript函式，它使用Vue的虛擬DOM庫來建立虛擬節點。渲染函式通常會使用with
語句來簡化對元件例項資料的訪問。程式碼生成器會生成一個渲染函式的字串表示，然後透過new Function或Function
建構函式將其轉換為可執行的函式。

示例程式碼

以下是一個簡化的模板編譯過程示例：

const template = `<div>Hello, {{ name }}</div>`;

// 解析
const ast = parse(template);

// 最佳化
optimize(ast);

// 程式碼生成
const code = generate(ast);

// 建立渲染函式
const render = new Function(code);

// 使用渲染函式
const vnode = render({ name: 'Vue' });

在這個示例中，我們首先解析模板字串以建立AST，然後最佳化AST，最後生成渲染函式的程式碼。生成的程式碼被轉換為一個渲染函式，該函式接受一個包含元件資料的物件，並返回一個虛擬節點。

虛擬DOM

虛擬DOM（Virtual DOM）是現代前端框架中常用的技術，Vue.js
也是其中之一。虛擬DOM的核心思想是使用JavaScript物件來模擬DOM結構，並透過對比新舊虛擬DOM的差異來最小化對真實DOM的操作，從而提高效能。

虛擬DOM的優勢

效能最佳化：透過比較新舊虛擬DOM的差異，只對必要的DOM進行更新，減少不必要的DOM操作，從而提高效能。
跨平臺：虛擬DOM可以在不同的平臺上執行，因為它不依賴於特定的DOM API。
開發效率：開發者可以更專注於業務邏輯，而不必擔心DOM操作的細節。

虛擬DOM的工作原理

建立虛擬DOM：當元件渲染時，Vue會根據模板和資料建立一個虛擬DOM物件。
比較新舊虛擬DOM：當資料發生變化時，Vue會重新渲染元件，並建立一個新的虛擬DOM物件。然後，Vue會對比新舊虛擬DOM的差異。
更新真實DOM：根據新舊虛擬DOM的差異，Vue會計算出最小化的DOM操作，並應用到真實DOM上。

示例程式碼

以下是一個簡化的虛擬DOM更新過程的示例：

// 假設有一個虛擬DOM物件
const oldVnode = {
  tag: 'div',
  children: [
    { tag: 'span', text: 'Hello' }
  ]
};

// 假設資料發生變化，需要更新虛擬DOM
const newVnode = {
  tag: 'div',
  children: [
    { tag: 'span', text: 'Hello, Vue!' }
  ]
};

// 比較新舊虛擬DOM的差異，並更新真實DOM
patch(oldVnode, newVnode);

在這個示例中，我們首先建立了一箇舊的虛擬DOM物件，然後建立了一個新的虛擬DOM物件。接著，我們呼叫patch
函式來比較新舊虛擬DOM的差異，並更新真實DOM。

渲染函式

渲染函式（Render Function）是Vue.js中用於建立虛擬DOM的一種方式，它是Vue元件的核心。渲染函式允許開發者以程式設計的方式直接操作虛擬DOM，從而提供更高的靈活性和控制力。

渲染函式的基本概念

渲染函式是一個函式，它接收一個createElement函式作為引數，並返回一個虛擬DOM節點（VNode）。createElement
函式用於建立虛擬DOM節點，它接受三個引數：

tag：字串或元件，表示節點的標籤或元件。
data：物件，包含節點的屬性、樣式、類名等。
children：陣列，包含子節點。

渲染函式的示例

以下是一個簡單的Vue元件，它使用渲染函式來建立一個包含文字的div元素：

Vue.component('my-component', {
  render(createElement) {
    return createElement('div', 'Hello, Vue!');
  }
});

在這個示例中，render函式接收createElement作為引數，並返回一個虛擬DOM節點。這個節點是一個div
元素，包含文字Hello, Vue!。

渲染函式與模板語法的區別

Vue提供了兩種方式來定義元件的渲染邏輯：渲染函式和模板語法。模板語法更加簡潔和易於理解，而渲染函式提供了更高的靈活性和控制力。

模板語法：開發者可以使用HTML-like的模板來定義元件的渲染邏輯，Vue會將其編譯成渲染函式。
渲染函式：開發者可以直接編寫渲染函式來定義元件的渲染邏輯，從而提供更高的靈活性和控制力。

渲染函式的優勢

靈活性：渲染函式允許開發者以程式設計的方式直接操作虛擬DOM，從而提供更高的靈活性和控制力。
效能最佳化：渲染函式可以更精確地控制虛擬DOM的建立和更新，從而提高效能。
跨平臺：渲染函式可以在不同的平臺上執行，因為它不依賴於特定的DOM API。

自定義渲染器基礎

Vue 3允許開發者建立自定義渲染器，以便在不同的平臺和環境中執行Vue。自定義渲染器需要實現一些基本的API，如建立元素、設定屬性、掛載子節點等。

渲染器架構

Vue 3的渲染器架構包括以下幾個部分：

渲染器例項：負責管理渲染過程，包括建立元素、設定屬性、掛載子節點等。
渲染器API：提供了一系列的API，用於建立自定義渲染器。
渲染器外掛：允許開發者擴充套件渲染器的功能。

渲染器API

Vue 3提供了以下渲染器API：

render：渲染函式，負責生成虛擬DOM。
createRenderer：建立自定義渲染器的函式。
createElement：建立虛擬DOM元素的函式。
patch：更新虛擬DOM的函式。
unmount：解除安裝虛擬DOM的函式。

示例：建立一個簡單的自定義渲染器

以下是一個簡單的自定義渲染器的示例程式碼：

import {createRenderer} from 'vue';

const renderer = createRenderer({
    createElement(tag) {
        return document.createElement(tag);
    },
    setElementText(el, text) {
        el.textContent = text;
    },
    patchProp(el, key, prevValue, nextValue) {
        if (key === 'textContent') {
            el.textContent = nextValue;
        } else {
            el.setAttribute(key, nextValue);
        }
    },
    insert(el, parent, anchor = null) {
        parent.insertBefore(el, anchor);
    },
    createText(text) {
        return document.createTextNode(text);
    },
    setText(el, text) {
        el.nodeValue = text;
    },
    createComment(text) {
        return document.createComment(text);
    },
    setComment(el, text) {
        el.nodeValue = text;
    },
    parentNode(node) {
        return node.parentNode;
    },
    nextSibling(node) {
        return node.nextSibling;
    },
    remove(node) {
        const parent = node.parentNode;
        if (parent) {
            parent.removeChild(node);
        }
    }
});

export function render(vnode, container) {
    renderer.render(vnode, container);
}

透過這個示例，我們可以看到如何使用Vue 3的渲染器API來建立一個簡單的自定義渲染器。這個渲染器可以在不同的平臺和環境中執行Vue，例如在Node.js中渲染Vue元件。

構建高階自定義渲染器

在Vue 3中，構建一個高階自定義渲染器涉及到實現一系列核心API，如createElement、patchProp、insert、remove
等。以下是詳細的步驟和程式碼示例。

1. 實現 `createElement`

createElement函式負責建立新的DOM元素或元件例項。在Web環境中，這通常意味著建立一個HTML元素。

function createElement(type, isSVG, vnode) {
  const element = isSVG
    ? document.createElementNS('http://www.w3.org/2000/svg', type)
    : document.createElement(type);
  return element;
}

2. 實現 `patchProp`

patchProp函式用於更新元素的屬性。這包括設定屬性值、繫結事件監聽器等。

function patchProp(el, key, prevValue, nextValue) {
  if (key === 'class') {
    el.className = nextValue || '';
  } else if (key === 'style') {
    if (nextValue) {
      for (let style in nextValue) {
        el.style[style] = nextValue[style];
      }
    }
  } else if (/^on[^a-z]/.test(key)) {
    const event = key.slice(2).toLowerCase();
    if (prevValue) {
      el.removeEventListener(event, prevValue);
    }
    if (nextValue) {
      el.addEventListener(event, nextValue);
    }
  } else {
    if (nextValue === null || nextValue === false) {
      el.removeAttribute(key);
    } else {
      el.setAttribute(key, nextValue);
    }
  }
}

3. 實現 `insert`

insert函式用於將元素插入到DOM中的指定位置。

function insert(el, parent, anchor = null) {
  parent.insertBefore(el, anchor);
}

4. 實現 `remove`

remove函式用於從DOM中移除元素。

function remove(el) {
  const parent = el.parentNode;
  if (parent) {
    parent.removeChild(el);
  }
}

5. 實現 `createText` 和 `setText`

這兩個函式用於處理文字節點。

function createText(text) {
  return document.createTextNode(text);
}

function setText(el, text) {
  el.nodeValue = text;
}

6. 實現 `render` 函式

render函式是Vue元件的核心渲染函式，它使用上述API來渲染元件。

function render(vnode, container) {
  if (vnode) {
    patch(container._vnode || null, vnode, container);
  } else {
    if (container._vnode) {
      unmount(container._vnode);
    }
  }
  container._vnode = vnode;
}

function patch(n1, n2, container, anchor = null) {
  if (n1 && n1.type !== n2.type) {
    unmount(n1);
    n1 = null;
  }

  const { type } = n2;
  if (typeof type === 'string') {
    if (!n1) {
      mountElement(n2, container, anchor);
    } else {
      patchElement(n1, n2);
    }
  } else if (type === Text) {
    if (!n1) {
      const el = (n2.el = createText(n2.children));
      insert(el, container);
    } else {
      const el = (n2.el = n1.el);
      if (n2.children !== n1.children) {
        setText(el, n2.children);
      }
    }
  }
}

function mountElement(vnode, container, anchor) {
  const el = (vnode.el = createElement(vnode.type, vnode.props.isSVG));
  for (const key in vnode.props) {
    if (key !== 'children') {
      patchProp(el, key, null, vnode.props[key]);
    }
  }
  if (typeof vnode.children === 'string') {
    setText(el, vnode.children);
  } else if (Array.isArray(vnode.children)) {
    vnode.children.forEach(child => {
      patch(null, child, el);
    });
  }
  insert(el, container, anchor);
}

function patchElement(n1, n2) {
  const el = (n2.el = n1.el);
  const oldProps = n1.props;
  const newProps = n2.props;

  for (const key in newProps) {
    if (newProps[key] !== oldProps[key]) {
      patchProp(el, key, oldProps[key], newProps[key]);
    }
  }
  for (const key in oldProps) {
    if (!(key in newProps)) {
      patchProp(el, key, oldProps[key], null);
    }
  }

  patchChildren(n1, n2, el);
}

function patchChildren(n1, n2, container) {
  if (typeof n2.children === 'string') {
    if (Array.isArray(n1.children)) {
      n1.children.forEach(c => unmount(c));
    }
    setText(container, n2.children);
  } else if (Array.isArray(n2.children)) {
    if (Array.isArray(n1.children)) {
      // diff演算法實現
    } else {
      setText(container, '');
      n2.children.forEach(c => patch(null, c, container));
    }
  }
}

function unmount(vnode) {
  if (vnode.type === Text) {
    const el = vnode.el;
    remove(el);
  } else {
    removeChildren(vnode);
  }
}

function removeChildren(vnode) {
  const el = vnode.el;
  for (let i = 0; i < el.childNodes.length; i++) {
    unmount(vnode.children[i]);
  }
}

7. 處理事件和屬性

在自定義渲染器中，我們需要處理元素的事件監聽和屬性更新。這通常涉及到新增和移除事件監聽器，以及更新元素的屬性。

function patchProp(el, key, prevValue, nextValue) {
  if (key === 'class') {
    el.className = nextValue || '';
  } else if (key === 'style') {
    if (nextValue) {
      for (let style in nextValue) {
        el.style[style] = nextValue[style];
      }
    } else {
      el.removeAttribute('style');
    }
  } else if (/^on[^a-z]/.test(key)) {
    const event = key.slice(2).toLowerCase();
    if (prevValue) {
      el.removeEventListener(event, prevValue);
    }
    if (nextValue) {
      el.addEventListener(event, nextValue);
    }
  } else {
    if (nextValue === null || nextValue === false) {
      el.removeAttribute(key);
    } else {
      el.setAttribute(key, nextValue);
    }
  }
}

8. 自定義指令

自定義指令允許我們擴充套件Vue的功能，使其能夠處理特定的DOM操作。在自定義渲染器中，我們需要在元素上註冊和呼叫這些指令。

function mountElement(vnode, container, anchor) {
  const el = (vnode.el = createElement(vnode.type, vnode.props.isSVG));
  for (const key in vnode.props) {
    if (key !== 'children' && !/^on[^a-z]/.test(key)) {
      patchProp(el, key, null, vnode.props[key]);
    }
  }
  // 處理自定義指令
  for (const key in vnode.props) {
    if (key.startsWith('v-')) {
      const directive = vnode.props[key];
      if (typeof directive === 'function') {
        directive(el, vnode);
      }
    }
  }
  // ... 其他程式碼
}

9. 插槽和元件渲染

插槽允許我們封裝可重用的模板，而元件渲染則涉及到遞迴地渲染元件樹。在自定義渲染器中，我們需要處理這些情況。

function patchElement(n1, n2) {
  const el = (n2.el = n1.el);
  // ... 屬性更新程式碼
  if (typeof n2.children === 'function') {
    // 處理插槽
    const slotContent = n2.children();
    patchChildren(n1, slotContent, el);
  } else {
    // ... 其他程式碼
  }
}

function mountComponent(vnode, container, anchor) {
  const component = {
    vnode,
    render: () => {
      const subtree = renderComponent(vnode);
      patch(null, subtree, container, anchor);
    }
  };
  vnode.component = component;
  component.render();
}

function renderComponent(vnode) {
  const { render } = vnode.type;
  const subtree = render(vnode.props);
  return subtree;
}

總結

透過實現上述API，我們構建了一個基本的自定義渲染器。這個渲染器可以處理基本的DOM操作，如建立元素、更新屬性、插入和移除元素。為了構建一個完整的高階自定義渲染器，還需要實現更復雜的邏輯，如處理元件的生命週期、狀態管理、非同步渲染等。這些高階特性需要深入理解Vue的內部機制和渲染流程。

虛擬DOM的最佳化策略

批次更新（Batch Updates） ：將多個更新操作合併成一個，減少重渲染的次數。Vue透過響應式系統自動進行批次更新，但在自定義渲染器中，我們需要手動實現這一機制。
列表重用（List Reuse） ：當列表項發生變化時，儘可能重用已有的DOM節點，而不是銷燬並重新建立。這可以透過key屬性來實現，確保每個節點都有唯一的標識。
最小化DOM操作：在更新虛擬DOM樹時，儘量減少實際的DOM操作。例如，使用CSS類名切換來改變樣式，而不是直接操作內聯樣式。
避免不必要的渲染：使用shouldComponentUpdate或React.memo
（在React中）來避免不必要的元件渲染。在Vue中，可以使用v-once指令來標記靜態內容，使其只渲染一次。

渲染器的效能考量

快速路徑（Fast Path） ：對於簡單的更新，如文字節點的替換，渲染器應該有一條快速路徑，避免複雜的diff演算法。
高效的diff演算法：渲染器應該實現高效的diff演算法，如React的Fiber架構，它允許增量渲染和優先順序排程。
非同步渲染（Async Rendering） ：
將渲染任務分解成小塊，並在空閒時間執行，以避免阻塞主執行緒。這可以透過requestIdleCallback或requestAnimationFrame來實現。
記憶體管理：渲染器應該有效地管理記憶體，避免記憶體洩漏。例如，及時清理不再使用的虛擬DOM節點和相關資料。
最佳化事件處理：使用事件委託來減少事件監聽器的數量，或者使用passive: true來最佳化滾動事件的效能。

示例程式碼

以下是一個簡化的批次更新示例，展示瞭如何在自定義渲染器中實現效能最佳化：

let isBatchingUpdate = false;

function queueUpdate(fn) {
  if (!isBatchingUpdate) {
    fn();
  } else {
    pendingUpdates.push(fn);
  }
}

function startBatch() {
  isBatchingUpdate = true;
}

function endBatch() {
  isBatchingUpdate = false;
  while (pendingUpdates.length) {
    const fn = pendingUpdates.shift();
    fn();
  }
}

// 使用示例
startBatch();
updateComponent1();
updateComponent2();
endBatch();

在這個示例中，我們透過startBatch和endBatch來控制批次更新，確保多個更新操作在一次重渲染中完成。

SSR概述

服務端渲染（Server-Side
Rendering，SSR）是一種在伺服器上生成HTML內容的技術。當使用者請求一個頁面時，伺服器會生成完整的HTML頁面，並將其傳送到使用者的瀏覽器。使用者瀏覽器接收到HTML頁面後，可以直接顯示頁面內容，而不需要等待JavaScript執行完成。SSR的主要目的是提高首屏載入速度，改善SEO（搜尋引擎最佳化），以及提供更好的使用者體驗。

SSR的優勢與挑戰

優勢：

首屏載入速度快：伺服器直接傳送完整的HTML頁面，減少了客戶端的渲染時間。
SEO友好：搜尋引擎可以直接抓取到完整的頁面內容，有利於SEO。
使用者體驗：對於網路環境較差的使用者，可以更快地看到頁面內容。

挑戰：

開發複雜度增加：需要考慮伺服器和客戶端的程式碼共享和狀態同步。
伺服器壓力：伺服器需要處理更多的渲染邏輯，可能會增加伺服器的負載。
快取策略：需要設計合理的快取策略來提高效能。

同構應用

同構應用是指既可以在伺服器上執行，也可以在客戶端執行的JavaScript應用。同構應用結合了服務端渲染和客戶端渲染的優勢，可以在伺服器上生成HTML內容，同時在客戶端進行互動。

同構應用的關鍵特性包括：

程式碼共享：伺服器和客戶端使用相同的JavaScript程式碼。
狀態同步：伺服器和客戶端需要同步應用的狀態。
路由處理：伺服器和客戶端需要處理路由，確保頁面正確渲染。

同構應用的優勢：

開發效率高：可以複用程式碼，減少開發工作量。
效能最佳化：可以根據不同的環境進行最佳化。
使用者體驗好：可以提供快速的首屏載入和流暢的互動體驗。

同構應用的挑戰：

開發複雜度增加：需要考慮伺服器和客戶端的程式碼共享和狀態同步。
伺服器壓力：伺服器需要處理更多的渲染邏輯，可能會增加伺服器的負載。
快取策略：需要設計合理的快取策略來提高效能。

構建SSR應用

配置Vue SSR（服務端渲染）通常涉及以下幾個關鍵步驟：

專案設定：
- 使用Vue CLI建立一個新專案，或者將現有的Vue專案轉換為支援SSR。
- 安裝必要的SSR依賴，如vue-server-renderer。
伺服器端入口：
- 建立一個伺服器端入口檔案，如entry-server.js，用於建立Vue例項並渲染為字串。
客戶端入口：
- 建立一個客戶端入口檔案，如entry-client.js，用於在客戶端啟用伺服器端渲染的Vue例項。
伺服器配置：
- 設定Node.js伺服器，如使用Express，來處理HTTP請求並呼叫Vue的渲染器。
渲染器建立：
- 使用vue-server-renderer的createRenderer方法建立一個渲染器例項。
渲染邏輯：
- 在伺服器端，使用渲染器將Vue例項渲染為HTML字串，並將其傳送給客戶端。
- 在客戶端，使用渲染器啟用伺服器端渲染的Vue例項，使其能夠響應互動。
資料預取：
- 在伺服器端渲染之前，使用serverPrefetch鉤子或其他方法預取所需的資料。
狀態管理：
- 使用Vuex等狀態管理庫，確保伺服器和客戶端狀態的一致性。
錯誤處理：
- 在伺服器端渲染過程中，捕獲並處理可能出現的錯誤。
日誌記錄：
- 記錄伺服器渲染過程中的關鍵資訊，以便於除錯和監控。
構建和部署：
- 配置webpack等構建工具，確保伺服器端和客戶端程式碼能夠正確打包。
- 部署應用，確保伺服器配置正確，能夠處理SSR請求。

以下是一個簡化的Vue SSR配置示例：

// entry-server.js
import { createApp } from './app';

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }
      resolve(app);
    }, reject);
  });
};

// entry-client.js
import { createApp } from './app';

const { app, router, store } = createApp();

router.onReady(() => {
  app.$mount('#app');
});

// server.js (使用Express)
const Vue = require('vue');
const express = require('express');
const renderer = require('vue-server-renderer').createRenderer();
const server = express();

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>訪問的 URL 是： {{ url }}</div>`
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

server.listen(8080);

這個示例展示瞭如何使用Vue和Express來建立一個簡單的SSR應用。在實際專案中，配置會更加複雜，需要考慮路由、狀態管理、資料預取、錯誤處理等多個方面。

資料預取與狀態管理

在Vue SSR（服務端渲染）中，資料預取和狀態管理是確保應用能夠正確渲染並保持客戶端和伺服器端狀態一致性的關鍵步驟。以下是這兩個方面的詳細解釋和實現方法：

資料預取

資料預取是指在伺服器端渲染之前獲取所需資料的過程。這通常涉及到API呼叫或資料庫查詢。資料預取的目的是確保在渲染Vue元件時，所有必要的資料都已經準備好，從而避免在客戶端進行額外的資料請求。

在Vue中，資料預取通常在元件的asyncData方法中完成。這個方法在伺服器端渲染期間被呼叫，並且其返回的Promise會被解析，以便在渲染元件之前獲取資料。

export default {
  // ...
  async asyncData({ store, route }) {
    // 獲取資料
    const data = await fetchDataFromAPI(route.params.id);
    // 將資料儲存到Vuex store中
    store.commit('setData', data);
  }
  // ...
};

在上面的程式碼中，asyncData方法接收一個包含store和route的物件作為引數。fetchDataFromAPI
是一個非同步函式，用於從API獲取資料。獲取的資料透過Vuex的commit方法儲存到全域性狀態管理中。

狀態管理

在Vue SSR中，狀態管理通常使用Vuex來實現。Vuex是一個專為Vue.js應用程式開發的狀態管理模式和庫。在伺服器端渲染中，確保客戶端和伺服器端的狀態一致性非常重要。

為了實現這一點，需要在伺服器端渲染期間建立Vuex store例項，並在渲染完成後將狀態序列化，以便在客戶端啟用時恢復狀態。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export function createStore() {
  return new Vuex.Store({
    state: {
      // 初始狀態
    },
    mutations: {
      // 更新狀態的邏輯
    },
    actions: {
      // 非同步操作
    }
  });
}

// entry-server.js
import { createApp } from './app';
import { createStore } from './store';

export default context => {
  return new Promise((resolve, reject) => {
    const store = createStore();
    const { app, router } = createApp({ store });

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }
      // 預取資料
      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({
            store,
            route: router.currentRoute
          });
        }
      })).then(() => {
        context.state = store.state;
        resolve(app);
      }).catch(reject);
    }, reject);
  });
};

在上面的程式碼中，createStore函式用於建立Vuex store例項。在entry-server.js
中，我們建立store例項，並在路由準備好後呼叫元件的asyncData方法來預取資料。預取完成後，我們將store的狀態序列化到上下文物件中，以便在客戶端恢復狀態。

在客戶端，我們需要在啟用應用之前恢復狀態：

// entry-client.js
import { createApp } from './app';
import { createStore } from './store';

const { app, router, store } = createApp();

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

router.onReady(() => {
  app.$mount('#app');
});

在客戶端，我們透過檢查window.__INITIAL_STATE__來獲取伺服器端序列化的狀態，並在建立store例項後使用replaceState
方法恢復狀態。這樣，客戶端和伺服器端的狀態就保持了一致性。

錯誤處理與日誌記錄

在Vue SSR（服務端渲染）中，錯誤處理和日誌記錄是確保應用穩定性和可維護性的重要組成部分。以下是如何在Vue
SSR應用中實現錯誤處理和日誌記錄的詳細說明：

錯誤處理

錯誤處理在Vue SSR中主要涉及兩個方面：捕獲和處理在伺服器端渲染期間發生的錯誤，以及在客戶端啟用期間處理錯誤。

伺服器端錯誤處理

在伺服器端，錯誤通常在渲染過程中被捕獲。這可以透過在建立應用例項時使用一個錯誤處理函式來實現。

// entry-server.js
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp(context);

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({ store, route: router.currentRoute });
        }
      })).then(() => {
        context.state = store.state;
        resolve(app);
      }).catch(reject);
    }, reject);
  });
};

在上面的程式碼中，我們使用Promise和reject函式來捕獲和處理錯誤。如果在預取資料或渲染元件時發生錯誤，reject
函式會被呼叫，並將錯誤傳遞給呼叫者。

客戶端錯誤處理

在客戶端，錯誤處理通常透過Vue的錯誤捕獲鉤子來實現。

// main.js
new Vue({
  // ...
  errorCaptured(err, vm, info) {
    // 記錄錯誤資訊
    logError(err, info);
    // 可以在這裡新增更多的錯誤處理邏輯
    return false;
  },
  // ...
}).$mount('#app');

在errorCaptured鉤子中，我們可以記錄錯誤資訊並執行其他必要的錯誤處理邏輯。

日誌記錄

日誌記錄是跟蹤應用行為和診斷問題的重要手段。在Vue SSR中，日誌記錄可以透過整合的日誌庫或自定義日誌記錄函式來實現。

伺服器端日誌記錄

在伺服器端，日誌記錄通常在應用的入口檔案中實現。

// entry-server.js
import logger from './logger'; // 假設有一個日誌記錄器

export default context => {
  return new Promise((resolve, reject) => {
    logger.info('Starting server-side rendering');

    // ... 渲染邏輯 ...

    router.onReady(() => {
      // ...
      Promise.all(matchedComponents.map(component => {
        // ...
      })).then(() => {
        // ...
        logger.info('Server-side rendering completed');
      }).catch(err => {
        logger.error('Error during server-side rendering', err);
        reject(err);
      });
    }, reject);
  });
};

在上面的程式碼中，我們使用logger物件來記錄伺服器端渲染的開始和結束，以及在發生錯誤時記錄錯誤資訊。

客戶端日誌記錄

在客戶端，日誌記錄可以在Vue例項的created或mounted生命週期鉤子中實現。

// main.js
new Vue({
  // ...
  created() {
    logger.info('Client-side app initialized');
  },
  // ...
}).$mount('#app');

在created鉤子中，我們記錄客戶端應用初始化的資訊。

透過上述方法，我們可以在Vue SSR應用中有效地實現錯誤處理和日誌記錄，從而提高應用的穩定性和可維護性。

附錄：擴充套件閱讀與資源

社群與論壇

AD：覆蓋廣泛主題工具可供使用

GitHub
- Nuxt.js 倉庫：https://github.com/nuxt/nuxt.js可以找到最新的程式碼、問題和貢獻指南。
- Vue.js 倉庫：https://github.com/vuejs/vue是 Vue.js 的官方倉庫，可以瞭解 Vue.js 的最新動態。
Stack Overflow
- 在Stack Overflow上搜尋 Nuxt.js 或 Vue.js 相關的問題，通常能找到解決方案或討論。
Reddit
- r/vuejs：https://www.reddit.com/r/vuejs/是一個討論 Vue.js 相關話題的社群。
- r/webdev：https://www.reddit.com/r/webdev/雖然不是專門針對 Nuxt.js 或 Vue.js，但經常有相關的討論。
Discord 和 Slack
- Nuxt.js Discord 伺服器：加入 Nuxt.js 的 Discord 社群，可以實時與其他開發者交流。
- Vue.js Slack 社群：加入 Vue.js 的 Slack 社群，參與更廣泛的 Vue.js 生態系統討論。
Twitter
- 關注@nuxt_js和@vuejs的 Twitter 賬號，獲取最新的更新和新聞。
Medium
- 在 Medium 上搜尋 Nuxt.js 或 Vue.js，可以找到許多開發者分享的經驗和教程。

vue3 自定義渲染器 + canvas 寫一個《貪吃蛇?》
2023-03-06
VueCanvas
[淺析] vue3.0中的自定義渲染器
2020-10-19
Vue
Vue 服務端渲染 & 預渲染
2019-04-01
Vue服務端
Vue 服務端渲染（SSR）
2018-03-05
Vue服務端
3 分鐘搞定 Vue 2.0 服務端渲染
2019-03-03
Vue服務端
MAUI 移植 Xamarin.Forms 自定義渲染器
2021-12-28
UIORM
vue：服務端渲染技術
2018-03-02
Vue服務端
Vue 2 服務端渲染初探
2016-08-24
Vue服務端
Vue 服務端渲染技術
2018-04-24
Vue服務端
服務端渲染到前端渲染，再到“服務端渲染”
2019-02-16
服務端前端
vue 服務端渲染折騰記錄
2018-03-09
Vue服務端
服務端渲染與 Universal React App
2017-11-10
服務端ReactAPP
深度理解React專案的服務端渲染改造
2018-12-28
React服務端
服務端渲染和客戶端渲染
2024-04-04
服務端客戶端
react 服務端渲染
2019-05-08
React服務端
Vue SSR服務端渲染之資料快取
2018-07-20
Vue服務端快取
Vue教程00：MVC、MVP、MVVM模式的區別，服務端渲染與客戶端渲染的區別
2018-12-08
VueMVCMVPMVVM模式服務端客戶端
手把手教你搭建 Vue 服務端渲染專案
2020-11-02
Vue服務端
如何理解服務端渲染？
2019-10-09
服務端
服務端渲染基礎
2021-12-07
服務端
基於 Nuxt 的 Vue.js 服務端渲染實踐
2019-03-04
UXVue.js服務端
Vue/React 元件 PHP 服務端渲染（SSR）可行性分析
2018-03-27
VueReact元件PHP服務端
關於Vue服務端渲染（nuxt）的簡單學習
2017-10-13
Vue服務端UX
基於vue-ssr服務端渲染入門詳解
2018-01-08
Vue服務端
面試官：說一說前端路由，後端路由客戶端渲染與服務端渲染
2021-10-28
面試前端路由後端客戶端服務端
實現SSR服務端渲染
2019-03-18
服務端
Angular6 服務端渲染
2019-04-18
Angular服務端
Universal-webpack服務端渲染
2019-02-16
Web服務端
node服務端渲染(完整demo)
2019-01-09
服務端
Vue3 自定義指令
2023-04-25
Vue
淺談NUXT – 基於vue.js的服務端渲染框架
2019-02-16
UXVue.js服務端框架
Inertia.js SSR | 讓 Laravel x Vue 實現服務端渲染
2022-01-12
JSLaravelVue服務端
普通vue-cli初始專案轉為服務端渲染SSR
2020-11-21
Vue服務端
Vue2服務端渲染實踐以及相關解讀
2017-05-02
Vue服務端
服務端渲染vs客戶端渲染到前後端同構
2017-12-25
服務端客戶端後端
[譯]揭祕 React 服務端渲染
2019-03-03
React服務端
實現ssr服務端渲染demo
2019-08-13
服務端
typescript版的react服務端渲染
2019-02-16
TypeScriptReact服務端

Vue 3深度探索：自定義渲染器與服務端渲染

Vue 3基礎回顧

Vue 3簡介

Vue 3的新特性

響應式系統的改進

Vue 3的核心概念

探索Vue 3渲染機制

Vue 3的渲染流程

模板編譯

1. 解析（Parsing）

2. 最佳化（Optimization）

3. 程式碼生成（Code Generation）

示例程式碼

虛擬DOM

虛擬DOM的優勢

虛擬DOM的工作原理

示例程式碼

渲染函式

渲染函式的基本概念

渲染函式的示例

渲染函式與模板語法的區別

渲染函式的優勢

自定義渲染器基礎

渲染器架構

渲染器API

示例：建立一個簡單的自定義渲染器

構建高階自定義渲染器

1. 實現 createElement

2. 實現 patchProp

3. 實現 insert

4. 實現 remove

5. 實現 createText 和 setText

6. 實現 render 函式

7. 處理事件和屬性

8. 自定義指令

9. 插槽和元件渲染

總結

虛擬DOM的最佳化策略

渲染器的效能考量

示例程式碼

SSR概述

SSR的優勢與挑戰

同構應用

構建SSR應用

資料預取與狀態管理

資料預取

狀態管理

錯誤處理與日誌記錄

錯誤處理

伺服器端錯誤處理

客戶端錯誤處理

日誌記錄

伺服器端日誌記錄

客戶端日誌記錄

附錄：擴充套件閱讀與資源

推薦書籍與線上資源

社群與論壇

相關文章

1. 實現 `createElement`

2. 實現 `patchProp`

3. 實現 `insert`

4. 實現 `remove`

5. 實現 `createText` 和 `setText`

6. 實現 `render` 函式