Question: Is it possible to only preload CSS and load it dynamically later in Next.js 13.5.4?

[gmonking]

Summary

Background

I'm using Next.js 13.5.4. For performance reasons, I want to preload CSS files (e.g., with ) but not automatically apply them as in the initial HTML.
The goal is to let the browser render a custom loading element in the body as early as possible, and then use JavaScript to load and apply the CSS once my loading screen is shown. This can help improve the perceived performance and reduce the blank screen time.

My Question

Is there any officially supported way in Next.js 13.5.4 to achieve this workflow? Specifically:

Can Next.js output CSS as preload only, and leave it to the app logic to apply the styles?

Are there any built-in APIs, configuration options, or recommended practices to support this pattern?

What I've tried

On the server side, intercepting and modifying the HTML to replace with . But this is a hacky and hard-to-maintain solution.

Additional context

This pattern is important for projects that want to deliver a faster loading experience, especially when CSS bundles are large or device performance is limited.

Any official suggestions, workarounds, or pointers to documentation would be greatly appreciated.

Additional information

No response

Example

No response

[SametDulger]

Hi @gmonking,

Thanks for your detailed question! Currently, Next.js 13.5.4 does not provide an official, built-in way to preload CSS files without applying them immediately and then dynamically apply them later via app logic.

Why?
Next.js automatically injects CSS as or via CSS modules inside the initial HTML to ensure styles are applied as soon as possible.

Preloading CSS without applying it requires changing the rel attribute to preload and then switching it dynamically to stylesheet at runtime, which is a manual process and not natively handled by Next.js.

Possible workarounds:
Manual preload + dynamic apply
You can manually add in your custom _document or root layout, then use JavaScript to swap it to once you want to apply styles. This is similar to your “hacky” approach but requires careful management.

Critical CSS + deferred CSS loading
Extract critical CSS (for above-the-fold content) inline or via tools, and defer loading the full CSS bundle asynchronously. You’d manage this outside of Next.js’s default CSS handling.

CSS-in-JS or dynamic style imports
Use a CSS-in-JS library or dynamically import CSS modules conditionally after initial load to control when styles apply.

Summary
No official Next.js config or API currently supports preloading CSS only and applying it later automatically. Your manual approach is the closest option until this kind of feature is supported.

If reducing initial CSS load time and blank screen is a priority, consider critical CSS strategies or dynamic imports combined with client-side style application.

Happy to help with example code or alternative patterns if you want!