Efficient Handling of Dialogs in Next.js?
I'm building a platform with numerous dialogs for various tasks like viewing details and creating items. Currently, I'm using jotai to manage them programmatically. However, I also have 'global' modals accessed from different parts of the platform. To streamline this, I created a GlobalDialogProvider component where I import all dialogs. Yet, some involve data fetching and complexity, leading to significant big 'first Load JS' and 'First Load JS shared by all ' sizes. Any suggestions for optimization?"
2 Replies
Have you tried lazy loading?
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading
I had an upsell modal that required using the Stripe js lib. I didn't make it truly global, but it was included on lots of pages that might need to open it. And Stripe made it quite heavy. Using a
dynamic(() => import(...)) worked in our case.
You might also need skeletons or another loading state while the data loads. Not ideal for modals but that's the trade-off. You could get into tricks like preloading the data when the button that opens it is hovered to minimize the visible delay.Thank you, @michaeldrotar , I appreciate the advice. I'll give it a try and see how it improves the performance. Thanks again!