Capítulo 308 de 456

Lazy Loading

Core Idea

next/dynamic (composição de React.lazy() + Suspense) reduz o bundle JS inicial adiando o carregamento de componentes/libs até serem necessários, funcionando igual no App e Pages Router.

Key Concepts

  • dynamic(() => import(...), { loading }): importa o componente sob demanda; loading define o fallback exibido enquanto carrega.
  • Named exports: import(...).then((mod) => mod.Nome) pra pegar um export nomeado em vez do default.
  • ssr: false: desativa server-rendering do componente, útil quando ele depende de API de browser (window etc.).
  • Import dinâmico direto no handler de evento: await import('fuse.js') fora de dynamic() também funciona, pra libs carregadas só quando o usuário interage.
  • Restrição de path: o caminho dentro de import('path/to/component') precisa ser explícito, literal, nunca template string ou variável, e a chamada import() deve ficar dentro de dynamic() no topo do módulo (não dentro de render).

Code Examples

import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})

export default function Home() {
  return <DynamicHeader />
}
  • O que demonstra: lazy load básico com fallback de loading.
'use client'
import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})
  • O que demonstra: componente carregado só no client, sem SSR, pra libs dependentes de window.
onChange={async (e) => {
  const { value } = e.currentTarget
  const Fuse = (await import('fuse.js')).default
  const fuse = new Fuse(names)
  setResults(fuse.search(value))
}}
  • O que demonstra: import dinâmico de lib pesada só no momento da interação do usuário.

Anti-patterns

  • Path dinâmico dentro de import() do dynamic(): quebra o mapeamento de bundle/module id do webpack; precisa ser string literal.
  • Chamar dynamic() dentro de render: precisa ficar no top-level do módulo, igual React.lazy, senão o preload não funciona.

Key Takeaways

  1. next/dynamic é a ferramenta padrão pra code-splitting de componente no Next.js, App e Pages Router.
  2. ssr: false resolve dependência de API só de browser.
  3. Import dinâmico direto (await import(...)) fora de dynamic() serve pra libs carregadas por interação, não componentes React.

Connects To

  • ch289 Images: mesmo princípio de carregar recurso só quando necessário (lazy loading nativo de imagem).
AnteriorInternationalizationPróximoMDX