Lazy Load Server Components -> split CSS in dynamic Routes
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Hi,
we use Next.js for our CMS. URLs are all set in the CMS, so I just use a single folder with a dynamic route.
Using the URL, I fetch the content from an API, which provides me a JSON, so I know which elements are displayed on the current content. So far so good.
My problem is that the more elements the website requires, the larger my (main) CSS file becomes, these are not split in the way I imagine. Now I'm just talking about server components.
I demonstrated this using a simple example:
Screenshot 1: root page.js, with links, no css
Screenshot 2: now that's the interesting part: I use dynamic to load the components depending on the URL
Screenshot 3: shows css for Component Page 1
Screenshot 4: shows css for Component Page 2
Screenshot 5:
As soon as I start the application and open the URL with /page1, you can see in the CSS that the CSS code from component Page2 is also loaded. This is exactly what I want to avoid because it has a huge impact on larger projects (greetings from PageSpeed Insights)
I can only achieve my desired result if I declare the page.js component as a client component ("use client"), but of course I don't want to do that because then my JS part would grow enormously.
Who can help me? 🙂
we use Next.js for our CMS. URLs are all set in the CMS, so I just use a single folder with a dynamic route.
Using the URL, I fetch the content from an API, which provides me a JSON, so I know which elements are displayed on the current content. So far so good.
My problem is that the more elements the website requires, the larger my (main) CSS file becomes, these are not split in the way I imagine. Now I'm just talking about server components.
I demonstrated this using a simple example:
Screenshot 1: root page.js, with links, no css
Screenshot 2: now that's the interesting part: I use dynamic to load the components depending on the URL
Screenshot 3: shows css for Component Page 1
Screenshot 4: shows css for Component Page 2
Screenshot 5:
As soon as I start the application and open the URL with /page1, you can see in the CSS that the CSS code from component Page2 is also loaded. This is exactly what I want to avoid because it has a huge impact on larger projects (greetings from PageSpeed Insights)
I can only achieve my desired result if I declare the page.js component as a client component ("use client"), but of course I don't want to do that because then my JS part would grow enormously.
Who can help me? 🙂
