Dynamic Imports for Heavy Components

Name: Dynamic Imports for Heavy Components
Author: Vercel Engineering

bundledynamic-importcode-splittingnext-dynamic

⭐ 28.0k🕒 2026-06-10Source ↗

Install this skill

npx skills add vercel-labs/agent-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

Dynamic Imports for Heavy Components targets performance bottlenecks caused by large, non-critical dependencies in Next.js applications. By shifting large modules out of the initial JavaScript bundle, you reduce the time to first byte and accelerate hydration for the user. This approach moves heavy third-party libraries—such as code editors, chart libraries, or data visualization tools—into separate chunks that only download when the component enters the render tree. By setting the server-side rendering (SSR) flag to false, you ensure that client-only code does not conflict with server logic during the initial page load. This strategy ensures the browser prioritizes critical path resources while deferring execution of weighty interface elements, leading to improved Lighthouse scores and a snappier response time during initial page interactions.

When to Use This Skill

•Loading syntax highlighting editors like Monaco or CodeMirror
•Injecting large data visualization charts on user interaction
•Rendering complex modal windows that are not visible on initial load
•Lazy-loading heavy third-party map integrations
•Deferred initialization of rich text document editors

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“Reduce bundle size for my heavy components
“How do I lazy load a component in Next.js?
“Improve initial load speed by deferring large imports
“Stop my code editor from blocking page render
“Apply dynamic imports for client-side only modules

What this skill does

•Defers loading of heavy components until runtime
•Reduces main bundle size by splitting off large dependencies
•Disables server-side rendering for client-only libraries
•Implements code-splitting for specific feature blocks
•Optimizes page load performance in Next.js environments

When not to use it

✕For components essential to the initial page view (LCP elements)
✕For lightweight UI components like buttons or small icons

Example workflow

Identify heavy dependencies currently imported at the top of a page
Replace static imports with the next/dynamic syntax
Wrap the target component within a dynamic call
Set the ssr property to false for client-specific libraries
Verify the bundle chunk splitting in the browser network tab

Prerequisites

–Next.js framework
–React components with large bundle footprints

Pitfalls & limitations

!Flash of unstyled content if no loading state is configured
!Potential performance overhead if overused for tiny components
!Type definitions can become more complex during development

FAQ

Why set ssr: false for my dynamic component?

This prevents the server from attempting to render code that relies on browser-only APIs like window or document, which avoids hydration mismatches.

Does this hurt my SEO?

It affects SEO for the specific content inside the lazy-loaded component, so avoid dynamic imports for critical text or metadata-heavy UI.

How can I show a loading spinner while the component imports?

You can pass a loading function to the dynamic options object to return a fallback UI during the chunk fetch.

How it compares

While manual implementation requires configuring Webpack chunks or React.lazy wrappers, next/dynamic provides a framework-native wrapper that handles chunk preloading and SSR orchestration automatically.

Source & trust

⭐ 28k stars🕒 Updated 2026-06-10

View original skill on GitHub →

📄 Full skill instructions — original source: vercel-labs/agent-skills

## Dynamic Imports for Heavy Components

Use next/dynamic to lazy-load large components not needed on initial render.

**Incorrect (Monaco bundles with main chunk ~300KB):**

import { MonacoEditor } from './monaco-editor'

function CodePanel({ code }: { code: string }) {
  return <MonacoEditor value={code} />
}

**Correct (Monaco loads on demand):**

import dynamic from 'next/dynamic'

const MonacoEditor = dynamic(
  () => import('./monaco-editor').then(m => m.MonacoEditor),
  { ssr: false }
)

function CodePanel({ code }: { code: string }) {
  return <MonacoEditor value={code} />
}

By Vercel Engineering

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/bundle-dynamic-imports/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/vercel-labs/agent-skills/bundle-dynamic-imports/SKILL.md
Cursor: ~/.cursor/skills/vercel-labs/agent-skills/bundle-dynamic-imports/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/vercel-labs/agent-skills/bundle-dynamic-imports/SKILL.md