Master code splitting with dynamic imports in Next.js

Code splitting is an optimization technique that aims to reduce the size of an app’s (first) payload by splitting or breaking the code modules in chunks and serving them only when needed.

Route-based splitting and Component-based splitting

Next.js routing system comes from the pages folder.

pages/
    home/
        index.js
        home.js
    user/
        index.js
        user.js

Each file is a page in Next.js, and they export a React component.

//pages/home/home.js

export default function Home() {
  return <div>Home Page</div>;
}

The file pages/home/home.js will map to the route /home/home/, the React component exported from the home.js file will be rendered when the route is navigated. We have seen that the pages folder is where the Next.js routing is set. Now, by default Next.js splits the components in each route into separate chunks. This means that when we load a route in our browser, Next.js will only load the chunk associated with the route.

For example, in our pages folder above we have four routes in the Next.js app.

home/home
home/
user/
user/user

Each of them has a component that renders the associated UI on the browser. Now, Next.js splits the routes into chunks. This means that when we navigate to home/home, only the JavaScript chunk for the home/home is loaded, other chunks for the other routes are not loaded. This happens for other routes too, the chunk for the current route is loaded and no other. This is called route-based splitting.

This is amazing and very optimal at the same time, in the sense that it shaves off chunks that are not needed when a route is being requested. This speeds up the load time and the overall performance of the app. Imagine the whole app is download when a request for a route is made. This will become a heavy load for both the client and the server because the server will have a whole lot of file size to send and the client will have a whole lot of file size to download and execute. So we see that Next.js comes in with route-based code splitting optimization fully baked in.

Now, looking at it, each page component is a React component, yes. And the components can render other components to display a specific UI. Most of these components are presentational components that can be reused, they are not associated with any routes in Next.js. These components can be split into chunks and loaded on demand. Yes, sometimes we may not want to load a component till the need comes. for example, a modal component on a page component that is shown when a button is clicked. By default, this modal component comes bundled with the page component and sits in the browser memory till it is displayed when a button is clicked. This component is only needed when the button is clicked yet it was loaded, it should not have been loaded until it is needed i.e it should be loaded when the button is clicked and then displayed. This splitting of components is called component-based splitting.

In the below sections, we will learn how we can code-split our components in Next.js and load them on demand.

Leave a Reply

Your email address will not be published. Required fields are marked *