最佳答案
引言
跟著互聯網技巧的開展，前後端分別已成為現代Web開辟的主流形式。Vue作為前端開辟中廣泛利用的框架，其效勞端襯著（SSR）功能為開辟者供給了構建高機能、SEO友愛的利用的可能性。本文將帶你從入門到實戰，深刻懂得Vue效勞端襯著SSR，輕鬆實現前後端分別。
一、什麼是Vue效勞端襯著（SSR）？
Vue效勞端襯著（SSR）是一種在伺服器端生成完全HTML頁面，然後將襯著好的頁面直接發送給客戶端的技巧。與傳統的客戶端襯著比擬，SSR存在以下上風：
- 更好的首屏載入機能：效勞端襯著的HTML無需等待JavaScript載入跟履行，用戶可能更快地看到完全襯著的頁面。
- 改良SEO：查抄引擎爬蟲可能直接獲取到完全的HTML頁面，有利於SEO優化。
- 進步網站的可拜訪性：效勞端襯著的利用可能更好地順應差其余設備跟網路情況。
二、Vue 3的SSR支撐
Vue 3經由過程@vue/server-renderer跟vue-router供給了富強的SSR支撐，讓開辟者可能輕鬆構建高機能的效勞端襯著利用。
2.1 籌備開辟情況
起首，我們須要安裝須要的依附：
mkdir vue3-ssr-demo
cd vue3-ssr-demo
npm init -y
npm install vue@next vue-router@4 @vue/server-renderer express
npm install -D @vitejs/plugin-vue vite webpack webpack-cli
2.2 基本SSR項目搭建
創建項目構造：
vue3-ssr-demo/
src/
App.vue
main.js
entry-client.js
entry-server.js
server.js
vite.config.js
2.3 核心代碼實現
App.vue
<template>
<div id="app">
<h1>Hello, Vue SSR!</h1>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
entry-server.js
import { createApp } from './App.vue';
export default context => {
return new Promise((resolve, reject) => {
const { app, router } = 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.vue';
const { app, router } = createApp();
router.onReady(() => {
app.$mount('#app');
});
server.js
const Koa = require('koa');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = new Koa();
const server = createServer(app.callback());
const io = new Server(server);
app.use(async (ctx, next) => {
const html = await createBundle(ctx);
ctx.body = html;
});
server.listen(3000);
三、SSR襯著流程詳解
- 伺服器接收懇求：伺服器接收到客戶端的懇求，並根據懇求的URL查找對應的路由。
- 襯著頁面：伺服器根據路由信息，挪用
entry-server.js中的createApp函數創建Vue利用，並履行路由跳轉。 - 生成HTML：Vue利用在伺服器端襯實在現後，生成HTML字元串。
- 發送呼應：伺服器將生成的HTML字元串作為呼應發送給客戶端。
四、高等SSR技能
- 非同步組件：Vue支撐非同步組件，可能按需載入組件，進步利用機能。
- 代碼分割：經由過程代碼分割，可能將代碼拆分紅多個小塊，按需載入，增加初始載入時光。
- 緩存：利用緩存可能增減輕複襯著，進步利用機能。
五、總結
Vue效勞端襯著SSR為開辟者供給了構建高機能、SEO友愛的利用的可能性。經由過程本文的介紹，信賴你曾經對Vue效勞端襯著SSR有了更深刻的懂得。盼望你能將所學知識利用到現實項目中，實現前後端分別，打造出更好的Web利用。