Lazy Loading

Next.js'deki tembel yükleme, bir rotayı oluşturmak için gereken JavaScript miktarını azaltarak bir uygulamanın ilk yükleme performansını artırmaya yardımcı olur.

İstemci Bileşenlerinin ve içe aktarılan kitaplıkların yüklenmesini ertelemenize ve bunları yalnızca gerektiğinde istemci paketine dahil etmenize olanak tanır. Örneğin, bir kullanıcı açmak için tıklayana kadar bir modalin yüklenmesini ertelemek isteyebilirsiniz.

Next.js'de tembel yüklemeyi uygulayabileceğiniz iki yol vardır:

  1. ile Dinamik İçe Aktarmaları Kullanma next/dynamic
  2. Kullanma React.lazy()Gerilim ile

Varsayılan olarak, Sunucu Bileşenleri otomatik olarak kod bölünür ve UI parçalarını sunucudan istemciye aşamalı olarak göndermek için akışı kullanabilirsiniz. Tembel yükleme İstemci Bileşenleri için geçerlidir.

next/dynamic

next/dynamic 'nin bir bileşimidir. React.lazy() ve Suspense. Artımlı geçişe izin vermek için app ve pages dizinlerinde de aynı şekilde davranır.

Examples

Importing Client Components

app/page.js
'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>
      {/* Load immediately, but in a separate client bundle */}
      <ComponentA />
 
      {/* Load on demand, only when/if the condition is met */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>
 
      {/* Load only on the client side */}
      <ComponentC />
    </div>
  )
}

Skipping SSR

React.lazy() ve Suspense kullanılırken, İstemci Bileşenleri varsayılan olarak önceden oluşturulacaktır (SSR).

Bir İstemci Bileşeni için ön oluşturmayı devre dışı bırakmak istiyorsanız, false olarak ayarlanmış ssr seçeneğini kullanabilirsiniz:

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

Importing Server Components

Bir Sunucu Bileşenini dinamik olarak içe aktarırsanız, Sunucu Bileşeninin kendisi değil, yalnızca Sunucu Bileşeninin alt bileşenleri olan İstemci Bileşenleri lazy-load edilecektir.

app/page.js
import dynamic from 'next/dynamic'
 
// Server Component:
const ServerComponent = dynamic(() => import('../components/ServerComponent'))
 
export default function ServerComponentExample() {
  return (
    <div>
      <ServerComponent />
    </div>
  )
}

Loading External Libraries

Harici kütüphaneler isteğe bağlı olarak import() işlevini kullanmaktadır. Bu örnek, bulanık arama için fuse.js harici kütüphanesini kullanmaktadır. Modül, yalnızca kullanıcı arama girdisini yazdıktan sonra istemciye yüklenir.

app/page.js
'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
          // Dynamically load fuse.js
          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>
  )
}

Adding a custom loading component

app/page.js
import dynamic from 'next/dynamic'
 
const WithCustomLoading = dynamic(
  () => import('../components/WithCustomLoading'),
  {
    loading: () => <p>Loading...</p>,
  }
)
 
export default function Page() {
  return (
    <div>
      {/* The loading component will be rendered while  <WithCustomLoading/> is loading */}
      <WithCustomLoading />
    </div>
  )
}

Importing Named Exports

Adlandırılmış bir dışa aktarımı dinamik olarak içe aktarmak için, bunu şu şekilde döndürülen Söz'den döndürebilirsiniz import() fonksiyon:

components/hello.js
'use client'
 
export function Hello() {
  return <p>Hello!</p>
}
app/page.js
import dynamic from 'next/dynamic'
 
const ClientComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)