Memory‑Leak Mitigation in MUI v5 SSR: Unique Emotion Cache Key vs. Legacy JSS Engine

Answer: Which Approach Wins?

For a long‑running SSR application, a per‑request Emotion cache (unique cache key) outperforms the legacy JSS engine on all three axes you asked about:

• Memory stability – Fresh caches prevent stale <style> nodes from accumulating, keeping heap usage flat.
• Bundle size – Emotion core (~5 KB) plus theme utilities is smaller than the legacy JSS bundle (~12 KB), and the difference is negligible once your app’s own code dominates.
• Runtime performance – Emotion’s CSS‑in‑JS engine supports critical‑CSS extraction and faster injection, yielding quicker first paint than JSS.

Legacy JSS avoids the leak because it doesn’t share a global cache, but it brings legacy polyfills, less CSS‑variable support, and a larger footprint. It is also slated for deprecation in future MUI releases.

Key Metrics in a Quick Benchmark

How to Wire a Unique Emotion Cache in Next.js

1. Create a helper that returns a new Emotion cache:

   import createCache from '@emotion/cache';
   export function createEmotionCache() {
     return createCache({ key: `mui-${Date.now()}-${Math.random().toString(36).substr(2, 5)}` });
   }
   

2. Wrap your custom _app.js with CacheProvider and pass the cache instance:

   import { CacheProvider } from '@emotion/react';
   import { createEmotionCache } from '../utils/createEmotionCache';
   
   export default function MyApp({ Component, pageProps }) {
     const cache = createEmotionCache();
     return (
       
         
       
     );
   }
   

3. In _document.js, extract the styles from the cache and inject them into the head:

   import Document, { Html, Head, Main, NextScript } from 'next/document';
   import createEmotionServer from '@emotion/server/create-instance';
   import { createEmotionCache } from '../utils/createEmotionCache';
   
   class MyDocument extends Document {
     static async getInitialProps(ctx) {
       const cache = createEmotionCache();
       const { extractCriticalToChunks } = createEmotionServer(cache);
       const initialProps = await Document.getInitialProps(ctx);
       const emotionStyles = extractCriticalToChunks(initialProps.html);
       return { ...initialProps, emotionStyles };
     }
   
     render() {
       return (
         
           
             {this.props.emotionStyles.styles.map((style) => (