Load only components and dependencies needed

[anthonyhexium]

Description

Hi !

We just pushed in production a brand new website made with Storyblok and Next.js !

Everything is running good but performance is really important to us. We found out that all components part of the storyblokInit are called on all pages (even if we use dynamic).

The problem is that we use some heavy librairies (like uppy for uploading or codemirror to style code blocks).

For example, when we are one the homepage we still find code in the javascript download part of our contact form (which need uppy).

I am using nextjs 14 with app router !

Is there a way to improve this ?

Suggested solution or improvement

We should import only the javascript needed on the page. But I don't know if this comes from storyblok or nextjs.

Additional context

No response

Validations

• [X] Follow our Code of Conduct

[arorachakit]

Hey @anthonyhexium ! Thanks for letting us know your case. Yes we are aware that this can be an issue. We got this reported as well as a solution from a community member a couple of months back. You can take a look at this - https://github.com/storyblok/storyblok-react?tab=readme-ov-file#3-adding-components-per-page

Using setComponents, you can load the components per page (or per route) however your prefer. But in this, the prerequisite is to know which components are going to be used in a specific route. This can improve the structure of your project a little. :)

cc - @fgiuliani

[anthonyhexium]

@arorachakit thanks for your answer.

Well problem is that we use a [[...slug]] directory which build all our pages so I guess I cannot use this solution right ?

[arorachakit]

Hey @anthonyhexium ! That is right, if you are rendering all routes with that, then you might not be able to use it this way. We are aware of this issue, and it happens with every framework out there. But I am not sure how possibly we can have this implemented as of now. Because the frontend doesn't know which components are going to be there, along with what should be the order of the components.

I mean you can definitely see the components that are going to be needed from the API response, but it has to be implemented somehow in the frontend to only import those. StoryblokComponent just helps you to render those dynamically if they are registered in the init function or in the setComponents function. I am not exactly sure of how we can import the components dynamically, but an idea would be to see the story and the components required and then import only those in the file to register in the setComponents function.

cc - @fgiuliani

[fgiuliani]

Hey @anthonyhexium !

Maybe an approach could be creating separate React Components for the different types of pages you may have on your project, and calling the setComponents function from the inside of those React Components, setting the proper list for each one of them? 🤔

[pixelmultiplo]

This seems like a real deal-breaker. With a decent sized website, the amount of components and the size of the bundle become huge fast.

[dipankarmaikap]

Closing this issue because we have added documentation regarding optimizing component loading in the README. You can find the details here: Efficiently Loading Storyblok Components in React. If you still face any issues, please feel free to comment.