Code Splitting and Pre/Lazy Loading in Next.js

Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel. The primary objective is to enhance the application's initial load time. For example in next.js, next.js only load the necessary code to run each specific page. To learn more about code splitting, checkout the MDN documentation here.

In Next.js

Next.js offers built-in support for code splitting. As you create files within the pages/ directory, they will automatically be code-split into their individual JavaScript bundles during the build process. This feature ensures a more efficient and optimized user experience when navigating through the application.

Preloading/Prefetching (for simplicity, we will not distinguish the difference here) refers to loading a resource before it is actually required, reducing the waiting time for that resource. For instance, a web browser may request copies of frequently accessed web pages.

In Next.js

<Link> is a React component that extends the HTML <a> element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.

The rendered result of prefetched routes is added to the router's client-side cache. This makes navigating to a prefetched route near-instant.

Static and Dynamic Routes

• Static Route: all the Server Component payloads for the route segments will be prefetched.
• Dynamic Route: the payload from the first shared layout down until the first loading.js file is prefetched. This reduces the cost of prefetching the whole route dynamically and allows instant loading states for dynamic routes.

Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

What is critical rendering path(CRP)?

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen.

In Next.js

Lazy loading helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route. It allows you to defer loading of Client Components and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it.

- Using Dynamic Imports with next/dynamic

The dynamic function is used for dynamic imports, which allow components to be loaded asynchronously when they are needed, rather than all at once during the initial load. This can be especially useful for components that are heavy or have large dependencies, as it helps to improve the initial load time of your application.

In this code snippet, the Home component is exported as the default export of this module. Within the return statement, it renders the HeavyComponent. However, since HeavyComponent is dynamically imported, it will only be fetched and rendered when it's needed, not during the initial page load.

That's it! Now you are familiar with the differences between these terms and have a brief understanding of how Next.js works to reduce loading time and enhance user experience!

• Next.js documentation
• MDN documentation
• What is pre-fetching