CarNext: A Customized Server‑Side Rendering Framework Based on Next.js for 58.com Automotive Business

Performance optimization for consumer‑facing web interfaces is an ongoing challenge; as front‑end technologies evolve, server‑side rendering (SSR) solutions such as Next.js—an open‑source framework built on React—have become the state‑of‑the‑art approach.

In the 58.com automotive business, the team extended Next.js with domain‑specific considerations to create a customized solution called CarNext, which powers many car‑related services.

Background

With the rise of front‑end/back‑end separation, coupling points are reduced to data APIs and HTML rendering. Traditional SSR (full back‑end rendering) is tightly coupled, while CSR‑based SPA offers complete decoupling but suffers from SEO drawbacks and initial white‑screen delays.

SPA Architecture

The SPA workflow centers on the front‑end consuming APIs; the back‑end only provides data. This design simplifies development but requires strategies such as lazy loading, skeleton screens, and SEO workarounds to mitigate its two main drawbacks: loss of SEO and perceived white‑screen time.

Node as a Middle Layer

Introducing a Node.js middle layer retains the API‑centric decoupling while allowing proxy, route handling, and HTML rendering on the server. Benefits include eliminating cross‑origin configuration, consolidating disparate APIs, and shifting HTML templating to Node, leaving the back‑end to focus solely on data services.

Isomorphic JavaScript with React

Isomorphic (or universal) JavaScript enables the same code to run both in the browser and on the server. By rendering React components on the server via Node, the approach yields SEO‑friendly HTML and fast first‑paint experiences.

Challenges of Building a Custom SSR Framework

Key challenges include synchronizing front‑end and back‑end routing, sharing Redux state between client and server, and handling server‑side data fetching for first‑screen rendering without blocking the client.

CarNext Architecture Based on Next.js

Next.js provides built‑in routing, data handling, and extensibility (Babel, Webpack, Express/Koa). CarNext extends it with:

Data management via Redux wrapped in a Higher‑Order Component (HOC) for unified state.

Proxy middleware that forwards API requests prefixed with /api to avoid CORS issues.

Error‑logging middleware (koa‑json‑error) that stores logs in MongoDB for quick troubleshooting.

CSS/SASS configuration for styling.

The overall framework diagram shows the flow from client requests → Node middle layer (CarNext) → API proxy or Next.js rendering → final HTML response.

Practical Benefits

Home‑page rendering speed doubled compared to pure client‑side rendering.

Node‑based proxy solved cookie loss in Android WebView cross‑origin requests.

Internal network requests via Node reduced latency dramatically.

Centralized error logs accelerated issue diagnosis.

Conclusion and Planning

For activity pages or hybrid features, SPA remains suitable; for back‑office systems, a Node middle layer works well; and for SEO‑critical pages, isomorphic JavaScript with SSR offers the best balance of performance and search visibility.