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

next/dynamic kullanıldığında, başlık bileşeni sayfanın ilk JavaScript paketine dahil edilmeyecektir. Sayfa önce Suspense fallback bileşenini, ardından Suspense sınırı çözüldüğünde Header bileşenini oluşturacaktır.

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})
 
export default function Home() {
  return <DynamicHeader />
}

Bilmekte fayda var: import('path/to/component') adresinde yol açıkça yazılmalıdır. Bir şablon dizesi veya bir değişken olamaz. Ayrıca, Next.js'nin webpack paketlerini / modül kimliklerini belirli dynamic() çağrısıyla eşleştirebilmesi ve oluşturmadan önce bunları önceden yükleyebilmesi için import(), dynamic() çağrısının içinde olmalıdır. dynamic(), React.lazy'a benzer şekilde, ön yüklemenin çalışması için modülün en üst seviyesinde işaretlenmesi gerektiğinden React oluşturmanın içinde kullanılamaz.

With named exports

Adlandırılmış bir dışa aktarımı dinamik olarak içe aktarmak için, bunu Promise tarafından döndürülen import():

components/hello.js
export function Hello() {
  return <p>Hello!</p>
}
 
// pages/index.js
import dynamic from 'next/dynamic'
 
const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

With no SSR

İstemci tarafında bir bileşeni dinamik olarak yüklemek için, sunucu oluşturmayı devre dışı bırakmak üzere ssr seçeneğini kullanabilirsiniz. Bu, harici bir bağımlılık veya bileşen window gibi tarayıcı API'lerine dayanıyorsa kullanışlıdır.

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

With external libraries

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 tarayıcıya yüklenir.

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>
  )
}