Practical Experience of Server‑Side Rendering (SSR) for Vivo Official Mall

In previous articles the evolution of the Vivo official mall front‑end architecture was introduced. This article shares practical experience of applying Server‑Side Rendering (SSR) with Node for the mall.

Background : The SPA architecture leads to large bundle sizes and long white‑screen times, especially on slow networks. SSR was introduced to improve first‑paint speed.

SSR Overview : Comparison of CSR and SSR, benefits such as better SEO and faster time‑to‑content.

Implementation : The project uses Vue and the Nuxt.js framework for SSR.

Performance optimization :

Cache rendered HTML using LRU‑Cache (page cache middleware).

Component cache with serverCacheKey.

API response caching.

Concurrent API requests with Promise.all.

First‑screen minimization: render critical above‑the‑fold content with SSR and defer the rest to CSR using <client-only>.

Partial CSR for non‑critical pages.

Code examples:

serverMiddleware: ["~/serverMiddleware/pageCache.js"]

const LRU = require('lru-cache')
module.exports = {
  render: {
    bundleRenderer: {
      cache: LRU({
        max: 1000,
        maxAge: 1000 * 60 * 5 // 5 minutes
      })
    }
  }
}

export default {
    name: 'productList',
    props: ['productId'],
    serverCacheKey: props => props.productId
}

let {data1, data2, data3} = await Promise.all([
    $axios.get('接口1'),
    $axios.get('接口2'),
    $axios.get('接口3')
])

<client-only>
    客户端渲染dom
</client-only>

Degradation strategies : Monitoring‑based downgrade, Nginx error‑page fallback, full‑platform downgrade during traffic spikes, single‑request fallback, and URL‑parameter based rendering switch.

CI/CD automation : Shell script for nvm/node installation and Dockerfile for containerized deployment.

Monitoring & logging : Integration of Easy‑Monitor for performance monitoring and a log4js‑based logger configured in nuxt.config.js.

Performance test shows QPS increased from 125 to 6000 after optimizations, roughly a 50‑fold improvement.

Conclusion: SSR combined with selective CSR, caching, and automated deployment significantly improves user experience and system stability for the Vivo official mall.