SEO: 元件動態導入 | Next.js 繁體中文

接下來，讓我們將注意力轉向一個在初始頁面載入時不需要的 React 元件。

React 元件也可以使用動態導入 (dynamic imports) 的方式載入，但在這裡我們會搭配使用 next/dynamic 以確保它能像其他 React 元件一樣運作。

我們將使用這個方法來延遲載入包含 Hello World 程式碼範例的模態框 (modal)。透過這種方式，我們還能從初始頁面載入中移除另外兩個第三方函式庫。

打開 pages/index.js 檔案，並在檔案開頭加入從 next/dynamic 導入的 dynamic：

import dynamic from 'next/dynamic';

同時我們應該移除這一行：

import CodeSampleModal from '../components/CodeSampleModal';

現在我們可以透過在檔案開頭加入以下程式碼，將其作為動態元件導入：

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

CodeSampleModal 將會是 ../components/CodeSampleModal 回傳的預設元件。它的運作方式與一般 React 元件相同，你可以像平常一樣傳遞 props 給它。

由於我們不需要在伺服器端渲染這個元件，我們使用了 ssr: false 來停用此功能。

接下來，我們希望延遲載入這個元件，直到使用者需要它為止。為此，我們可以將元件包在一個條件式中，檢查模態框是否應該開啟，如果是的話才會載入。

將 CodeSampleModal 元件包裝如下：

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

現在，當 isModalOpen 第一次被切換為 true 時，才會請求所需的 JavaScript。

經過這些優化後，核心網頁指標 (vitals) 現在應該看起來更健康了。讓我們在 Chrome DevTools 中執行另一個 Lighthouse 報告來驗證。

我們還剩下兩個優化建議：

元件動態導入