Node.js‑Based Server‑Side Rendering for Baidu Service Market

Glossary

The article begins with a list of terminology used throughout the discussion.

Business background

Baidu’s "爱采购" (Ai Procurement) platform is expanding into a service‑market line. The platform relies heavily on search traffic, and improving search ranking and user experience requires server‑side rendering (SSR).

Problem statement

The existing architecture uses PHP with a Smarty rendering engine. Front‑end engineers only produce static JavaScript bundles for the browser, while the back‑end dominates rendering. This tight coupling limits optimization and scalability.

Re‑starting point

Research shows that Node.js can perform SSR with performance comparable to PHP‑Smarty. The team therefore adopts Node.js as a rendering layer to empower the front‑end and enable cross‑platform collaboration.

Technical solution

The chosen SSR stack is node‑vue‑ssr, leveraging existing Vue expertise. Documentation reference: https://ssr.vuejs.org/zh/.

New challenges

Introducing both SSR and CSR logic increases code complexity.

Data handling via Nuxt.js’s asyncData leads to duplicated request logic and poor extensibility.

Performance suffers because each page requires manual request, error‑handling, and login‑state logic.

Layered architecture

The solution decomposes the system into five layers:

Node layer : fetches route data and performs SSR rendering.

Front‑end engineering layer : acts as a bridge between client and server, enabling a single codebase to run on both sides.

Data‑configuration layer : maintains a single source of truth for data, ensuring consistency between SSR and CSR.

State‑handling layer : filters fetched data, handling login status, request failures, etc., and passes only successful data to the page layer.

Page layer : focuses solely on UI interaction and rendering.

Configuration example

export default {
  // title
  "title": "服务市场",
  "name": "home",
  // route match
  "path": "/",
  // SSR flag
  "ssr": true,
  // request parameters
  "ajax": [
    // parallel interface
    {
      "path": "/home/info",
      // serial interface
      "children": [{
        "path": "/home/getProductConf",
        "params": {
          // depends on parent interface
          "name": 'parent.data[0].data.name'
        }
      }]
    },
    // another parallel interface
    {
      "path": "/home/getProductConf"
    }
  ]
}

This configuration enables three rendering modes per page:

SSR for SEO‑critical, high‑performance pages.

Data‑pre‑fetch for moderately interactive pages.

Pure CSR for static pages.

Performance comparison

Metrics show a clear advantage of SSR over progressive CSR:

CSR total load time: 1.7 s.

SSR total load time: 1.2 s (≈30 % faster).

First Paint (FP), First Contentful Paint (FCP), Largest Contentful Paint (LCP) and DOMContentLoaded (DCL) all improve significantly in SSR.

Advantages

SSR gives the project flexibility, better user experience, stronger functionality, faster iteration, higher security and fault tolerance.

Disadvantages

Introducing a Node.js layer adds operational cost.

Future outlook

The team plans to extend the configuration‑driven approach across the entire Baidu “爱采购” ecosystem, using Node.js as the rendering service backbone to support front‑end micro‑services and cross‑platform activity pages.