How Edge Computing Transforms High‑Traffic Content Rendering and Cuts Server Load by 80%
This article explains how leveraging edge computing, CDN‑based SSR caching, and TESI tags can dramatically improve first‑screen performance, reduce server pressure, and enable efficient static rendering for massive, mostly static content while maintaining up‑to‑date data and robust fallback mechanisms.
Business Characteristics
The content‑detail service handles billions of items that grow daily, requires massive server resources, and most data is static with rare updates.
Problem Summary
First‑screen rendering depends on multiple requests, causing poor performance on low‑end devices.
Server load is high because each request reaches the backend.
Identical content is rendered repeatedly without sharing results.
Bold Thinking
Pre‑rendering at Development Time
Rejected due to the massive content volume and high update cost.
On‑Demand Static Rendering
Cache the result of rendering static data at request time, avoiding the renderToHTML step.
SSR Result Caching
Reduces duplicate rendering and improves first‑screen performance.
Lowers backend service pressure.
Avoids wasteful resource usage.
Challenges include increased white‑screen time, SSR server load, and cache storage complexity.
Edge Computing (ER) Solution
Deploy rendering logic on CDN edge nodes, enabling custom scripts before response, controlling HTTP status, and handling cache updates for time‑sensitive data.
Benefits
First‑screen loads within 1 s on low‑end devices.
Business metrics improve significantly.
Server pressure reduced by ~80%.
TESI Tags and Standardization
Introduce Taobao Edge Side Includes (TESI) to embed data pre‑load, edge rendering, SSR static‑caching, redirects, and fragment inclusion directly in HTML or JS.
Tag
Description
tesi:data
Data pre‑load
tesi:esr
Edge rendering
tesi:ssr
SSR static‑caching
tesi:redirect
Logical redirect
tesi:include
Fragment injection
Cache Management
ER provides in‑memory cache and Swift KV cache. In‑memory cache offers higher QPS and speed, while KV offers larger capacity (tens of GB) and lower side effects.
A two‑level cache strategy stores hot content in memory and less‑frequent data in KV, using LRU eviction and per‑tag cache quotas.
Cache Invalidation
Cache entries must be quickly cleared on data or bundle updates, with invalidation driven by request tags.
Deployment Process
TESI tags are generated via a controlled operation platform and released through the DEF publishing system, ensuring safety and standard compliance.
Glossary
ER: EdgeRoutine
ESR: Edge Side Render
SSR: Server Side Render
ESI: Edge Side Includes
TESI: Taobao Edge Side Includes
DEF: Alibaba front‑end publishing system
Swift: Alibaba Cloud CDN storage
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Taobao Frontend Technology
The frontend landscape is constantly evolving, with rapid innovations across familiar languages. Like us, your understanding of the frontend is continually refreshed. Join us on Taobao, a vibrant, all‑encompassing platform, to uncover limitless potential.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.