ssx

使用 Vite + Fastify + React 的 SSR/SSG 工具

安装

npm install ssx --save-dev

执行命令

• PORT=3000 BUILD=dev npx ssx : 启动开发模式
• PORT=3000 BUILD=ssr npx ssx : 编译生产 SSR
• PORT=3000 BUILD=ssg npx ssx : 前端预编译(SSG) 并且拷贝静态资源到服务端
• PORT=3000 BUILD=server npx ssx : 编译生产的纯后端
• PORT=3000 BUILD=static npx ssx : 前端预编译(SSG)
• node dist/server : 预览遍以后的服务

SSR 获取数据

1. 雷同 NextJS 的 getServerSideProps API, 在页面组建中，export getServerSideProps 方法，SSR 在渲染组件之前会先抓取数据，注入到页面的 Props 中
2. 注意 getServerSideProps 不仅在 SSR 模式中生效，在 SSG (静态预渲染) 中会阻塞组件渲染，直到拿到数据。
3. getServerSideProps 的数据仅在 SSR 时或组件第一次渲染时执行一次，它并不适合做客户端动态更新的请求
4. 在开发模式中 getServerSideProps 永远都从前端获取数据；(原因：为了更高效的开发环境，前端热更新和后端热重启是分离的，getServerSideProps 的代码在前端代码中，而实际执行在后端代码中).
5. getServerSideProps 的入参仅有 URL 相关数据，其目的是为了 getServerSideProps 兼容未使用 SSR 时，可以在前端获取 BFF 端的数据

export const getServerSideProps = async (req: GetServerSideRequire) => {
  await new Promise((res) => setTimeout(res, 100));
  return { str: "user", dog: req.query.dog, query2: req.query };
};

Deploy

前端

• 拷贝 dist/static 到静态服务器中

后端

• 本工程会根据 dependencies 的内容和本地的依赖 lock 文件，编译一份 package.json 到 dist/server 中
• 确保 package.json 中 dependencies 均为纯后端依赖(若你使用 SSR，那么前端依赖也应该放到 dependencies 中)；同理，后端生产用不上的依赖应该放到 devDependencies 中
• 拷贝 dist/server 到生产服务器中，然后执行进入到目录中安装依赖即可

已知问题

• 前端测试文件请勿放到 src/pages 中，这会导致 vite 的 import.meta.globEage 加载测试文件从而编译失败