ESR Optimizes Frontend Performance by Using Edge Computing Capabilities of CDN

Background

Overview and Underlying Principles

Idea 1: SSR

Idea 2: CSR and CDN

Idea 3: ESI

Rendering Process

Demo for Comparison

Unlimited Speed (Wi-Fi)

Limited Speed 4G

Limited Speed 3G

Architecture

Architecture Diagram

ESR

<html>
<head>
<linkrel="stylesheet"type="text/css"href="index.css">
<scriptsrc="index.js"></script><metaname="esr-version"content="0.0.1"/>
</head>
<body>
<div>staic content....</div>
<scripttype="esr/snippet/start"esr-id="111"content="SLICE"></script>
<div>dynamic content1....</div>
<scripttype="esr/snippet/end"></script>
<div>staic content....</div>
<scripttype="esr/snippet/start"esr-id="222"content="https://test.alibaba.com/snippet/222"></script>
<divid="222">
dynamic content2....
</div>
<scripttype="esr/snippet/end"></script>
</body>
</html>
<html>
<head>
<linkrel="stylesheet"type="text/css"href="index.css">
<scriptsrc="index.js"></script>
</head>
<body>
<div>staic content....</div>
<scripttype="esr/block"esr-id="111"content="https://test.alibaba.com/snippet/111"></script>
<div>staic content....</div>
<scripttype="esr/template"esr-id="222"content="https://test.alibaba.com/api/data">
<div>
{$data.name}
</div>
</script>
</body>
</html>

Edge Route

{
version: '0.0.1'//Configure the version number.
origin: 'us-proxy.alibaba.com',
host: 'edge.alibaba.com'
pages: [
{
pageName: 'seo', //The page name identifier.
match: '/abc/efg/.*', //The regular expression strings that match the path of the page.
renderConf: {
//Configure rendering.
renderType: 'ESR', //ESR.
templateType: 'FULL_HTML', //Template type: use the full HTML content generated by SSR as the template.
dynamicMode: 'WATER_FALL|ASYNC_INSERT', // Dynamic content is appended and returned: waterfall stream mode| asynchronous insertion (innerHTML).
templateUrl: ''// Template URL.
}
},
{
pageName: 'seo',
match: '/abc/efg/.*',
renderConf: {
renderType: 'ESR',
templateType: 'STATIC', // The static template that can be obtained through CDN URL.
dynamicMode: 'WATER_FALL|ASYNC_INSERT', // Dynamic content is appended and returned: waterfall stream mode| asynchronous insertion (innerHTML).
templateUrl: 'https://g.alicdn.com/@g/xxx.html'
}
},
{
pageName: 'jump',
match: '/jump/.*',
renderConf: {
renderType: 'REDIRECT_302', // 302 redirect.
rewriteUrl: 'https://jump'
}
},
{
pageName: 'proxy',
match: '/proxy/.*',
renderConf: {
renderType: 'PROXY_PASS', // 301 redirect.
rewriteUrl: 'https://proxypassurl'
}
}
]
}

Stability

Edge CDN Service Providers

Implementation Plan

Original Source:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com