Design and Architecture of the Hawaii Server-Side Rendering Framework

The Hawaii framework was created by JD Mobile Front‑End team to address the performance drawbacks of client‑side rendering (CSR) and the maintenance challenges of traditional server‑side rendering (SSR) implemented with Java, C++, or PHP. By leveraging Node.js, Hawaii enables true front‑end/back‑end code and template reuse while simplifying model‑layer data orchestration.

At its core is the Request Description Specification (RDS) file, a programmable JSON document that describes all data requests for a page, supporting complex parallel, serial, and conditional requests. The framework consists of a client side built on Gulp, a management console for page publishing and monitoring, and a unified SSR service that supports BigPipe, multi‑dimensional monitoring, and disaster recovery.

Developers write RDS files alongside regular front‑end code; the build process splits a page into header, footer, template, and RDS parts, which are uploaded to the management system. The SSR service parses the RDS recursively, fetching data, assembling JSON results, and rendering HTML in a BigPipe fashion, delivering the header first for fast CSS loading.

Hawaii also provides a front‑end engine that can parse the same RDS files in the browser, achieving true isomorphic rendering. It supports three page variants—synchronous (direct SSR), asynchronous (auto‑generated for client‑side rendering), and disaster‑recovery (static snapshots)—to handle different reliability scenarios.

Compared with React/Vue, Hawaii focuses on model‑layer complexity rather than view‑layer composition, offering deeper integration for data aggregation similar to GraphQL but without requiring schema definitions or changes to existing services. The framework includes comprehensive monitoring at service, page, and interface levels and a tiered error‑handling strategy.

Since its adoption in JD Mobile’s shopping entrance and major promotional events, Hawaii continues to evolve with plans for more efficient backend communication, aggregated interfaces, React/Vue component support, and automated scaling.