原创

什么是 SSR

什么是 SSR

SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单,就是服务端直接渲染出 HTML 字符串模板,浏览器可以直接解析该字符串模版显示页面,因此首屏的内容不再依赖 Javascript 的渲染(CSR - 客户端渲染)。

SSR 的核心优势:

  1. 首屏加载时间:因为是 HTML 直出,浏览器可以直接解析该字符串模版显示页面。
  2. SEO 友好:正是因为服务端渲染输出到浏览器的是完备的 html 字符串,使得搜索引擎 能抓取到真实的内容,利于 SEO。

SSR 需要注意的问题:

  1. 虽然 SSR 能快速呈现页面,但是在 UI 框架(比如 React)加载成功之前,页面是没法进行 UI 交互的。
  2. TTFB (Time To First Byte),即第一字节时间会变长,因为 SSR 相对于 CSR 需要在服务端渲染出更对的 HTML 片段,因此加载时间会变长。
  3. 更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面,显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例,它的 renderToString() 方法是同步 CPU 绑定调用,这就意味着在它完成之前,服务器是无法处理其他请求的。因此在高并发场景,需要准备相应的服务器负载,并且做好缓存策略。

什么是 Serverless

Serverless,它是云计算发展过程中出现的一种计算资源的抽象,依赖第三方服务,开发者可以更加专注的开发自己的业务代码,而无需关心底层资源的分配、扩容和部署。

特点:

  1. 开发者只需要专注于业务,无需关心底层资源的分配、扩容和部署
  2. 按需使用和收费
  3. 自动扩缩容

更详细的有关 Serverless 介绍,推荐阅读:精读《Serverless 给前端带来了什么》

Serverless + SSR

结合 Serverless 和 SSR 的特点,我们可以发现他们简直是天作之合。借助 Serverless,前端团队无需关注 SSR 服务器的部署、运维和扩容,可以极大地减少部署运维成本,更好的聚焦业务开发,提高开发效率。

同时也无需关心 SSR 服务器的性能问题,理论上 Serverless 是可以无限扩容的(当然云厂商对于一般用户是有扩容上限的)。

如何快速将 SSR 应用 Serverless 化?

既然说 Serverless 对于 SSR 来说有天然的优势,那么我们如何将 SSR 应用迁移到Serverless 架构上呢?

本文将以 Next.js 框架为例,带大家快速体验部署一个 Serverless SSR 应用。

借助 Serverless Framework 的 Nextjs 组件,基本可以实现无缝迁移到腾讯云云函数 SCF 上。

1. 初始化 Next.js 项目

$ npm init next-app serverless-next
$ cd serverless-next

# 编译静态文件
$ npm run build

2. 全局安装 Serverless CLI

$ npm install serverless -g

3. 配置 severless.yml

org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo

inputs:
  src: ./
  functionName: nextjsDemo
  region: ap-guangzhou
  runtime: Nodejs10.15
  exclude:
    - .env
  apigatewayConf:
    protocols:
      - https
    environment: release

4. 部署

部署时需要进行身份验证,如您的账号未 登录 或 注册 腾讯云,您可以直接通过 微信 扫描命令行中的二维码进行授权登陆和注册。当然你也可以直接在项目下面创建 .env 文件,配置腾讯云的 SecretId 和 SecretKey。如下:

TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123

执行部署命令:

$ serverless deploy

以下 serverless 命令全部简写为 sls.

部署成功后,直接访问 API 网关生成的域名,这里是就可以了。

类似 https://service-xxx-xxx.gz.apigw.tencentcs.com/release/ 这种链接。

现有 Next.js 应用迁移

如果你的项目是基于 Express.js 的自定义 Server,那么需要在项目根目录新建 sls.js 入口文件,只需要将原来启动 Node.js Server 的入口文件复制到 sls.js 中,然后进行少量改造就好,默认入口 sls.js 文件如下:

const express = require('express');
const next = require('next');
const app = next({ dev: false });
const handle = app.getRequestHandler();

// 将原来的服务逻辑放入到异步函数 `createServer()`中
async function createServer() {
  // 内部内容需要根据项目需求进行修改就好,基本是你的 `server.js` 的原代码
  await app.prepare();
  const server = express();

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  // 定义返回二进制文件类型
  // 由于 Next.js 框架默认开启 `gzip`,所以这里需要配合为 `['*/*']`
  // 如果项目关闭了 `gzip` 压缩,那么对于图片类文件,需要定制化配置,比如 `['image/jpeg', 'image/png']`
  server.binaryTypes = ['*/*'];

  return server;
}

// export 函数 createServer()
module.exports = createServer;

添加入口文件后,重新执行部署命令 sls deploy 就 OK 了。

Serverless 部署方案的优化

至此,我们已经成功将整个 Next.js 应用迁移到腾讯云的 Serverless 架构上了,但是这里有个问题,就是所有的静态资源都部署到了云函数 SCF 中,这就导致我们每次页面请求的同时,会产生很多静态源请求,对于 SCF 来说同一时间并发会比较高,而且很容易造成冷启动。而且大量静态资源通过 SCF 输出,然后经过 API 网关返回,会额外增加链路长度,也会导致静态资源加载慢,无形中也会拖累网页的加载速度。

云厂商一般会提供云对象存储功能,腾讯云叫 COS(对象存储),用它来存储我们的静态资源有天然的优势。而且开始使用有 50GB!!! 的免费容量(用来存喜爱的高清电影也是不错的吧~)。

要是在我们项目部署时,将静态资源统一上传到 COS,然后静态页面通过 SCF 渲染,这样既支持了 SSR,也解决了静态资源访问问题。而且 COS 也支持 CDN 加速,这样静态资源优化就更加方便。

那么我们如何将静态资源上传到 COS 呢?

普通青年做法

登录 [腾讯云 COS 控制台](https://console.cloud.tencent.com/cos5) -> 创建存储桶 -> 获取 COS 访问链接 -> 构建 Next.js 项目 -> 点击 COS 上传按钮 -> 选择上传文件 -> 开始上传 -> 完成

文艺青年做法

配置 COS 组件 -> 构建 Next.js 项目 -> 执行部署 COS 组件命令 -> 完成

接下来我们一起学习下文艺青年是如何做的。

在项目下创建 COS 文件夹,创建 cos/serverless.yml 配置文件:

org: orgDemo
app: appDemo
stage: dev
component: cos
name: serverless-cos

inputs:
  # src 配置成你的next项目构建的目标目录
  src: ../.next/static
  # 由于 next框架在访问静态文件会自动附加 _next 前缀,所以这里需要配置上传 COS 的目标目录为 /_next
  targetDir: /_next/static
  bucket: serverless-bucket
  region: ap-guangzhou
  protocol: https
  acl:
    permissions: public-read

根据 COS 访问链接生成规则:

<protocol>://<bucket-name>-<appid>.cos.<region>.myqcloud.com

可以直接推断出部署后的访问 URL 为:https://serverless-bucket-1251556596.cos.ap-guangzhou.myqcloud.com

然后在项目更目录新建 next.config.js 文件,配置 assetPrefix 为该链接:

const isProd = process.env.NODE_ENV === 'production';
module.exports = {
  assetPrefix: isProd
    ? 'https://serverless-bucket-1251556596.cos.ap-guangzhou.myqcloud.com'
    : '',
};

注意:如果你是直接给该 COS 配置了 CDN 域名。

然后执行构建:

$ npm run build

然后部署命令新增部署到 cos 命令执行就好:

$ sls deploy --target=./cos && sls deploy

然后我们就可以耐心等待部署完成。

Serverless + Next.js 部署流程图

优化后项目整体部署流程图如下:

起初虽然看起来步骤很多,但是项目配置一次后,之后部署,只需要执行构建和部署命令,就可以了。

性能分析

依赖 Serverless Component, 虽然我们可以快速部署 SSR 应用。但是对于开发者来说,性能才是最重要的。那么 Serverless 方案的性能表现如何呢?

为了跟传统的 SSR 服务做对比,我专门找了一台 CVM (腾讯云服务器),然后部署相同的 Next.js 应用。分别进行压测和性能分析。

压测配置如下:

起始人数

每阶段增加人数

每阶段持续时间(s)

最大人数

发包间隔时间(ms)

超时时间(ms)

5

5

30

100

0

10000

本文压测使用的是 腾讯 WeTest。

页面访问性能对比

均使用 Chrome 浏览器

方案

配置

TTFB

FCP

TTI

腾讯云 CVM

2 核,4G 内存,10M 带宽

50.12ms

2.0s

2.1s

腾讯云 Serverless

128M 内存

69.88ms

2.0s

2.2s

压测性能对比

1.响应时间:

方案

配置

最大响应时间

P95 耗时

P50 耗时

平均响应时间

腾讯云 CVM

2 核,4G 内存,10M 带宽

8830ms

298ms

35ms

71.05 ms

腾讯云 Serverless

128M 内存

1733ms

103ms

73ms

76.78 ms

2.TPS:

方案

配置

平均 TPS

腾讯云 CVM

2 核,4G 内存,10M 带宽

727.09 /s

腾讯云 Serverless

128M 内存

675.59 /s

价格预算对比

直接上图:

对比分析

从单用户访问页面性能表现来看 Serverless 方案略逊于服务器方案,但是页面性能指标是可以优化的。从压测来看,虽然 Serverless 的 平均响应时间 略大于 CVM,但是 最大响应时间 和 P95耗时 均优于 CVM 很多,CVM 的最大响应时间甚至接近 Serverless 的 3倍。而且当并发量逐渐增大时,CVM 的响应时间变化明显,而且越来越大,而 Serverless 则表现平稳,除了极个别的冷启动,基本能在 200ms 以内。

由此可以看出,随着并发的增加,SSR 会导致服务器负荷越来越大,从而会加大服务器的响应时间;而 Serverless 由于具有自动扩缩的能力,所以相对比较平稳。

当然由于测试条件有限,可能会有考虑不够全面的地方,但是从压测图形来看,是完全符合理论预期的。

但是从价格对比来看,接近配置的 Serverless 方案基本不怎么花钱,甚至很多时候,免费额度就已经可以满足需求了,这里为了增加 Serverless 费用,估计调大了调用次数,内存大小,但是即便如此,服务器方案还是接近 Serverless 方案的 10 倍!!!!!。

最后

写到这,作为一名前端开发,我的内心是无比激动的。记得以前在项目中为了优化首屏时间和 SEO,就做个好几个方案的对比,但是最终因为公司运维团队的不够配合,最后放弃了 SSR,最后选择了前端可掌控的 预渲染方案。现在有了 Serverless,前端终于不用受运维的限制,可以基于 Serverless 来大胆的尝试 SSR。而且借助 Serverless,前端还可以做的更多。

当然真正的 SSR 并不止如此,要达到页面极致体验我们还需要做很多工作,比如:

  1. 静态资源部署到 CDN
  2. 页面缓存
  3. 降级处理
  4. ...

但是这些无论是部署到服务器还是 Serverless,都是我们需要做的工作。并不会成为我们将 SSR 部署到 Serverless 的绊脚石。

如果你对 Serverless Component 开发感兴趣,欢迎一起学习讨论。

Serverless Framework 30 天试用计划

我们诚邀您来体验最便捷的 Serverless 开发和部署方式。在试用期内,相关联的产品及服务均提供免费资源和专业的技术支持,帮助您的业务快速、便捷地实现 Serverless!

详情可查阅:Serverless Framework 试用计划

One More Thing

3 秒你能做什么?喝一口水,看一封邮件,还是 —— 部署一个完整的 Serverless 应用?

复制链接至 PC 浏览器访问:https://serverless.cloud.tencent.com/deploy/express

3 秒极速部署,立即体验史上最快的 Serverless HTTP 实战开发!

传送门:

  • GitHub: github.com/serverless
  • 官网:serverless.com

欢迎访问:Serverless 中文网,您可以在 最佳实践 里体验更多关于 Serverless 应用的开发!


推荐阅读:《Serverless 架构:从原理、设计到项目实战》## 什么是 SSR

SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单,就是服务端直接渲染出 HTML 字符串模板,浏览器可以直接解析该字符串模版显示页面,因此首屏的内容不再依赖 Javascript 的渲染(CSR - 客户端渲染)。

SSR 的核心优势:

  1. 首屏加载时间:因为是 HTML 直出,浏览器可以直接解析该字符串模版显示页面。
  2. SEO 友好:正是因为服务端渲染输出到浏览器的是完备的 html 字符串,使得搜索引擎 能抓取到真实的内容,利于 SEO。

SSR 需要注意的问题:

  1. 虽然 SSR 能快速呈现页面,但是在 UI 框架(比如 React)加载成功之前,页面是没法进行 UI 交互的。
  2. TTFB (Time To First Byte),即第一字节时间会变长,因为 SSR 相对于 CSR 需要在服务端渲染出更对的 HTML 片段,因此加载时间会变长。
  3. 更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面,显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例,它的 renderToString() 方法是同步 CPU 绑定调用,这就意味着在它完成之前,服务器是无法处理其他请求的。因此在高并发场景,需要准备相应的服务器负载,并且做好缓存策略。

什么是 Serverless

Serverless,它是云计算发展过程中出现的一种计算资源的抽象,依赖第三方服务,开发者可以更加专注的开发自己的业务代码,而无需关心底层资源的分配、扩容和部署。

特点:

  1. 开发者只需要专注于业务,无需关心底层资源的分配、扩容和部署
  2. 按需使用和收费
  3. 自动扩缩容

更详细的有关 Serverless 介绍,推荐阅读:精读《Serverless 给前端带来了什么》

Serverless + SSR

结合 Serverless 和 SSR 的特点,我们可以发现他们简直是天作之合。借助 Serverless,前端团队无需关注 SSR 服务器的部署、运维和扩容,可以极大地减少部署运维成本,更好的聚焦业务开发,提高开发效率。

同时也无需关心 SSR 服务器的性能问题,理论上 Serverless 是可以无限扩容的(当然云厂商对于一般用户是有扩容上限的)。

如何快速将 SSR 应用 Serverless 化?

既然说 Serverless 对于 SSR 来说有天然的优势,那么我们如何将 SSR 应用迁移到Serverless 架构上呢?

本文将以 Next.js 框架为例,带大家快速体验部署一个 Serverless SSR 应用。

借助 Serverless Framework 的 Nextjs 组件,基本可以实现无缝迁移到腾讯云云函数 SCF 上。

1. 初始化 Next.js 项目

$ npm init next-app serverless-next
$ cd serverless-next

# 编译静态文件
$ npm run build

2. 全局安装 Serverless CLI

$ npm install serverless -g

3. 配置 severless.yml

org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo

inputs:
  src: ./
  functionName: nextjsDemo
  region: ap-guangzhou
  runtime: Nodejs10.15
  exclude:
    - .env
  apigatewayConf:
    protocols:
      - https
    environment: release

4. 部署

部署时需要进行身份验证,如您的账号未 登录 或 注册 腾讯云,您可以直接通过 微信 扫描命令行中的二维码进行授权登陆和注册。当然你也可以直接在项目下面创建 .env 文件,配置腾讯云的 SecretId 和 SecretKey。如下:

TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123

执行部署命令:

$ serverless deploy

以下 serverless 命令全部简写为 sls.

部署成功后,直接访问 API 网关生成的域名,这里是就可以了。

类似 https://service-xxx-xxx.gz.apigw.tencentcs.com/release/ 这种链接。

现有 Next.js 应用迁移

如果你的项目是基于 Express.js 的自定义 Server,那么需要在项目根目录新建 sls.js 入口文件,只需要将原来启动 Node.js Server 的入口文件复制到 sls.js 中,然后进行少量改造就好,默认入口 sls.js 文件如下:

const express = require('express');
const next = require('next');
const app = next({ dev: false });
const handle = app.getRequestHandler();

// 将原来的服务逻辑放入到异步函数 `createServer()`中
async function createServer() {
  // 内部内容需要根据项目需求进行修改就好,基本是你的 `server.js` 的原代码
  await app.prepare();
  const server = express();

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  // 定义返回二进制文件类型
  // 由于 Next.js 框架默认开启 `gzip`,所以这里需要配合为 `['*/*']`
  // 如果项目关闭了 `gzip` 压缩,那么对于图片类文件,需要定制化配置,比如 `['image/jpeg', 'image/png']`
  server.binaryTypes = ['*/*'];

  return server;
}

// export 函数 createServer(www.changanylzc.com
module.exports = createServer;

添加入口文件后,重新执行部署命令 sls deploy 就 OK 了。

Serverless 部署方案的优化

至此,我们已经成功将整个 Next.js 应用迁移到腾讯云的 Serverless 架构上了,但是这里有个问题,就是所有的静态资源都部署到了云函数 SCF 中,这就导致我们每次页面请求的同时,会产生很多静态源请求,对于 SCF 来说同一时间并发会比较高,而且很容易造成冷启动。而且大量静态资源通过 SCF 输出,然后经过 API 网关返回,会额外增加链路长度,也会导致静态资源加载慢,无形中也会拖累网页的加载速度。

云厂商一般会提供云对象存储功能,腾讯云叫 COS(对象存储),用它来存储我们的静态资源有天然的优势。而且开始使用有 50GB!!! 的免费容量(用来存喜爱的高清电影也是不错的吧~)。

要是在我们项目部署时,将静态资源统一上传到 COS,然后静态页面通过 SCF 渲染,这样既支持了 SSR,也解决了静态资源访问问题。而且 COS 也支持 CDN 加速,这样静态资源优化就更加方便。

那么我们如何将静态资源上传到 COS 呢?

普通青年做法

登录 [腾讯云 COS 控制台](https://www.51kunlunyule.com console.cloud.tencent.com/cos5) -> 创建存储桶 -> 获取 COS 访问链接 -> 构建 Next.js 项目 -> 点击 COS 上传按钮 -> 选择上传文件 -> 开始上传 -> 完成

文艺青年做法

配置 COS 组件 -> 构建 Next.js 项目 -> 执行部署 COS 组件命令 -> 完成

接下来我们一起学习下文艺青年是如何做的。

在项目下创建 COS 文件夹,创建 cos/serverless.yml 配置文件:

org: www.yaoshiyulegw.com orgDemo
app: appDemo
stage: dev
component: cos
name: serverless-cos

inputs:
  # src 配置成你的next项目构建的目标目录
  src: ../.next/static
  # 由于 next框架在访问静态文件会自动附加 _next 前缀,所以这里需要配置上传 COS 的目标目录为 /_next
  targetDir: www.yixingylzc.cn /_next/static
  bucket: serverless-bucket
  region: ap-guangzhou
  protocol: https
  acl:
    permissions: public-read

根据 COS 访问链接生成规则:

<protocol>://<bucket-name>-www.haojiangyule.com<appid>.cos.<region>.myqcloud.com

可以直接推断出部署后的访问 URL 为:https: www.xingtuylgw.com serverless-bucket-1251556596.cos.ap-guangzhou.myqcloud.com

然后在项目更目录新建 next.config.js 文件,配置 assetPrefix 为该链接:

const isProd = process.env.NODE_ENV ==www.lexuancaizc.cn= 'production';
module.exports = {
  assetPrefix: isProd
    ? 'https://serverless-bucket-1251556596.cos.ap-guangzhou.myqcloud.com'
    : '',
};

注意:如果你是直接给该 COS 配置了 CDN 域名。

然后执行构建:

$ npm run build

然后部署命令新增部署到 cos 命令执行就好:

$ sls deploy --target=./cos && sls deploy

然后我们就可以耐心等待部署完成。

Serverless + Next.js 部署流程图

优化后项目整体部署流程图如下:

起初虽然看起来步骤很多,但是项目配置一次后,之后部署,只需要执行构建和部署命令,就可以了。

性能分析

依赖 Serverless Component, 虽然我们可以快速部署 SSR 应用。但是对于开发者来说,性能才是最重要的。那么 Serverless 方案的性能表现如何呢?

为了跟传统的 SSR 服务做对比,我专门找了一台 CVM (腾讯云服务器),然后部署相同的 Next.js 应用。分别进行压测和性能分析。

压测配置如下:

起始人数

每阶段增加人数

每阶段持续时间(s)

最大人数

发包间隔时间(ms)

超时时间(ms)

5

5

30

100

0

10000

本文压测使用的是 腾讯 WeTest。

页面访问性能对比

均使用 Chrome 浏览器

方案

配置

TTFB

FCP

TTI

腾讯云 CVM

2 核,4G 内存,10M 带宽

50.12ms

2.0s

2.1s

腾讯云 Serverless

128M 内存

69.88ms

2.0s

2.2s

压测性能对比

1.响应时间:

方案

配置

最大响应时间

P95 耗时

P50 耗时

平均响应时间

腾讯云 CVM

2 核,4G 内存,10M 带宽

8830ms

298ms

35ms

71.05 ms

腾讯云 Serverless

128M 内存

1733ms

103ms

73ms

76.78 ms

2.TPS:

方案

配置

平均 TPS

腾讯云 CVM

2 核,4G 内存,10M 带宽

727.09 /s

腾讯云 Serverless

128M 内存

675.59 /s

价格预算对比

直接上图:

对比分析

从单用户访问页面性能表现来看 Serverless 方案略逊于服务器方案,但是页面性能指标是可以优化的。从压测来看,虽然 Serverless 的 平均响应时间 略大于 CVM,但是 最大响应时间 和 P95耗时 均优于 CVM 很多,CVM 的最大响应时间甚至接近 Serverless 的 3倍。而且当并发量逐渐增大时,CVM 的响应时间变化明显,而且越来越大,而 Serverless 则表现平稳,除了极个别的冷启动,基本能在 200ms 以内。

由此可以看出,随着并发的增加,SSR 会导致服务器负荷越来越大,从而会加大服务器的响应时间;而 Serverless 由于具有自动扩缩的能力,所以相对比较平稳。

当然由于测试条件有限,可能会有考虑不够全面的地方,但是从压测图形来看,是完全符合理论预期的。

但是从价格对比来看,接近配置的 Serverless 方案基本不怎么花钱,甚至很多时候,免费额度就已经可以满足需求了,这里为了增加 Serverless 费用,估计调大了调用次数,内存大小,但是即便如此,服务器方案还是接近 Serverless 方案的 10 倍!!!!!。

最后

写到这,作为一名前端开发,我的内心是无比激动的。记得以前在项目中为了优化首屏时间和 SEO,就做个好几个方案的对比,但是最终因为公司运维团队的不够配合,最后放弃了 SSR,最后选择了前端可掌控的 预渲染方案。现在有了 Serverless,前端终于不用受运维的限制,可以基于 Serverless 来大胆的尝试 SSR。而且借助 Serverless,前端还可以做的更多。

当然真正的 SSR 并不止如此,要达到页面极致体验我们还需要做很多工作,比如:

  1. 静态资源部署到 CDN
  2. 页面缓存
  3. 降级处理
  4. ...

但是这些无论是部署到服务器还是 Serverless,都是我们需要做的工作。并不会成为我们将 SSR 部署到 Serverless 的绊脚石。

如果你对 Serverless Component 开发感兴趣,欢迎一起学习讨论。

Serverless Framework 30 天试用计划

我们诚邀您来体验最便捷的 Serverless 开发和部署方式。在试用期内,相关联的产品及服务均提供免费资源和专业的技术支持,帮助您的业务快速、便捷地实现 Serverless!

详情可查阅:Serverless Framework 试用计划

One More Thing

3 秒你能做什么?喝一口水,看一封邮件,还是 —— 部署一个完整的 Serverless 应用?

复制链接至 PC 浏览器访问:https://serverless.cloud.tencent.com/deploy/express

3 秒极速部署,立即体验史上最快的 Serverless HTTP 实战开发!

传送门:

  • GitHub: www.yuanyyleezc.cn  github.com/serverless
  • 官网: www.jintianxuesha.com serverless.com

欢迎访问:Serverless 中文网,您可以在 最佳实践 里体验更多关于 Serverless 应用的开发!


推荐阅读:《Serverless 架构:从原理、设计到项目实战》

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 面试官:SSR解决了什么问题?有做过SSR吗?你是怎么做的?

    指由服务侧完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程

    @超人
  • 【Web技术】503- 当 SSR 遇上 Serverless,轻松实现页面瞬开

    最近随着 Rax SSR 完成渲染性能 6x React 的提升,以及工程上 Serverless 发布形式的对接,我想是时候跟大家介绍下 Rax SSR 了。

    pingan8787
  • 当 SSR 遇上 Serverless,轻松实现页面瞬开

    最近随着 Rax SSR 完成渲染性能 6x React 的提升,以及工程上 Serverless 发布形式的对接,我想是时候跟大家介绍下 Rax SSR 了。

    ConardLi
  • SSR 技术概述

    服务端渲染的概念这几年可以说是炒得火热,它不是一种新型的技术,而是互联网最开始时所使用的加载技术。

    隐逸王
  • 手动为 SAP Spartacus 添加 SSR 支持的步骤

    在用 SAP Spartacus 开发的 store 里,能看到 devDependencies 里具有 @spartacus/schematics 的依赖:

    Jerry Wang
  • SSR 与当年的 JSP、PHP 有什么区别?

    也就是说,历经 SSR 到 CSR 的大变革之后,如今又从 CSR 出发去探索 SSR 的可能性……似乎兜兜转转又回到了起点,在这之间发生了什么?如今的 SSR...

    ayqy贾杰
  • SAP Spartacus 3.3.0 版本服务器端渲染的优化

    https://sap.github.io/spartacus-docs/server-side-rendering-optimization/

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

    点击领取新用户礼包-> 选择您最常用的编程语言,体验 Serverless Demo >>

    腾讯云serverless团队
  • 什么是RPC? RPC是什么?

    服务提供者提供 —- 消费者消费 服务提供者在青岛捞海鲜,消费者坐在新疆的餐馆里点了一盘麻辣小龙虾 这中间的过程就是RPC

    星尘的一个朋友
  • 什么是Hadoop?什么是HDFS?

    什么是Hadoop?什么是HDFS?马 克-to-win @ 马克java社区:Hadoop是Apache基金会开发的一个分布式系统基础架构。比如前面我们接触的...

    马克java社区
  • Vue SSR入门实战

    最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备。如果对 Vue SSR 完全不了解,请先阅读官...

    前端迷
  • vue ssr服务器渲染:浏览器输入url后发生了什么

    主要介绍一下怎么由vue-cli应用经过修改,变成能用于服务端和客户端的通用同构代码。希望能给到新接触SSR的的同学一些指导~

    shirishiyue
  • 不改一行代码!快速部署 Next.js 博客到 Serverless SSR

    近期,腾讯云 Serverless 团队发布了 Serverless SSR 产品,支持将 Next.js,Nuxt.js 等框架的应用快速部署和托管,那么,...

    腾讯云serverless团队
  • 看懂 Serverless SSR,这一篇就够了!

    作者:Adrian S. 译者:王俊杰,王天云 审校:王俊杰,江柳 了解我们如何为每个Webiny网站获得出色的SEO支持,以及如何在无服务器环境中使用SS...

    腾讯云serverless团队
  • 这个ssr 开发骨架有点帅

    前段时间一直在研究react ssr 技术,也很想自己写一个 ssr开发骨架,有了自己的骨架后就不需要在用 ejs 模板了,直接用 jsx 就可以了,技术栈也就...

    zz_jesse
  • React18:新的SSR架构解决了什么问题?

    React 官方在前几天(6/8)发表了新的文章The Plan for React 18[2],新增了一些功能,

    公众号@魔术师卡颂
  • React Server Components

    2020 年的圣诞节前,React 团队放出了 Server Components 的相关消息,而此前,我恰好在研究 SSR(Server-Side Rende...

    ayqy贾杰
  • vue 随记(5):性能的飞跃

    尤雨溪的B站直播介绍到更新相比于vue2有1.3~2倍的性能优势。那么vue3比vue2块在哪里?

    一粒小麦
  • Serverless SSR 技术在「腾讯在线教育」中的实践

    腾讯在线教育团队在传统的 Web 应用方向其实有很多技术方面的尝试,包括传统离线包、PWA 离线应用等,但是每个技术栈都有其优点与缺点,目前团队的技术方案对比如...

    腾讯云serverless团队

扫码关注云+社区

领取腾讯云代金券