后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何在没有 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。此外，点击计数将在服务器上进行，我们只会在那里发送自定义请求。
这是另一个简单的例子，我们可以移除该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>
在这里，我们将使用对象中的onMounted常规而不是钩子，并稍微修改一下。总的来说，不会有什么重大的变化，但这样的功能将非常重要。mountedref
结论
无论 Vue 应用程序的版本如何，此方法都允许您使用 SSR。此外，它不会强制您遵守严格的框架界限，您可以将此方法与其他库结合使用，而不会损失交互性和代码可读性，并且通常无需重新执行任何操作。
我希望这种方法可以帮助您缩小您的网站尺寸，从而加快客户端的加载速度。
您可以在 Twitter 上关注作者！
非常感谢大家阅读这篇文章❤️！
