活动页服务端渲染探索

目标

通过采用在服务端渲染激励页的方式,降低页面加载白屏时间,从而提升激励 H5 渲染体验。

架构设计

活动页服务端渲染探索_第1张图片
活动页服务端渲染探索_第2张图片

前端服务框架调研选型

只对比分析以下两种方案:

  • 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 框架是更好的选择!

Next.js 框架调研

什么是 Next.js ?

你可能感兴趣的:(前端,javascript)