预渲染策略：基于Vue 3的静态页面生成与动态路由混合方案

引言

各位前端小伙伴，大家好！今天我们要聊一聊一个非常有趣的话题——如何在Vue 3中实现静态页面生成与动态路由的混合方案。这个话题不仅涉及到Vue 3的核心特性，还会涉及到一些预渲染技术，帮助我们在构建大型应用时，既能享受静态页面带来的性能优势，又能灵活处理动态路由的需求。

想象一下，你正在开发一个电商网站，首页、产品分类页等是相对静态的内容，而用户个人中心、购物车等页面则是高度动态的。如果我们能将静态页面提前生成为HTML文件，而动态页面则按需加载，那不仅能提升首屏加载速度，还能优化SEO效果。这就是我们今天要讨论的核心内容！

什么是预渲染？

在进入正题之前，先来简单了解一下“预渲染”是什么。预渲染（Pre-rendering）是指在构建阶段或部署时，提前生成静态HTML文件的过程。相比于传统的客户端渲染（CSR），预渲染可以显著提升首屏加载速度，因为浏览器可以直接加载已经生成好的HTML，而不需要等待JavaScript执行。

Vue 3提供了多种预渲染的方式，最常见的有两种：

Static Site Generation (SSG)：在构建时生成静态HTML文件。
Server-Side Rendering (SSR)：在每次请求时动态生成HTML。

今天我们主要讨论的是静态站点生成（SSG），并结合Vue 3的动态路由功能，实现一种混合方案。

Vue 3中的预渲染工具

在Vue 3中，最常用的预渲染工具是 Vite 和 Vite-Plugin-SSR。Vite 是一个现代的构建工具，它基于ES模块（ESM）的原生支持，提供了极快的开发体验。而 Vite-Plugin-SSR 则可以帮助我们在Vite的基础上实现服务器端渲染和静态站点生成。

安装依赖

首先，我们需要安装Vite和Vite-Plugin-SSR：

npm install vite vite-plugin-ssr @vue/compiler-sfc

接下来，在vite.config.js中配置Vite-Plugin-SSR：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ssr from 'vite-plugin-ssr';

export default defineConfig({
  plugins: [vue(), ssr()],
});

创建入口文件

为了实现静态页面生成，我们需要创建一个入口文件entry-server.js，用于在服务器端渲染页面。这个文件会根据不同的路由路径生成对应的HTML。

// entry-server.js
import { renderToString } from '@vue/server-renderer';
import App from './App.vue';
import { createApp } from 'vue';
import routes from './routes';

export async function render(pageContext) {
  const { urlPathname = '/' } = pageContext;

  // 根据URL路径找到对应的组件
  const route = routes.find(route => route.path === urlPathname);

  if (!route) {
    return { pageContext: { statusCode: 404 } };
  }

  const app = createApp(App);
  app.component('Main', route.component);

  const html = await renderToString(app);
  return { html, pageContext };
}

配置路由

接下来，我们定义一个简单的路由表。在这个例子中，我们将区分静态页面和动态页面。静态页面会在构建时生成HTML，而动态页面则会在客户端按需加载。

// routes.js
export default [
  { path: '/', component: () => import('./pages/Home.vue') },  // 首页
  { path: '/about', component: () => import('./pages/About.vue') },  // 关于页面
  { path: '/product/:id', component: () => import('./pages/Product.vue') },  // 动态产品页面
];

构建静态页面

现在，我们可以使用Vite-Plugin-SSR提供的命令来生成静态页面。在package.json中添加一个构建命令：

{
  "scripts": {
    "build": "vite build && vite-plugin-ssr pre-render"
  }
}

运行 npm run build 后，Vite会根据路由表中的静态路径生成对应的HTML文件，并将它们放在dist目录下。对于动态路由（如/product/:id），我们可以在构建时跳过这些路径，或者手动指定一些常见的ID进行预渲染。

动态路由的处理

虽然我们可以通过预渲染生成静态页面，但对于动态路由（如用户个人中心、购物车等），我们并不希望每次都重新构建整个站点。因此，我们需要一种方式来区分静态页面和动态页面。

使用 `pageContext` 传递数据

在Vite-Plugin-SSR中，pageContext 是一个非常重要的对象，它可以在服务器端和客户端之间传递数据。我们可以通过 pageContext 来判断当前页面是否是动态页面，并根据需要加载相应的组件或数据。

例如，在 entry-server.js 中，我们可以根据路由路径来决定是否返回静态HTML，还是让客户端自行处理：

export async function render(pageContext) {
  const { urlPathname = '/' } = pageContext;

  // 如果是动态路由，返回空的HTML，让客户端处理
  if (urlPathname.startsWith('/product/')) {
    return { html: '<div id="app"></div>', pageContext };
  }

  // 否则，正常渲染静态页面
  const route = routes.find(route => route.path === urlPathname);

  if (!route) {
    return { pageContext: { statusCode: 404 } };
  }

  const app = createApp(App);
  app.component('Main', route.component);

  const html = await renderToString(app);
  return { html, pageContext };
}

客户端路由

在客户端，我们可以使用Vue Router来处理动态路由。通过 createWebHistory 或 createMemoryHistory，我们可以轻松地管理路由状态。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import Product from '../pages/Product.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/product/:id', component: Product },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

懒加载动态组件

为了进一步优化性能，我们可以使用Vue的懒加载功能，只在需要时加载动态组件。这可以通过 defineAsyncComponent 来实现：

// pages/Product.vue
import { defineAsyncComponent } from 'vue';

export default defineAsyncComponent(() =>
  import(/* webpackChunkName: "product" */ './Product.vue')
);

这样，当用户访问 /product/:id 页面时，组件只会按需加载，不会影响其他页面的加载速度。

性能优化与缓存

在实际项目中，性能优化是非常重要的。除了使用懒加载和预渲染，我们还可以通过以下几种方式进一步提升性能：

HTTP缓存：为静态资源设置合理的缓存策略，减少重复请求。
CDN加速：将静态资源托管到CDN上，利用全球节点加速访问。
代码分割：通过Webpack的代码分割功能，将不同页面的代码分开打包，减少初始加载的体积。
Service Worker：使用PWA技术，通过Service Worker缓存页面，提供离线访问能力。

结语

好了，今天的讲座就到这里啦！通过今天的分享，相信大家对如何在Vue 3中实现静态页面生成与动态路由的混合方案有了更深入的了解。预渲染不仅可以提升首屏加载速度，还能优化SEO效果，而动态路由则为我们提供了灵活性，能够应对各种复杂的业务需求。

如果你还有任何问题，欢迎在评论区留言，大家一起交流探讨！下次见～ ?

参考资料：

Vite官方文档
Vite-Plugin-SSR官方文档
Vue Router官方文档
Vue 3官方文档

希望这篇文章对你有所帮助！如果有任何问题或建议，欢迎随时交流。?