目标
通过采用在服务端渲染激励页的方式，降低页面加载白屏时间，从而提升激励 H5 渲染体验。
架构设计
前端服务框架调研选型
只对比分析以下两种方案：
- Vue3 + Nuxt3 + Webpack
- Next.js + React + Node.js
| ' | Nuxt3 | Next.js |
|---|---|---|
| 介绍 | Nuxt是一个基于Vue的通用应用框架，预设了利用Vue开发服务端渲染的应用所需要的各种配置，主要关注的是应用的UI渲染 | Next是一个React框架，允许使用React构建SSR和静态web应用 |
| 响应时间 | 几乎相同 | 几乎相同 |
| 框架Github Star | 39.8k | 85.3k |
| Npm 下载数 | 333,922 | 2,130,573 |
| 脚手架工具 | create-nuxt-app | create-next-app |
| 优势 | 1. 它的主要范围是UI渲染，同时抽象出客户端/服务器分布 2. 静态渲染、前后分离 3. 自动代码分层 4. 服务、模板皆可配置 5. 项目结构清晰 6. 组件与页面无缝切换 7. 默认支持得ES6 / ES7 8. 支持开发热更新 9. 路由级别的异步数据获取 10. 支持静态文件服务 11. 样式预处：Sass，Less，Stylus | 1. 默认情况下，每个组件都是服务器渲染的 2. 自动代码拆分，加快页面加载速度 3. 不加载不必要的代码 4. 简单的客户端路由（基于页面） 5. 基于Webpack的开发环境，支持模块热更新（HMR） 6. 获取数据非常简单 7. 支持任何Node HTTP服务器实现，如Express 8. 支持Babel和Webpack自定义 9. 能够部署在任何能运行node的平台 10. 内置页面搜索引擎优化（SEO）处理 |
| 不足 | 1. 周边资源较少 2. 开发复杂的组件可能会很麻烦 3. 自定义配置显得很麻烦 4. 很多具有副作用的数据操作this.items[key]=value 5. 高流量可能会给服务器带来压力 6. 只能在某些挂钩中查询和操作DOM | 1. Next不是后端服务，应该与后台操作独立开 2. 如果你只想创建一个简单的WEB应用，那么它可能会是牛刀杀鸡 3. 数据会在客户端和服务器重复加载 4. 没有实现前后分离的项目，迁移到Next是一件痛苦的事，可能需要双倍工作 |
| 性能 | 中实现的基本的 HelloWorld 应用。每秒能处理190.05 个请求。平均一个请求时间为 52.619ms。在此度量标准上，Nuxt 与 Next.js 框架相比表现最差 | 基于 Next 框架实现的Hello world程序，每秒能处理 550.87 个请求，每个请求平均花费时间为 18.153ms |
| 上手难度 | 快 | 慢 |
通过上面表格对比可以看出，Next.js 框架是更好的选择！