performance & optimization

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Reduce JS bundle size by adding 'use client' only to interactive components

To reduce client JavaScript bundle size, add 'use client' to specific interactive components instead of marking large parts of your UI as Client Components. For example, in a Layout with mostly static elements and one interactive search bar, only the Search component should be marked as a Client Component.

Lazy loading improves initial loading performance

Lazy loading in Next.js 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.

Two ways to implement lazy loading in Next.js

There are two ways you can implement lazy loading in Next.js: 1) Using Dynamic Imports with next/dynamic, and 2) Using React.lazy() with Suspense.

Server Components are automatically code split

By default, Server Components are automatically code split, and you can use streaming to progressively send pieces of UI from the server to the client. Lazy loading applies to Client Components.

next/dynamic is a composite of React.lazy and Suspense

next/dynamic is a composite of React.lazy() and Suspense. It behaves the same way in the app and pages directories to allow for incremental migration.

Load external libraries on demand with dynamic import

External libraries can be loaded on demand using the dynamic import() function. For example, a module like fuse.js can be loaded only on the client after the user interacts with the page, such as typing in a search input.

Custom loading component with next/dynamic

When using next/dynamic, you can provide a custom loading component via the loading option. This component will be rendered while the dynamically imported component is loading: dynamic(() => import('../components/Component'), { loading: () => <p>Loading...</p> })

Import named exports with dynamic import

To dynamically import a named export, return it from the Promise returned by the import() function: dynamic(() => import('../components/hello').then((mod) => mod.Hello))

Magic comments control dynamic import bundling

Next.js supports magic comments to control how dynamic imports are handled by the bundler. These comments work with dynamic import(), require(), require.resolve(), and new Worker() expressions. Magic comments do not work with static import statements; they only work with dynamic expressions.

webpackIgnore and turbopackIgnore magic comments

Use webpackIgnore or turbopackIgnore magic comments to skip bundling a dynamic import. The import expression will be left as-is in the output, useful for runtime-only modules. Example: const runtime = await import(/* webpackIgnore: true */ 'runtime-module') or const plugin = await import(/* turbopackIgnore: true */ pluginPath)

turbopackOptional magic comment for optional modules

Use the turbopackOptional magic comment to suppress build errors when a module might not exist. The import will still throw at runtime if the module is missing. Example: const feature = await import(/* turbopackOptional: true */ './optional-feature'). This is useful for conditional features that may not be installed, plugin systems where modules are optional, and gradual migrations where some files may not exist yet. webpackOptional is not supported; use turbopackOptional instead when using Turbopack.

Give your agent this brain