活动页服务端渲染探索

目标

通过采用在服务端渲染激励页的方式,降低页面加载白屏时间,从而提升激励 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 ?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/3723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Clickhouse基础和基本优化

CK基础和基本优化 一、ClickHouse的特点列式存储高吞吐写入能力数据分区与线程级并行表引擎的使用MergeTreeReplacingMergeTreeSummingMergeTree 二、SQL操作1.Insert2.Update 和 Delete3.查询操作4.alter操作5.导出数据 三、基于表的分布式集群集群写入流程( 3分片…

旅游卡加盟代理合伙人模式软件开发

旅游卡加盟代理合伙人模式是近年来逐渐兴起的一种旅游产业发展模式,它通过将旅游卡加盟商与代理商紧密结合,实现资源共享、风险共担、合作共赢的目标。而软件开发作为旅游卡加盟代理合伙人模式的重要技术支持,对于该模式的实施和发展起着至关…

深入理解Java虚拟机(二)Java内存区域与内存溢出异常

一、前言 对于Java程序员来说,在虚拟机自动内存管理机制的帮助下,不再需要为每一个new操作去写配对的delete/free代码,不容易出现内存泄漏和内存溢出问题,看起来由虚拟机管理内存一切都很美好。不过,也正是因为Java程序…

SQLite和SDK基本概念

SQLite是一种轻量级的关系型数据库管理系统 (RDBMS),它以文件形式存储数据,不需要独立的服务器进程,可以直接集成到应用程序中使用。SQLite的设计目标是提供一种简单、快速、可靠的数据库解决方案,适用于各种规模的应用程序和设备…

iOS APP外包开发的语言比较

iOS APP是Apple公司运行在iPhone手机上的APP,开发这样的APP有两种开发语言可以选择,都是由Apple公司提供的语言。其中Objective-C使用时间相对较长,有历史兼容考虑,而Swift是新的开发语言,更符合近些年开发语言的发展理…

Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能

(1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据 重点:handleNodeClick方法、getTreeNode方法 (2) 选择el-breadcrumb-item设置el-tree节点选中 必须设置属性: current-node-key"currentNodeKey" 、 node-key"id" 重点: 设置…

如何应对.kann勒索病毒:恢复数据的有效策略

导言: 随着科技的发展和互联网的普及,网络安全问题越来越受到人们的关注。而在网络安全领域,勒索病毒是一类极具破坏力的恶意软件。其中, .kann 勒索病毒是近期出现的一种恶意软件变种。91数据恢复本文将介绍什么是 .kann 勒索病毒…

05 Docker 安装常用软件 (mongoDB)

目录 1. mongoDB简介 1.1 mongodb的优势 2. mongodb的安装 2.1 创建数据文件夹 2.2 备份日志 2.3 配置文件夹 2.4 创建两个文件 ---> 2.4.1 配置如下: 2.5 拉取mongodb 2.6 运行容器 2.7 进入mongodb容器 ---> 2.7.0 高版本(6.0)以上是这样的 , 旧版的没研究 …

C++的虚函数与纯虚函数

C的虚函数是一种特殊的成员函数,用于实现多态性。虚函数允许在基类中声明一个函数,在派生类中根据需要进行重写,并通过基类指针或引用来调用派生类对象的特定实现。 ①虚函数的声明 ②多态性 ③派生类重写虚函数 ④纯虚函数 ⑤注意 ①虚…

服务保护 Sentinel

服务保护 Sentinel Sentinel 介绍Sentinel 的下载使用Sentinel 流控规则流控规则介绍流控规则演示 Sentinel 热点规则Sentinel 隔离和熔断降级Feign 整合 Sentinel线程隔离熔断降级 Sentinel 授权规则Sentinel 系统规则Sentinel 自定义异常Sentinel 资源定义url 默认资源抛出异…

课程上新!5天学懂大数据框架Kafka

学习Kafka对于现代数据处理和分析至关重要。它能够帮助我们处理海量数据流,确保数据的可靠性,支持实时流处理,并且具有广泛的应用场景。通过掌握Kafka的知识和技能,我们可以在数据驱动的世界中更好地应对挑战,取得更大…

【力扣周赛】第 354 场周赛

文章目录 Q1:6889. 特殊元素平方和思路——简单模拟题竞赛时代码 Q2:6929. 数组的最大美丽值思路——差分数组,计算每个数字可能出现的次数竞赛时代码解法2——排序 双指针⭐解法3——排序 二分查找 Q3:6927. 合法分割的最小下标…

Linux 漏洞扫描

Linux 漏洞扫描程序会仔细检查基于 Linux 的系统,以减轻潜在的风险和漏洞。 什么是 Linux 漏洞扫描程序 Linux 漏洞扫描程序是一种专门的漏洞扫描工具,旨在识别基于 Linux 的系统中的安全漏洞和弱点,它会扫描配置错误、过时的软件版本和已知漏洞。 为…

pytorch学习--第一个模型(线性模型)

目标 我们想通过随机初始化的参数 ω , b \omega ,b ω,b能在迭代过程中使预测值和目标值能无限接近 y ω x b y\omega xb yωxb 定义数据 x torch.rand([60, 1])*10 y x*2 torch.randn(60,1)构建模型 利用pytorch中的nn.Module 想要构建模型时,继承这个类…

(四)「消息队列」之 RabbitMQ 路由(使用 .NET 客户端)

0、引言 先决条件 本教程假设 RabbitMQ 已安装并且正在 本地主机 的标准端口(5672)上运行。如果您使用了不同的主机、端口或凭证,则要求调整连接设置。 获取帮助 如果您在阅读本教程时遇到问题,可以通过邮件列表或者 RabbitMQ 社区…

Meta发布升级大模型LLaMA 2:开源可商用

论文地址:https://ai.meta.com/research/publications/llama-2-open-foundation-and-fine-tuned-chat-models/ Github地址:https://github.com/facebookresearch/llama LLaMA 2介绍 Meta之前发布自了半开源的大模型LLaMA,自从LLaMA发布以来…

30、spring是什么

spring是什么? 1、轻量级的开源的J2EE框架。它是一个容器框架,用来装javabean (java对象),中间层框架(万能胶)可以起一个连接作用,比如说把Struts和hibernate粘合在一起运用,可以让我们的企业开发更快、更简洁 2、Spring是一个…

win11安装.net framework 3.5

背景 安装专业软件时需要.net framework 3.54错误代码:0x80072f8f控制面板安装失败microsoft安装失败DISM安装依旧失败 解决方法 下载win11 iso文件 下载网址 note:不能挂v p niso文件装载后,找到*\sources\sxs路径复制文件夹到新建路径,这…

C# WPF实现动画渐入暗黑明亮主题切换效果

C# WPF实现动画渐入暗黑明亮主题切换效果 效果图如下最近在Bilibili的桌面端看到一个黑白主题切换的效果感觉,挺有意思。于是我使用WPF尝试实现该效果。 主要的切换效果,基本实现不过还存在一些小瑕疵,比如字体等笔刷不能跟随动画进入进行切…

Docker简介

Docker简介 文章目录 Docker简介一、Docker1.什么是docker?2.容器引擎3.容器和虚拟机的区别4.namespace(命名空间)5.三大容器核心概念镜像容器仓库 二、Docker镜像操作1.搜索镜像2.获取镜像镜像加速下载 3.查看本地下载镜像4.获取镜像详细信息5.为本地镜…