How Ant Design Skips Runtime CSS‑in‑JS Overhead with SSR Caching

Dynamic Styles Where Did They Go?

Ant Design v5 adopts CSS‑in‑JS, which normally generates styles at runtime and incurs performance costs. In practice, Ant Design components load styles from static CSS files rather than inserting <style> tags. Two CSS files appear in document.head:

umi.[hash].css – generated by Dumi for demo blocks, search box, etc.

style‑acss.[hash].css – generated by SSR and used for caching pre‑baked CSS.

These pre‑baked CSS files enable cache hits and faster subsequent page loads.

CSS‑in‑JS Injection Overhead

At the application level, CSS‑in‑JS computes a hash for each generated style and stores it in a cache. On subsequent renders, the cache is consulted first; if the style exists, it is reused, avoiding duplicate generation.

Even if a <style> element with the same hash already exists (e.g., injected by SSR), the runtime still needs to compute the hash from the style content, which is inefficient.

Component‑Level CSS‑in‑JS

For component libraries, the cache can be simplified: using a token and component name is enough to determine style consistency, allowing the hash to be pre‑computed.

SSR HashMap

The @ant-design/cssinjs cache stores both style content and its hash. Previously, extractStyle only extracted the style string. Now it also extracts the path and hash, producing a CSS rule like:

{
  "bAMbOo|Button": "LItTlE",
  "bAMbOo|Spin": "liGHt"
}

and embeds it in a CSS file:

.cssinjs-cache-path {
  content: 'bAMbOo|Button:LItTlE;bAMbOo|Spin:liGHt';
}

This makes the necessary information available on the client side.

CSR HashMap

On the client, the hash map is retrieved via getComputedStyle on a temporary element:

const measure = document.createElement('div');
measure.className = 'cssinjs-cache-path';
document.body.appendChild(measure);
const { content } = getComputedStyle(measure);

During component rendering, useStyleRegister checks the hash map; if the path exists, the style is read from the existing <style> element, skipping generation.

Styles that come from CSS files are marked as such (e.g., __FROM_CSS_FILE__) and are also skipped during the insertion effect.

Conclusion

CSS‑in‑JS is often criticized for runtime performance overhead. Ant Design mitigates this by leveraging SSR to pre‑compute and cache style hashes, allowing the client to bypass runtime style generation entirely, resulting in noticeable performance gains.