Lazy Loading von Client Components und Bibliotheken

Lazy Loading in Next.js verbessert die initiale Ladeleistung einer Anwendung, indem die Menge an JavaScript reduziert wird, die zum Rendern einer Route benötigt wird.

Es ermöglicht Ihnen, das Laden von Client Components und importierten Bibliotheken zu verzögern und sie erst dann in das Client-Bundle einzubinden, wenn sie benötigt werden. Beispielsweise können Sie das Laden eines Modals verzögern, bis ein Benutzer darauf klickt, um es zu öffnen.

Es gibt zwei Möglichkeiten, Lazy Loading in Next.js zu implementieren:

1. Verwendung von Dynamischen Imports mit next/dynamic
2. Verwendung von React.lazy() mit Suspense

Standardmäßig werden Server Components automatisch code gesplittet, und Sie können Streaming verwenden, um Teile der UI progressiv vom Server an den Client zu senden. Lazy Loading gilt für Client Components.

next/dynamic

next/dynamic ist eine Kombination aus React.lazy() und Suspense. Es verhält sich in den Verzeichnissen app und pages gleich, um eine schrittweise Migration zu ermöglichen.

Beispiele

Importieren von Client Components

'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)

  return (
    <div>
      {/* Sofort laden, aber in einem separaten Client-Bundle */}
      <ComponentA />

      {/* Bei Bedarf laden, nur wenn die Bedingung erfüllt ist */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>

      {/* Nur auf der Client-Seite laden */}
      <ComponentC />
    </div>
  )
}

Hinweis: Wenn eine Server Component eine Client Component dynamisch importiert, wird das automatische Code Splitting derzeit nicht unterstützt.

SSR überspringen

Bei Verwendung von React.lazy() und Suspense werden Client Components standardmäßig prerendert (SSR).

Hinweis: Die Option ssr: false funktioniert nur für Client Components. Verschieben Sie sie in Client Components, um sicherzustellen, dass das Client-Code-Splitting ordnungsgemäß funktioniert.

Wenn Sie das Pre-Rendering für eine Client Component deaktivieren möchten, können Sie die Option ssr auf false setzen:

const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

Importieren von Server Components

Wenn Sie eine Server Component dynamisch importieren, werden nur die untergeordneten Client Components verzögert geladen – nicht die Server Component selbst. Es hilft auch, statische Assets wie CSS vorzuladen, wenn Sie es in Server Components verwenden.

import dynamic from 'next/dynamic'

// Server Component:
const ServerComponent = dynamic(() => import('../components/ServerComponent'))

export default function ServerComponentExample() {
  return (
    <div>
      <ServerComponent />
    </div>
  )
}

Hinweis: Die Option ssr: false wird in Server Components nicht unterstützt. Sie erhalten einen Fehler, wenn Sie versuchen, sie in Server Components zu verwenden. ssr: false ist mit next/dynamic in Server Components nicht erlaubt. Bitte verschieben Sie es in eine Client Component.

Laden externer Bibliotheken

Externe Bibliotheken können bei Bedarf mit der import()-Funktion geladen werden. Dieses Beispiel verwendet die externe Bibliothek fuse.js für die Fuzzy-Suche. Das Modul wird nur auf dem Client geladen, nachdem der Benutzer eine Suchanfrage eingegeben hat.

'use client'

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Lee']

export default function Page() {
  const [results, setResults] = useState()

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamisch fuse.js laden
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}

Hinzufügen einer benutzerdefinierten Ladekomponente

'use client'

import dynamic from 'next/dynamic'

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

export default function Page() {
  return (
    <div>
      {/* Die Ladekomponente wird gerendert, während <WithCustomLoading/> lädt */}
      <WithCustomLoading />
    </div>
  )
}

Importieren benannter Exports

Um einen benannten Export dynamisch zu importieren, können Sie ihn aus dem von der import()-Funktion zurückgegebenen Promise zurückgeben:

'use client'

export function Hello() {
  return <p>Hello!</p>
}

import dynamic from 'next/dynamic'

const ClientComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)