阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 03月31日

如何在沒有 Nuxt 的情況下在 Vue.js 專案中應用 SSR？ 🔥

大家好！在本文中，我們將考慮無需使用 Nuxt.js 作為主要框架即可解決的主要問題之一 - 將 SSR（伺服器端渲染）方法應用於 Vue.js 應用程式。

值得考慮的是，這種方法使用 SSR 而無需透過機器人進行索引，但保留了所有其他優點。

🔗 連接第三方函式庫

您可以連接一個名為HMPL-js的函式庫。這是對應模板語言的編譯器，它擴充了普通HTML的功能。透過將字串傳遞給compile函數的參數，您可以獲得適合您應用程式介面的現成的 DOM 元素。讓我們看看它是什麼樣子的：

<template>
  <div ref="hmplContainer">
    <!-- clicker here -->
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import hmpl from "hmpl-js";

export default {
  setup() {
    const hmplContainer = ref(null);

    onMounted(() => {
      const templateFn = hmpl.compile(
        `<div>
          <button data-action="increment" id="btn">Click!</button>
          <div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
        </div>`
      );

      const clicker = templateFn(({ request: { event } }) => ({
        body: JSON.stringify({ action: event.target.getAttribute("data-action") })
      })).response;

      hmplContainer.value.appendChild(clicker);
    });

    return { hmplContainer };
  }
};
</script>

在這裡，當安裝應用程式時，我們插入一個現成的元素，該元素將在每次單擊button時更新。此外，點擊計數將在伺服器上進行，我們只會在那裡發送自訂請求。

{% cta https://github.com/hmpl-language/hmpl %} 💎 看 HMPL-js ★{% endcta %}

這是另一個簡單的例子，我們可以刪除after屬性並將其簡單地用作掛載時的載入。它看起來是這樣的：

<template>
  <div ref="hmplContainer">
    <!-- header here -->
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import hmpl from "hmpl-js";

export default {
  setup() {
    const hmplContainer = ref(null);

    onMounted(() => {
      const templateFn = hmpl.compile(
        `<div>
          {{ src: "/api/header" }}
        </div>`
      );

      const header = templateFn().response;
      hmplContainer.value.appendChild(header);
    });

    return { hmplContainer };
  }
};
</script>

因此，使用常規元件我們可以立即從伺服器接收 DOM 元素，而無需加入額外的事件。從這些區塊中，您可以建立將使用 SSR 方法的整個頁面。

👀 與舊版的 Vue 集成

此外，此方法對於舊版本的 Vue 非常有效。也就是說，您不必更新到版本 3 或更高版本（取決於您閱讀本文的時間），但使用 Nuxt.js，尤其是較新的版本，您必須執行此操作。你如何在舊版本中做到這一點：

<template>
  <div ref="hmplContainer">
    <!-- header here -->
  </div>
</template>

<script>
import Vue from "vue";
import hmpl from "hmpl-js";

export default Vue.extend({
  data() {
    return {
      hmplContainer: null
    };
  },
  mounted() {
    this.hmplContainer = this.$refs.hmplContainer;
    ...
  }
});
</script>

這裡，我們將使用物件中的常規mounted來取代onMounted鉤子，並且稍微更改ref 。總的來說，不會有什麼重大的變化，但這種功能將非常重要。