SPA & SSR & SSG

SPA: Single-Page Application

单页面应用

页面数据请求在客户端完成，完成后填充到DOM中

SSR: Server-Side-Rendering

服务端渲染

服务端将页面数据的请求处理完成，将数据和 DOM 处理成 html 返回给浏览器端

SSG: Static-Site Genration

静态站点生成(预渲染)

页面数据请求在项目部署的时候已经处理好，较服务端渲染更快。但是不利于动态数据，更新数据需要重新部署

vite-plugin-ssr

一个抽象掉很多细节的vite插件

构建项目

npm init vite-plugin-ssr@latest

这里我选择的是 vue-ts，即 Vue + TypeScript

路由选型

项目构建后默认使用服务器路由

服务器路由

项目构建成功会默认帮我们生成两个路由 /pages/index 和 /pages/about。如果我们需要新增其他页面可以在 /pages 下新建路由。vite-plugin-ssr 会把我们建的页面加入到路由中

服务器路由适用于简单的场景。较客户端路由简单

客户端路由

同步渲染

请求在服务端处理完成，一般有两种形式

单页面 hook

// /pages/index/index.page.server.ts
import fetch from "node-fetch";
export { onBeforeRender };

async function onBeforeRender() {
  const data = await getList();

  const pageProps = { list: data };
  return {
    pageContext: { pageProps },
  };
}

async function getList() {
  const res = await fetch("https://xx.com/data");
  const data = await res.json();
  return data;
}

// /render/_default.page.server.ts
export const passToClient = ["pageProps", "urlPathname"];

全局 hook

// /pages/boss/index.page.vue
export const query = { moduleName: 'Boss', select: ['name', 'gender'] }

// /pages/index/index.page.vue
export const query = { moduleName: 'Home', select: ['name', 'age'] }

// /render/_default.page.server.ts
import type { PageContext } from "./types";
import { runQuery } from 'some-sql-engine'; // 集成查询
export { onBeforeRender };

async function onBeforeRender(pageContent: PageContext) {
  const { query } = pageContext.exports
  const data = await runQuery(query);

  const pageProps = { data };
  return {
    pageContext: { pageProps },
  };
}

这种全局 hook 可以考虑使用 GrapQL 来集成接口操作

tip

单页面 index.page.server.ts 优先级高于 _default.page.server.ts

打包部署

项目在 centos 上 pm2 部署

pm2 运行本项目的时候需要添加依赖 ts-node typescript

pm2 install typescript
pm2 install ts-node@latest

接着就能启动项目了

pm2 start ./server/index.ts

vue3 vite-plugin-ssr 搭建官网