uni-app提供开箱即用的SSR支持

2023-11-09

SSR(服务端渲染)可以给SPA站点带来两大核心优势:

  • 更好的SEO

  • 更快的首屏渲染

很多uni-app开发者都在积极尝试SSR,但大多没入门就放弃了,原因在于SSR颇高的技术门槛。

vue.js 官网在介绍 SSR 章节时的描述如下:

本指南将会非常深入,并且假设你已经熟悉 Vue.js 本身,并且具有 Node.js 和 webpack 的相当不错的应用经验。

故很多uni-app开发者在社区中呼吁DCloud官方提供更为简洁、开箱即用的 uni-app SSR方案。

uni-app团队近期在完成 vue 3.0 的全平台升级后,基于vue 3.0 + uniCloud,发布了开箱即用的 SSR 支持,我们称其为uniCloud版的SSR。

这是一个uniCloud版的SSR示例:news.dcloud.io是基于uni-app & uniCloud 开发的新闻系统。通过审查元素会发现,新闻列表数据包含在服务端下发的源码中,而不是客户端Ajax请求所得。

图片

uniCloud版的SSR实现的较为简单,且和HBuilderX做了深度集成,你可以按照如下步骤快速上手:

步骤一:调整代码适配服务端运行环境

  1. 生命周期:uni-app的生命周期钩子函数中,页面onLoad、组件beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用,你需要检查原项目代码中获取数据的时机;

  2. 特定平台API:若直接使用了如 window 或 document,这类仅浏览器支持的全局变量,则会在云端 Node.js 中执行时抛出错误;

  3. 数据预取:<uniCloud-db>组件天然支持SSR,无需调整代码,推荐使用<uniCloud-db>查询数据库。如果你未使用<uniCloud-db>组件,则可使用serverPrefetch来实现服务器端数据获取,使用@dcloudio/uni-app提供的ssrRef或Vue.js官方的Vuex来实现状态同步;

更多详细信息及示例代码,参考:uni-app官网

步骤二:编译发行

通过HBuilderX的发行菜单->网站 PC-Web或手机H5、勾选ssr、勾选将编译后的资源部署在uniCloud前端网页托管

图片

这个过程,对开发者来说很简单,只需要点击按钮即可,实际上HBuilderX在背后做了大量工作,包括:

  1. 编译uni-app项目,分别生成Server Bundle和Client Bundle

  2. 将Client Bundle上传到uniCloud前端网页托管中

  3. 将Server Bundle作为uni-ssr云函数资源,编译并上传到uniCloud服务空间

步骤三:配置 uni-ssr 云函数的URL化路径

给uni-ssr云函数绑定自定义域名,然后在浏览器中访问该域名,你就可以获得服务端渲染的页面了。

至此,uniCloud版SSR开发部署工作结束,是不是比原来简单多了?

总结

Vue.js 官网及社区很多文档,介绍SSR时都会提到,SSR是把双刃剑,优点缺点都很明显(2优3缺,缺大于优)。但经过HBuilderX & uniCloud加持的SSR,则完美解决了SSR的部分缺点,将其由缺转优,变成4优1缺,实现优大于缺。具体对比如下:

图片

欢迎大家使用uniCloud版SSR!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app提供开箱即用的SSR支持 的相关文章

  • 网页是如何显示在浏览器

    这两天学习了一些网页如何在浏览器中显示的知识 感觉在我向前端走的路上非常有用 所以就在这里总结一下 大家可以看看 我也算是巩固一下知识 因为自己学识太浅 内容可能有一些错误之处 希望看到的朋友可以指出来啦 在Edge浏览器也加入Chromi
  • JS 时区时间转换

    业务场景 页面服务器时间是东八区时间 页面 JS 功能需要对比服务器时间和用户本地时间 为兼容世界各地时间 需要将用户本地时间转换为东八区时间 基本概念 格林威治时间 格林威治子午线上的地方时 或零时区 中时区 的区时叫做格林威治时间 也叫
  • 一眼看懂promise与async await的区别

    promise方法 let p1 new Promise resolve reject gt setTimeout gt resolve 我是p1 4000 let p2 new Promise resolve reject gt setT
  • uniapp写h5如何封装一个图片上传预览并且有进度条的组件

    开发背景 首先项目是用uniapp写的h5项目 要求能上传 预览 和进度条展示 还要求总览的时候用缩略图 点开预览要原图 不得不吐槽一下 开发环境 uniapp 阿里云存储 先看截图效果 好了直接上代码 photo picker vue
  • HTML、CSS、JavaScript分别实现什么功能?

    学习Web前端开发基础技术需要掌握 HTML CSS JavaScript 那么这三个都是分别实现什么功能的呢 下面和小编一起来看看吧 一 HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息 可以包含文字 图片 视频
  • hover时效果从中间向两边扩散

    header nav gt li position relative display inline block margin right 20px padding 0 5px font size 16px line height 76px
  • js实现鼠标悬停显示title效果

  • node中间件是什么意思?

    node中间件是什么意思 2020 09 11 16 11 17分类 常见问题 Node js答疑阅读 1757 评论 0 中间件是一种独立的系统软件或服务程序 分布式应用软件借助这种软件在不同的技术之间共享资源 中间件位于客户机 服务器的
  • 探索CSS:从入门到精通Web开发(二)

    前言 当我们谈论网页设计和开发时 CSS 层叠样式表 无疑是其中的重要一环 作为HTML的伴侣 CSS赋予网页以丰富的样式和布局 使得网站看起来更加吸引人并且具备更好的可读性 本书将通过一系列深入浅出的方式 带你从入门到精通CSS 探索We
  • 微信小程序vue+nodejs_uniapp课堂考勤学生签到系统hbuiderx

    基于微信小程序的签到系统是一个可以很大程度上解决作业管理问题的系统 基于微信小程序的签到系统分为小程序部分和后台管理两部分 小程序主要功能包含 注册登录 首页 课程信息 公告信息 在线选课 课表信息 签到信息 课程补签 警告信息等功能 后台
  • 流浪宠物领养系统nodejs_vue+uniapp 微信小程序

    本系统共包含15个表 分别是配置文件表 宠物信息评论表表 视频播放评论表表 朋友圈表 宠物类型表 宠物信息表 宠物预约表 宠物资讯表 入园信息表 视频播放表 收藏表表 关于我们表 token表表 用户表表 用户表等信息表 语言 Java p
  • 【uniapp】小程序中input输入框的placeholder-class不生效解决办法

    问题描述 uniapp微信小程序 使用input组件时 想要改变提示词 placeholder 的样式 但是使用 placeholder class 改变不了 如下
  • Uniapp上传下载文件-不限制文件类型-附详细代码解析

    Uniapp上传下载文件 不限制文件类型 1 知识小课堂 1 1 Uniapp简介 1 2 文件上传 1 3 文件下载 2 Uniapp上传文件 3 Uniapp 下载文件 1 知识小课堂 1 1 Uniapp简介 UniAp
  • uniapp-微信小程序分享给好友和朋友圈功能

    分享给好友 只需要在要分享的页面中设置 onShareAppMessage 即可 只有定义了此事件处理函数 右上角菜单才会显示 转发 按钮 监听用户点击页面内转发按钮 button 组件 open type share 使用button分享
  • uniapp-使用返回的base64转换成图片

    在实际开发的时候 需要后端实时的给我返回二维码 他给我返回的是加密后的 base64字符串 我需要利用这个base64转换到canvas画布上展示 或者以图片的形式展示在页面内 在canvas画布上展示 使用官方的uni getFileSy
  • uniapp初级入门-flex布局学习12-网格布局

    代码
  • uniapp-微信小程序分享给好友和朋友圈功能

    分享给好友 只需要在要分享的页面中设置 onShareAppMessage 即可 只有定义了此事件处理函数 右上角菜单才会显示 转发 按钮 监听用户点击页面内转发按钮 button 组件 open type share 使用button分享
  • uniapp初级入门-flex布局学习11-骰子多点演示

    代码
  • uniapp H5项目使用ucharts的Echart组件方式创建圆环

    问题 没有报错但是图表不出来 调试了半天圆环图表没有不出来 是因为没有明示设置宽度与高度 请根据实际需求修改父元素尺寸 组件自动识别宽高 charts box width 100 height 300px 最终效果 先导入ucharts到项
  • uniapp-打包安卓APP流程

    打包前所需要的配置 1 图标配置 准备好对应的图标 在第一步选择该图标 然后点击自动生成所有图标 就会生成下面所有尺寸的图标 会自动存放至unpackage文件中 2 启动页面配置 通用界面就是最基本的一个小图标加一个名称 自定义则是自己手

随机推荐

  • python实现按键精灵找色点击功能,使用pywin32和Pillow库

    Python图片处理模块PIL pillow pywin32的主要作用 1 捕获窗口 2 模拟鼠标键盘动作 3 自动获取某路径下文件列表 4 PIL截屏功能 找色点击功能思路 抓取当前屏幕快照 指定一个坐标和颜色 如果坐标的颜色符合 则点击
  • 在Vue2中使用Swiper

    由于兼容性问题 使用的是Swiper4 首先是安装 npm i swiper 4 在组件中引入 import swiper dist js swiper import swiper dist css swiper css import Sw
  • css01

    1 css基础认知 CSS 叫 层叠样式表 用来 给html页面修改样式 可以让页面更美观 css的书写位置 内嵌式
  • C++:替换文本文件中的某些字符

    include
  • linux开机dracut界面_dracut 基本介绍

    dracut 维基 https dracut wiki kernel org index php Main Page http www 360doc com content 13 0428 09 12139495 281449877 sht
  • JVM——垃圾回收器

    JVM 垃圾回收器 按照工作模式分 可以分为并发式垃圾回收器和独占式垃圾回收器 并发式垃圾回收器与应用程序线程交替工作 以尽可能减少应用程序的停顿时间 独占式垃圾回收器 stop the world 一旦运行 就停止应用程序中的所有用 户线
  • Qt 在循环中超时跳出

    常见的一个需求 在一段循环中 给定一个最大运行时间 当循环时间超出时 终止 常用于一些工控场合 对节拍有要求的项目 在此简单的做一个总结记录 主要使用Qt的 QElapsedTimer 类 调用QElapsedTimer中的成员函数elap
  • MySQL技术内幕 InnoDB存储引擎 学习笔记 第八章 备份与恢复

    备份方法 1 热备 在数据库运行中直接备份 对正在运行的数据库没有任何影响 这种方式在MySQL官方手册中称为Online Backup 2 冷备 在数据库停止的情况下备份 这种备份最简单 一般只需拷贝相关的数据库物理文件即可 这种方式在M
  • Vnc配置

    2017 04 15 1 在terminal中输入vncconfig 弹出小窗 勾选对应选项 注意 不要关闭这个小窗 不要关闭这个小窗 不要关闭这个小窗 2 vncconfig nowin 在linux选中文字后 无需其他按键 直接在win
  • 智慧农业物联网系统解决方案

    一 方案背景 随着城市的发展 人们对于生活水准的要求也越来越高 对于食物的品质需求也越来越高 我作为世界农业大国 农业的发展优势慢慢降低 智慧化农业将带来一次新的农业结构改革 农业的根本问题是效率不高 效益不强 效能不够 原因在于各生产要素
  • Python自动操作 GUI 神器——PyAutoGUI

    我们以前讲过怎样使用 Python 在浏览器中实现页面自动化操作 不管用哪种方式实现 都是通过定位页面中的元素来进行相应的操作 今天我们来聊一聊如何在桌面实现自动化操作 与浏览器页面自动化操作类似 桌面自动化操作也是需要定位鼠标在桌面的位置
  • map的常用用法详解

    头文件 include
  • 基于S函数的BP神经网络PID控制器及simulink仿真

    基于S函数的BP神经网络PID控制器及simulink仿真 文章目录 文章来源和摘要 S函数的编写格式和运行步骤 simulink模型结构 S函数模型初始化部分代码理解 S函数模型更新部分 S函数模型输出部分 S函数完整代码附录 文章来源和
  • 第三方网站/系统使用微信扫码登录

    微信扫码登录网站 微信开放平台 在我们做某个平台或者系统时 都需要有一个登录功能 传统的用户名 密码登录模式看起来似乎并没有手机扫码直接登录来的方便 那么在前端实现上 如何实现微信扫码登录呢 授权流程 第三方发起微信授权登录请求 微信用户允
  • 病例对照研究中,如何对年龄、性别、教育程度进行频数匹配?

    病例对照研究中 如何对年龄性别进行频数匹配 案例一 两组被试匹配 案例二 三组被试匹配 背景 使用默认匹配方法 衡量匹配效果 调整参数 其他匹配方法 参考 案例一 两组被试匹配 案例二 三组被试匹配 背景 我经常遇到的数据情形是 有两组被试
  • 实现【企业微信自建应用使用uni-app H5 开发】,并解决【uni-app集成微信JSSDK(wx、jWeixin)变量冲突问题】

    目录 企业微信的开发与调试 企业微信应用主体逻辑 登录 构造网页授权链接 企业微信SDK配置 demo案例 重要bug修复方法 总结 企业微信的开发与调试 在本地开发基础代码和UI 发布到测试环境进行测试 无法本地调试接口 因为web浏览器
  • AltiumDesigner15.1导出3D PDF 图文教程

    ALtiumDesigner更新的速度就一个字 快 不过从15 4 15出来 貌似很久都没有更新了 等了很久 今天终于出来了 O O哈哈 因为早就耳闻AD15 1会带有3D输出功能 能够直接输出到PDF 这个好玩的功能 怎么能错过 本文就是
  • 时序基本介绍——Jitter与Skew区别

    在时序分析当中 有些基础概念还是要认真了解的 时钟抖动 Clock Jitter 和时钟偏移 Clock Skew 经常容易混淆 时序设计中 对于时钟的要求是非常严格的 因此FPGA中也有专用的时钟管脚 对应着专用的时钟区域BUFG BUF
  • 技术工具类:IDEA集成SonarQube并使用

    1 安装插件 从 File gt Settings gt Plugins 搜索 sonar 如下图 直接点击安装即可 安装成功后重启IDEA 在Settings gt Tools 中找到 SonarLint 如下图 在Coniguratio
  • uni-app提供开箱即用的SSR支持

    SSR 服务端渲染 可以给SPA站点带来两大核心优势 更好的SEO 更快的首屏渲染 很多uni app开发者都在积极尝试SSR 但大多没入门就放弃了 原因在于SSR颇高的技术门槛 vue js 官网在介绍 SSR 章节时的描述如下 本指南将