【揭秘Vue服务端渲染SSR】从入门到实战，轻松实现前后端分离

引言

跟着互联网技巧的开展，前后端分别已成为现代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利用。