How to Build a Real‑Time Dynamic Rendering Architecture for E‑Commerce Single‑Page Sites
This article explains a dynamic, template‑driven rendering architecture for e‑commerce single‑page applications, covering CMS configuration, multi‑version data storage in Redis, front‑end rendering flow, version rollback, gray‑release handling, and exception management.
Overall Architecture
Static page generation pushes generated files to servers, requiring atomic file switches when updating versions.
The dynamic solution consists of three subsystems: a CMS, a control system, and a front‑end display system.
CMS System
1. Configure page templates and data in the CMS.
1.1 Templates are stored as data in the CMS and published to Redis; the front‑end fetches them for rendering without restarting.
2. Original data is stored in MySQL (e.g., URLs, categories, carousel images, product sections).
3. The CMS assembles template and data into JSON and pushes it to Redis, offering three publish buttons: production, gray, and pre‑release versions.
Key issues addressed:
URL mapping to aggregated data (using URL as key or generated ID).
Multi‑version storage in Redis hashes with fields for production (timestamp), pre‑release ("predeploy"), and gray ("abVersion").
Gray‑release control via the control system.
Pre‑release access via URL parameters (e.g., predeploy=true) or internal network restrictions.
Template‑data compatibility ensured by storing snapshot pairs in Redis.
Front‑End Display System
1. Use the request URL as a key to fetch data from the local Redis.
2. If missing or error, fall back to the primary Redis.
3. If the primary Redis fails, call the CMS API to retrieve data from MySQL.
Example rendering flow:
-- 1, load Lua module
local template = require("resty.template")
template.load = function(s) return s end
-- 2, get template dynamically
local myTemplate = "<html>{* title *}</html>"
-- 3, get data dynamically
local data = {title = "iphone6s"}
-- 4, render template
local func = template.compile(myTemplate)
local content = func(data)
-- 5, output via ngx API
ngx.say(content)The template and data are fetched dynamically, then rendered together.
Version management workflow: pre‑release testing → gray release with CDN disabled → production release with a short cache window to mitigate faulty releases.
Control System
Manages version rollback and gray releases, optionally integrated into the CMS.
Version Rollback: Select a historical version and notify the front‑end to switch to it; remove the rollback config after fixing the issue.
Gray Release: Define URLs and traffic percentages for gray deployment; remove the configuration to stop gray release.
Data and Template Dynamization
Storing both data and templates dynamically in the CMS separates front‑end and back‑end responsibilities, allowing front‑end developers to focus on template design while back‑end engineers maintain the system.
Templates can be shared across multiple data sets; after a template change, batch push associated data, first as a pre‑release for testing, then as a production version.
Multi‑Version Mechanism
Supports three version types:
Pre‑release: Enables testing in a real environment.
Gray version: Simple toggle for A/B testing.
Production version: Stores multiple historical versions for quick rollback if issues arise.
Exception Handling
If both local and primary Redis instances fail, the front‑end directly calls the CMS HTTP service to fetch data from MySQL.
If rendering fails (e.g., 500/503 errors), the system falls back to the previous version's data.
For page layout errors, define an exception scanning module to detect anomalies, alert personnel, and automatically downgrade to a stable version.
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.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
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.