-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Load only components and dependencies needed #882
Comments
Hey @anthonyhexium ! 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 |
@arorachakit thanks for your answer. Well problem is that we use a |
Hey @anthonyhexium ! That is right, if you are rendering all routes with that, then you might not be able to use it this way. 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 |
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? 🤔 |
This seems like a real deal-breaker. |
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 usedynamic
).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
The text was updated successfully, but these errors were encountered: