ssx

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

Usage no npm install needed!

<script type="module">
  import ssx from 'https://cdn.skypack.dev/ssx';
</script>

README

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 加载测试文件从而编译失败