SSR vs CSR

We render 5000 accordion components

Original repo:

https://github.com/erikras/react-redux-universal-hot-example

Our repo:

https://github.com/bazanowsky/react-ssr-exercise

Timetime to see first content

SSR ~1,6s                     CSR ~3s

SSR

CSR

SSR

SSR + cache

Memory cache

import mcache from 'memory-cache';

const cache = (duration) => {
  return (req, res, next) => {
    const key = '__express__' + req.originalUrl || req.url;
    const cachedBody = mcache.get(key);
    if (cachedBody) {
      res.send(cachedBody);
      return;
    } else {
      res.sendResponse = res.send;
      res.send = (body) => {
        mcache.put(key, body, duration * 1000);
        res.sendResponse(body);
      };
      next();
    }
  };
};


app.use(cache(10));

Simple server side cache for Express.js with Node.js

CSR

SSR

Mobile Chrome Android

Server-side caching approaches

• Get list of Apptension github repositories.
• Use Next.js to render.
• Use lru-cache to cache.
• No cache solution has problem with Rate Limiting.
• timing.js