展开

关键词

前端福音:Serverless 和 SSR 的天作之合

由于 SSR 需要依赖 Node.js 渲染页面,显然会比仅仅提供静态文件的 CSR 应用需要占用更多 CPU 资源。 同时也无需关心 SSR 的性能问题,理论上 Serverless 是可以无限扩容的(当然厂商对于一般用户是有扩容上限的)。如何快速将 SSR 应用 Serverless 化? 跟传统的 SSR 做对比,我专门找了一台传统,然后部署相同的 Next.js 应用。分别进行压测和性能分析。 方案配置平均 TPS传统2 核,4G 内存,10M 带宽727.09 s腾讯 Serverless128M 内存675.59 s价格预算从价格上来看,接近配置的价格约为 73.50 元月 由此可以看出,随着并发的增加,SSR 会导致负荷越来越大,从而会加大的响应时间;而 Serverless 由于具有自动扩缩的能力,所以相对比较平稳。

1K2018

Serverless SSR 技术在「腾讯在线教育」中的实践

SSR 的运维成本对于大多数前端工程师来说,在的运维方面都可能有时并不那么得心应手,所以在的可用性方面,也是在做技术选型时所考虑的重点方向之一。 函数拆分我们业中有多个页面是通过 SSR 来实现的,采用了腾讯函数 SCF 来做 SSR 之后,就会遇到一个问题:是合并到一个函数中(业级),还是拆分为多个函数(页面级)。 SCF 的 SSR 方案,节省了不少的运维成本,得益于腾讯 Serverless  的日志系统,所有的单个 SSR 应用请求在日志平台都有完整的链路,定位问题与处理问题的速度都有了质的提升。 因为 Serverless 的架构模式会存在冷启动时间较长的问题,虽然腾讯函数 SCF 在这方面已经做了很多的技术优化,比如预启动容等,但是我们在业方面也可以尝试优化,我们在接入层做了的降级优化 给想使用 SSR 技术的团队建议如果想追求更好的用户体验,建议针对核心业SSR 优化,搭配 Serverless 来做的部署于运维,有了 Serverless 的丰富配套,我们可以不用像以前一样关心机的运维和扩容

56874
  • 广告
    关闭

    腾讯云前端性能优化大赛

    首屏耗时优化比拼,赢千元大奖

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    什么是 SSR

    由于 SSR 需要依赖 Node.js 渲染页面,显然会比仅仅提供静态文件的 CSR 应用需要占用更多 CPU 资源。 同时也无需关心 SSR 的性能问题,理论上 Serverless 是可以无限扩容的(当然厂商对于一般用户是有扩容上限的)。如何快速将 SSR 应用 Serverless 化? 为了跟传统的 SSR 做对比,我专门找了一台 CVM (腾讯),然后部署相同的 Next.js 应用。分别进行压测和性能分析。 同时也无需关心 SSR 的性能问题,理论上 Serverless 是可以无限扩容的(当然厂商对于一般用户是有扩容上限的)。如何快速将 SSR 应用 Serverless 化? 为了跟传统的 SSR 做对比,我专门找了一台 CVM (腾讯),然后部署相同的 Next.js 应用。分别进行压测和性能分析。

    2.3K00

    Serverless SSR 技术在猎豹移动的实践

    (Server Side Rendering) 技术来构建前端项目,以支持同构代码的端渲染。 SSR ,页面渲染主要是用 React+Redux 完成的一套代码在浏览环境和 Node 环境通用,利用 Webpack 可编程性动态生成配置并执行,打包出多场景(开发、测试和线上环境等)多端代码 答:SSR 项目落地的时候通常不是很顺畅,项目部署的时候需要具备技术能力才能和运维顺畅沟通,所以项目落地不仅要前端同学掌握后端开发能力还要对运维技术、并发等问题多方面考虑,这对前端技术同学的技术全面行有较高要求 调研了几大厂商 Serverless ,最后综合比较后,选择了腾讯作为我们实现 SSR 的 Serverless 支持。 因为我们做了 Isomorphic,所以对 API 的要求变高,用户的请求不止来源于 Node ,还有来自浏览的请求,对安全性要求会高一些。

    2.2K4425

    揭秘Serverless SSR应用监控平台

    以前js只能在前端写前端的代码,而现在js放进了端,可以在端编写代码。通过一系列改良解决了空白页面的问题,提高了加载的效率及用户体验。 Serverless本身是一个叫做无状态的应用,但它并不是没有,只是我们感知不到。当你使用的时候,我们会替你去使用;而当你执行完了,我们就会把它释放掉,这样就节省了资源、节约了成本。 下图是Serverless SSR的整体架构图。传统的SSR会走到Node Server上,而Serverless SSR是依托于函数计算的方式去返回响应。 点击填写 问卷关注“腾讯大学”公众号,回复【加群】进入交流群腾讯大学是腾讯旗下面向生态用户的一站式学习成长平台。 腾讯大学大咖分享每周邀请内部技术大咖,为你提供免费、专业、行业最新技术动态分享。

    26220

    2020 SSR落地开花的三大机遇

    :Serverless无计算(serverless computing)将相关的配置管理工作统统交给供应商去做,以减轻用户管理资源的负担对计算用户而言,Serverless 能够( 自动)弹性伸缩而无需显式预配资源,不仅免去了资源的管理负担,还能够按使用情况计费,这一特点在很大程度上解决了“难题 4:钱的问题”:引入 SSR 渲染,实际上是在网络结构上加了一层节点,而大流量所过之处 as a Service),由函数提供常规计算能力:直接运行后端代码,而无需考虑等计算资源以及的扩展性、稳定性等问题,甚至连日志、监控、报警等配套设施也都开箱即用也就是说,喂给 FaaS 一个 JavaScript 函数,就能上线一个高可用的,无需操心如何承载大流量(几万 QPS)、如何保障稳定可靠……听起来有些跨时代是么,实际上,AWS Lambda、阿里 FC、腾讯 SCF (摘自Edge computing)像传统 CDN 通过缩短静态内容与最终用户之间的物理距离来加速资源访问,同时减少了应用的负载一样,支持边缘计算的 CDN 允许将函数部署到边缘节点中,加速响应

    13010

    回顾|揭秘 Serverless SSR 应用监控平台(内附源码)

    SSR 的支持有着较强烈的诉求,基于此希望腾讯 Serverless 团队通过开发 Next.js 组件助力用户通过 Serverless 实现 SSR 框架直接部署,方便用户进行业开发及维护,并基于上 Serverless 运行,降低使用成本与使用门槛。 传统 SSR 与 Serverless SSR 对比 Next.js 组件的主要特性: 【低延迟】首屏加载速度快,性能和部署持平; 【SEO 友好】方便搜索引擎,更好的读取页面内容,支持 SEO; ,分钟级便可将应用项目部署至端,提高开发效率; 【实时日志,方便监控】 用户可以通过调取实时日志的输出或查看项目的监控面板,从而实时监控查看业状态,方便进行业排障; 【降低成本 】 Serverless 在试用期内,相关联的产品及均提供免费资源和专业的技术支持,帮助您的业快速、便捷地实现 Serverless!

    33051

    前端原生,以 Kubernetes 为基础设施的高可用 SSR(Vue.js) 渲染微初探(开源 Demo)

    背景笔者在逛掘金的时候,有幸看到掘友狼族小狈开源的 genesis — 一个可以支持 SSR 和 CSR 渲染的微解决方案。 micro-ssr-common:基础的页面聚合渲染微,包含公共导航https:github.comHacker-Linnermicro-ssr-common micro-ssr-home:首页渲染微 https:github.comHacker-Linnermicro-ssr-home micro-ssr-about:关于我们页面渲染微https:github.comHacker-Linnermicro-ssr-about -f values.yaml -n micro-ssr Helm 部署首页微helm install micro-ssr-home .micro-ssr -f values-home.yaml - n micro-ssr Helm 部署关于我们微helm install micro-ssr-about .micro-ssr -f values-about.yaml -n micro-ssr ?

    13210

    Serverless 一站式原生应用开发实践

    3.jpg 论文里提到,Serverless 其实是一种 无计算,它几乎封装了所有底层资源运营管理工作,开发人员可以更容易的使用设施。 Serverless SSR 实现原理 接下来,我们介绍一下 SSR 本身的演变背景,最早的时候,我们的前端页面是可以通过后端来直接渲染生成的,也就是说端直接生成 html 并且返回给浏览。 假设我们现在有一个项目已经部署完成即将上线,在上线过程中准备使用 SSR 方案,可能问题就来了,需要考虑的究竟该怎样实现,以及性能、节点、它本身的扩展性、如何运维等问题。 相比于传统的 SSR 端渲染,Serverless SSR 的优势在于它本身的架构是完全 Serverless 化而且秒级部署的。 在传统的 SSR 上,浏览进行交换的时候其实是要和 node server 进行交换,然后去渲染。既然这边有一个 node 节点,就无法避免的会消耗资源,然后就需要去运维。

    1.5K2723

    发布更新|腾讯 Serverless 产品动态 20201118

    Serverless SSR 帮助用户实现 SSR 框架快速上,支持模版创建或本地项目迁移,提供了应用层级的资源管理监控能力,并支持基于 CI 能力完成项目的持续构建。 发布时间: 2020-11-03 产品介绍: Serverless Framework 是业界非常受欢迎的无应用框架,用户使用 Serverless framework 可以进行函数的函数创建和销毁 所有触发均支持别名流量配置。有效提升了用户使用 Serverless framework 操作函数的基础能力。 新增操作命令:创建别名、更新别名,列举别名,删除别名,触发函数。 https:cloud.tencent.comdocumentproduct58345352 四、API 网关支持 API 数据统计正式发布 发布时间: 2020-10-26 产品背景: API 网关的监控页面需要一个可以查看下所有 产品优化: 监控页新增 API 数据统计功能,支持查询实时、近三小时、近一天三种时间维度的所有 API 的监控指标,帮助用户快速了解 API 的情况,提升排障体验。

    25810

    快速部署 Next.js 博客到 Serverless SSR

    Server-Side-Rendering(SSR)泛指端渲染的技术,指的是在 Server 端将 HTML 渲染好,再返回给 Client 端。 并且 SSR 是在对页面每个请求发出时,都会重新抓取和生成页面(和 SSG 静态页面生成相比,是更加动态的渲染方式)。 Next.js 是一个轻量级的 React 端渲染应用框架。 支持多种渲染方式,包括客户端渲染、静态页面生成、端渲染。使用 Next.js 可以方便的实现 SSR,即页面的端渲染。 二、端渲染 SSR(Server Side Render) Next.js 框架支持客户端渲染 CSR (Client Side Render),静态页面生成 SSG(Static Site Generation )以及端渲染 SSR (Server Side Render)。

    32950

    NGW,前端新技术赛场:Serverless SSR 技术内幕

    SSR 端渲染: 指在端将 HTML 渲染到前端,早期常用 php jsp 技术来在端生成 HTML,近年来 JS 同构化趋势演进下,逐步出现了在端上运行前端 JS 代码进行渲染的方案, 若能将 Serverless 技术落地到 SSR 场景,将会有如下优点:资源理论上无限扩容,前端不必考虑业量对 SSR性能的影响前端同学无需关注 SSR的运维、申请、扩容,减少部署运维成本 ,这时他犯难了:部署直出需要申请机,申请多少台,申请几核的? Serverless 直译过来叫无,这里并不是说不需要,而是说开发者不需要关注,这部分由平台维护提供,开发者仅需关注业逻辑的开发即可。 公有基础设施上的 Serverless 演进考虑到直出的特性,阿 J 认为直出业十分适合上 Serverless,因此他立马开始了直出上的预研,做 Serveless SSR ,免去运维部署烦恼

    6.9K54

    看懂 Serverless SSR,这一篇就够了!

    译者:王俊杰,王天审校:王俊杰,江柳 了解我们如何为每个Webiny网站获得出色的SEO支持,以及如何在无环境中使用SSR使其超快运行。 内容概要 ? 只需几个无就可以在AWS中实现这两种方法,他们是S3、Lambda、API网关和CloudFront。 在无环境中,我们如何处理“传统上”完成的工作?我们如何实现“无端渲染”? SSR with (re)hydration ? 对于此实现,我们实际上使用了在按需预渲染实现中相同的 ? 渲染与激活-利用的AWS 但是当然,该图会有所不同: ?   渲染与激活-流程 在解释其全部工作原理之前,还记得我们提到渲染与激活方法需要我们构建SPA的两个生产版本吗?一个提供给浏览并在浏览中执行,另一个真正在上执行?

    1.6K41

    马晓:Serverless SSR 在人人视频的落地探索

    我们公司目前技术团队分为大前端和大后端,公司将不同业线分别独立运作,贯穿大前端和大后端不同的开发同学进行跨部门或跨业线协作,大前端负责偏用户侧移动端的产品体验,大后端侧重于稳定以及数据侧深耕。 Serverless 团队最近支持了nuxt,便马上咨询腾讯 Serverless 团队相关细节,决定将运维侧弹性伸缩业保障这块能力交由更专业的团队去管理,解放这边的开发重心。 ,最后 LRU 兜底了一层端页面,页面 QPS 大涨20倍,反向超越了一下前辈,可见后面着重发力一下 serverless 层,或者借助自身的生态,这块还有进一步大的提升空间。 另一个点是发版测试或者是灰度方面,起初使用腾讯 serverless 的时候,我们是新建两个,一个用于测试,一个是正式生产环境,然后通过API网关绑定,能用是能用,就是感觉不太方便,在开发到后期的时候 在试用期内,相关联的产品及均提供免费资源和专业的技术支持,帮助您的业快速、便捷地实现 Serverless!

    39763

    NGW,前端新技术赛场:Serverless SSR 技术内幕

    SSR 端渲染: 指在端将 HTML 渲染到前端,早期常用 php jsp 技术来在端生成 HTML,近年来 JS 同构化趋势演进下,逐步出现了在端上运行前端 JS 代码进行渲染的方案, 若能将 Serverless 技术落地到 SSR 场景,将会有如下优点: 资源理论上无限扩容,前端不必考虑业量对 SSR性能的影响 前端同学无需关注 SSR的运维、申请、扩容,减少部署运维成本 ,这时他犯难了: 部署直出需要申请机,申请多少台,申请几核的? Serverless 直译过来叫无,这里并不是说不需要,而是说开发者不需要关注,这部分由平台维护提供,开发者仅需关注业逻辑的开发即可。 ? 公有基础设施上的 Serverless 演进 考虑到直出的特性,阿 J 认为直出业十分适合上 Serverless,因此他立马开始了直出上的预研,做 Serveless SSR ,免去运维部署烦恼

    37130

    腾讯技术专家分享:Serverless 一站式原生应用开发实践

    的时代,更多的应用将迁移到端,原生基于的架构设计和开发模式,是一套全新的理念。 同时,为了追求速度体验和极致的 SEO 效果,技术管理者和架构师倾向于采用 SSR (Server Side Rendering) 技术来构建前端项目,以支持同构代码的端渲染。 经过不断的演化,Serverless 新技术正在逐步成为开发 SSR 原生应用的未来技术选型,越来越多的 SSR 原生应用选择基于 Serverless 技术来实现。 本次分享将向大家介绍,如何基于 Serverless 新技术,进行一站式的 SSR 原生应用的开发。 5.Serverless 原生应用落地实战 —— Serverless SSR 更多直播预告: 线上直播活动,主题聚焦在「新技术实践」,本次直播联合腾讯优图实验室、腾讯多媒体实验室、腾讯未来网络实验室

    27210

    Serverless 应用级监控能力 +SSR|在线分享第二期

    为了解决用户在业查询及监控等方面的痛点,带来更极致的开发体验。 同时,越来越多的客户对 SSR 的支持有着较强烈的诉求,腾讯 Serverless 为用户提供了一系列基于 SSR 框架开发的组件,用户可以通过 Serverless Framework 直接完成 SSR 项目在端的部署,实现 SEO 友好,加快首屏加载速度。 在试用期内,相关联的产品及均提供免费资源和专业的技术支持,帮助您的业快速、便捷地实现 Serverless! 复制以下链接至 PC 浏览访问:china.serverless.comexpress 3 秒极速部署,立即体验史上最快的 Serverless  HTTP 实战开发!

    50131

    「NGW」前端新技术赛场:Serverless SSR 技术内幕

    SSR 端渲染: 指在端将 HTML 渲染到前端,早期常用 php jsp 技术来在端生成 HTML,近年来 js 同构化趋势演进下,逐步出现了在端上运行前端 js 代码进行渲染的方案, 若能将 Serverless 技术落地到 SSR场景,将会有如下优点资源理论上无限扩容,前端不必考虑业量对 SSR性能的影响前端同学无需关注 SSR的运维、申请、扩容目前 NOW ,这时他犯难了:部署直出需要申请机,申请多少台,申请几核的? Serverless 直译过来叫无,这里并不是说不需要,而是说开发者不需要关注,这部分由平台维护提供,开发者仅需关注业逻辑的开发即可。 公有基础设施上的 Serverless 演进 考虑到直出的特性,阿 J 认为直出业十分适合上 Serverless,因此他立马开始了前端上的预研,做 Serveless SSR ,免去运维部署烦恼

    28110

    FaaS 给前端带来了什么?

    一.Serverless 与 FaaSServerless 是一种计算理念,即无计算(Serverless Computing):Serverless suggests that the cloud Pay only for the compute time you consume.直接运行代码,而无需考虑(的管理和配置),按所使用的计算时间计费的计算产品也就是说,开发者只需要上传代码, ):函数 SCF – 函数(Serverless Cloud Function,SCF)是腾讯为企业和开发者们提供的无执行环境,帮助您在无需购买和管理的情况下运行代码。 但 SSR 也面临着与 BFF 类似的问题,起一个 Demo 级的 SSR 渲染不难,而要上线一个高可用的 SSR 渲染引擎绝非易事FaaS 让的高可用要求变得触手可及,无状态的模板渲染工作尤其适合用函数来完成 :面向小客户的免费廉价方案越来越多:例如小程序、IoT 开发套餐等基于 FaaS 的 Web 框架与传统 Web 框架趋于统一:基于传统 Web 框架的应用能够低成本迁移过来SSR、CSRNSR

    57210

    Serverless 应用实践及典型案例解析

    因此紧急加分流,扛过了这一波活动。事后复盘如何避免这种突发请求量高峰,硬堆数量肯定不行,方向当时是考虑这么几个:弹性伸缩、容化、函数。 最终选择函数是因为它天然适合无状态 Http 的场景。首先从部署便捷性上讲,只需要关注到代码层面就好了,容、镜像、的概念完全不用理会。其次就是用多少花多少钱。 最早的时候前端应用其实就是 SSR,由端生成 Html 页面送到浏览端,后来为了提升工程化效率,在前端引入了组件和 MVVM 的开发模式,然后就有了 CSR,典型的如单页应用,通过在浏览端加载 Koot.js 是基于 React、Koa、Webpack 来架构的,其中用 Koa 搭建的 Node 作为开发和部署时候的 SSR ,页面渲染主要是用 React+Redux 完成的一套代码在浏览环境和 团队调研了几大厂商 Serverless ,综合比较后,选择了腾讯作为实现 SSR 的 Serverless 支持。

    7092519

    相关产品

    • Serverless  SSR

      Serverless SSR

      Serverless SSR 基于云上 Serverless 服务,开发了一系列服务端渲染框架组件,目前支持 Next.js, Nuxt.js 等常见 SSR 框架的快速部署,帮助用户实现框架迁移, “0”配置,SEO 友好,首屏加载速度快,为用户提供了便捷实用,开发成本低的网页应用项目的开发/托管能力。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券