Loading external stylesheets #50796
Replies: 3 comments 3 replies
-
|
If the stylesheets are not dynamic, I would say that this is the way to go.
|
Beta Was this translation helpful? Give feedback.
-
|
I don't think useEffect or useInsertionEffect would work for us. That would delay the loading of the styles until after the JavaScript has downloaded and executed, so we'd probably end up with a layout shift issue. These are core page styles that need to be part of the server rendered response. |
Beta Was this translation helpful? Give feedback.
-
|
Just an idea: Did you try to use this minimal layout? export default function RootLayout({ children }: { children: React.ReactNode; }) {
return (
<html lang="en">
{children}
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
You need to manipulate the ReactDom to safely insert into the
// app/preload-resources.ts
'use client'
import ReactDOM from 'react-dom'
export function PreloadResources() {
ReactDOM.preload('CDN_CSS_HREF', { as: 'style' })
return null
}Note that the option Reference |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone, I’m running into a bit of a snag and was hoping someone here might have some ideas. I’ve got this page where, based on certain data, it needs to pull in different external CSS. The tricky part is that the URL for the CSS is always changing, so I can’t set it up before rendering (SSR or SSG), it needs to be dynamic. Problem Summary:I’m getting warnings every time I try to inject this dynamic external CSS. I’ve tried the usual suspects like adding a I also tried the Next.js Document, but since that is only SSR, it didn't work - I tried hooking it into a context to change the CSS for each dynamic URL but nothing. Like, I know I can manually change the header using some vanilla JS trickery and stuff, and also using Questions:
The Next.js version I'm using is 13.4.19. Any thoughts or suggestions would be super appreciated! Thanks a bunch in advance for any help or insights. |
Beta Was this translation helpful? Give feedback.
-
|
@blopa You can write the link element directly in the body. <html lang={locale} suppressHydrationWarning>
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
outfit.variable,
)}
>
{locale === "zh-CN" && (
<link
rel="stylesheet"
crossOrigin="anonymous"
href="https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Regular.min.css"
/>
)}
<Providers>{children}</Providers>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
My organisation has a set of shared styles that are used across all our various front-end applications, and we load them in from a CDN so our users get the benefit of having that asset cached as they move around the site. Importing these styles at build time means each individual application will create their own hashed version of the assets and therefore each subsequent page load will be slower as a result.
According to the app-router docs at the moment this isn't possible. However, it seems like doing something like this in the root layout does work but isn't documented
Are there plans to document this or provide an alternative approach?
Beta Was this translation helpful? Give feedback.
All reactions