Improving Iconfont Platform Performance with React Isomorphic Rendering

The author, a front‑end engineer at Qunar since 2014, describes the internal iconfont platform that, while reducing client bundle size and improving development efficiency, suffered from a bloated architecture causing low runtime efficiency and page stutter.

The legacy system used a midway front‑end/back‑end separation with a Node middle layer for rendering, but the server‑side rendering and client‑side routing remained disjoint, leading to redundant code and inconsistent rendering pipelines.

Although traditional MVC kept JavaScript limited to the view layer, growing front‑end complexity made separation necessary; however, with Node supporting JavaScript on the server, the language mismatch disappeared, and the need for strict separation diminished, evolving into a separation of data provision and rendering.

Mixing front‑end and back‑end rendering introduced template conflicts: the server used Handlebars while the client used Avalon MVVM, requiring a second DOM render to achieve two‑way binding, preventing direct output from the server.

React’s virtual DOM solves this by diffing state changes without scanning the DOM, allowing the server to render the final DOM directly; if the client’s virtual DOM matches, no additional DOM manipulation is needed, greatly improving render speed.

To build an isomorphic application, the project ensures consistency in two areas: the package manager (npm for both front‑end and Node) and the module system (CommonJS via webpack), enabling seamless code sharing between server and client.

The React ecosystem—React, react‑router, and Redux—provides full support for server‑side rendering. ReactDOM offers ReactDOM.render for client rendering and ReactDOM.renderToString for server rendering, adding a data-react-checksum attribute to verify template consistency.

Lifecycle methods differ: on the server only componentWillMount runs, so data‑fetching logic belongs there, while client‑only logic can use componentDidMount .

react‑router handles routing on both sides; the match function finds the appropriate component, and the <Router> component declaratively manages URL changes.

Redux supports SSR by initializing a single store on the server, embedding its state as JSON in the generated HTML, and rehydrating the same state on the client to guarantee identical DOM structures.

After migrating to the React isomorphic architecture, first‑page render time dropped from about 1500 ms to 230 ms, the codebase was consolidated from two projects into one, and development efficiency, maintainability, and SEO all improved significantly.

The author encourages teams using a Node middle layer to try React isomorphic solutions to boost development speed and front‑page performance.