0
点赞
收藏
分享

微信扫一扫

Kakfa - 多副本架构

承蒙不弃 2023-07-20 阅读 37

目标

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

架构设计

在这里插入图片描述
在这里插入图片描述

前端服务框架调研选型

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

  • Vue3 + Nuxt3 + Webpack
  • Next.js + React + Node.js
Nuxt3Next.js
介绍Nuxt是一个基于Vue的通用应用框架,预设了利用Vue开发服务端渲染的应用所需要的各种配置,主要关注的是应用的UI渲染Next是一个React框架,允许使用React构建SSR和静态web应用
响应时间几乎相同几乎相同
框架Github Star39.8k85.3k
Npm 下载数333,9222,130,573
脚手架工具create-nuxt-appcreate-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 ?

举报

相关推荐

YARN基本架构

Yarn的基本架构

kakfa

[Kafka] Kafka基本架构

eMMC--基本架构

基础篇-基本架构

Docker 的基本架构

0 条评论