Xianyu's Server-Side Rendering Architecture and Implementation

Background: Reducing time to first meaningful paint (FMP) is a key goal for front‑end engineers. Traditional client‑side techniques such as data prefetching and offline cache depend on client capabilities and have limitations.

Solution: Server‑Side Rendering (SSR) delivers the initial HTML directly from the server, shortening the time users see the first screen without relying on the client.

Key requirements for the SSR solution include shortening FMP, high stability with low O&M cost, and low development overhead.

Technical architecture: Xianyu adopts a serverless Node.js application on Alibaba Cloud Function‑as‑a‑Service. Two services are implemented in the Node layer: (1) data aggregation service that calls multiple Java back‑ends and merges the data for the first screen; (2) an HTTP service that renders the HTML page using the aggregated data.

A public gateway built on Nginx routes requests to the appropriate Node application while complying with the company’s “unified access” mechanism (routing, load balancing, security). CDN edge nodes cache the rendered HTML and provide edge‑computing scripts that automatically fall back to a CSR path when SSR fails.

CSR fallback: When SSR is unavailable, the client receives a minimal HTML layout, loads static assets, and fetches the first‑screen data via an mtop Ajax interface. The same data service used by SSR can be reused, avoiding extra back‑end development.

Performance impact: With CDN cache hit, the response time is the HTML RT; without cache, it adds Node rendering time. CSR adds HTML RT, JS download/execute time, and mtop latency. Real‑world measurements show a significant reduction in FMP compared with pure CSR.

Stability and O&M: Isolation of each front‑end application, CDN caching, and automatic edge‑node downgrade keep the system highly available and reduce operational effort.

Application structure: A template‑driven front‑end project produces a single source code base that can be built for both SSR and CSR scenarios. Node services are deployed to the Serverless marketplace; gateway configuration completes the integration.

Future work: The team plans to add gray‑release, monitoring, and rollback capabilities to further improve reliability.