Speed up your Website with Next.js Dynamic Import Lazy Loading

all right so today we're going to be doing Dynamic Imports in nextges and I'm gonna explain to you when you should use Dynamic Imports and how you should use Dynamic Imports Dynamic Imports are very important if you want to create a performant application and it's often overlooked and not appreciated enough even though it creates extremely fast apps now we can start you just need an xjs application you can create a new one and follow along or you can just use this in an existing project now let me just pull this window over and we have this Hello World app it's completely simple just one H1 tag and the main tag now if we go over to the network and reload we can see that this index.js is this Javascript file that's being pulled is 4.6 kilobytes transferred over the network right so this 4.6 kilobytes is our index page the page we're on at and to render this we need to pull 4.6 kilobytes right which is not enough now let's say that we have this heavy component that I made it's just a heavy component that has styles and these styles are just tiles that I copied from a random page online okay so there's lots of styles here so imagine that you have this component that's full of JavaScript like 350 lines of JavaScript with random hooks used everything else in between and this huge CSS module right so this component is heavy and we don't just want to use this component and fetch it whenever we can because this is going to be a strain on our Network right because we're going to pull lots of data now what we want to do here is we want to show The Savvy component only when the button is pressed so let's Implement that that's the first step to to show off the real power of dynamic Imports so let's just create a get a use date hook create States we're going to say const should show and set should show and it's going to be false at the beginning so we're going to say Boolean not like that Boolean okay false and we're gonna have a button here and you say click me and we're going to give it an event that says set should show to true okay now we want when this should show is through we want to show the heavy component right so we're going to say if should show and so this basically means if this is true then you're gonna render you're gonna return what's after the end operator nope we're gonna return heavy component okay now it should work so let's try it out now we can go to our page back okay and let's go to the network tab so this click me is working right this is the heavy component that's loaded and I'm using lots of CSS here okay that's what it says now when we reload the page we see that this index.js the same one from before is now pulling 45.3 kilobytes now that makes sense right because we imported that component and we're using it but at the same time it doesn't make sense because when we reload the page we still aren't using that component the component is not being shown and who tells us that the user will click on the button and show the component right so this component is potentially being uh pulled and not used which means that here in our index.js there's about 40 kilobytes of waste JavaScript now we want to only pull this component the circle that's spinning with the text when and only when the user clicks the button so that there is no extra JavaScript that's being fetched right that's the important thing so we want to use the next Dynamic for this one so we can import Dynamic from next Dynamic let's say const Dynamic Heavy component and we're going to say Dynamic we're going to give it a function that's going to import it so we're going to go to components go to heavy and we're going to say SSR is equal to false because we want this to be fetched on client side and we want to say loading and let's give it a function and let's return for example A P tag and the edges say I'm fetching I am patching okay now this is the Dynamic Heavy component right we want to use it instead of the heavy component we imported at the top so we can remove this component and use this one here okay and now when we go back to our browser we reload the page you can see that the index.js is not the four is not the 50 5 or 45 kilobytes that it was it's now 19. it's way less than it should be and it makes sense now watch when I click so 19 kilobytes watch when I click this button I click it now you see the component heavy is being pulled it's the the entire 43 kilobytes with the component is only now being pulled so not at the beginning so we can reload the page again index.js this is the first five kilobytes plus 15 I guess for the dynamic component the entire it's 19 because this is being imported but now the the entire component this heavy component that we built out that's pulling lots of CSS in JavaScript is not being pulled so it will only be pulled when I click the button and there it is there's there it is the component heavy dot DSX and right now we actually have a performance tab that's not wasting any JavaScript so we are 100 using the JavaScript so you know when you use the lighthouse feature here and it says there's unused CSS unused JavaScript unused stuff like that that's why because you're pulling JavaScript that's not being used because let's say we have five buttons here each of them that are showing something else so let's say click B2 click me three four five six seven I know there's a shortcut for this they can all show a different heavy component right the user maybe will click one button maybe two maybe five maybe none right so imagine if there are five components like this and there are they are all 50 kilobytes that means there's 250 kilobytes means 250 kilobytes of wasted wasted internet basically you're wasting internet and you're slowing down the page so this is when you want to use the dynamic import from nextges when you're loading something heavy and that you're not sure you're going to need it this is a basic example you can read up on the next.js site of um more advanced uses for example as you can see there is an example where there the fuse.js or the JS file is being imported only when it's needed so for example it should be only imported when I click and search on something there's no need for that JavaScript to come on my browser if I'm not going to use it the same as for clicking buttons and this example that I showed you right here so let's reload again index.js is 19 kilobytes it's only loading the component heavy Jazz when we need it and this is how you make performance stable and very good apps that will load extremely fast for the users and they'll be extremely satisfied now you know how to use Dynamic Imports

Channel: Tenacity Dev

Views: 12,463

Keywords: React, Next.js, Nextjs, LazyLoading, Lazy Loading, Lazy Loaded, Dynamic Import, Dynamic Imports, Dynamically Imported, Next.js imports

Id: MXe88BI8q-c

Length: 8min 36sec (516 seconds)

Published: Mon Mar 06 2023