NextJS 動態導入 SSR 組件

Question

查看在 NextJS 中導入 react 組件的方式：

1. 普通老 static 進口：

import Component from './Component';
[...]
return (
  <Component />
)

2. 動態導入：

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)
[...]
return (
  <DynamicComponent />
)

3. ssr = false 的動態導入：

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)
[...]
return (
  <DynamicComponentWithNoSSR />
)

我的問題很簡單：第二個選項什么時候是首選選項？ （在所有三種情況下，假設 SSR 是通過存在 getServerSideProps 來啟用的。）

似乎無論如何我的組件都是客戶端的或由用戶操作觸發的，我想要選項#3。 而且似乎在任何情況下都需要進行 SSR，如果我選擇選項 #2，則before-hydration階段會立即下載塊文件，因此它似乎不會為我節省任何時間。 它似乎只是添加了一個網絡調用。 那么我為什么不只使用選項#1？

選項 #2 的實際用例是什么？

Answer 1

最佳選擇取決於內容是服務器端呈現還是客戶端呈現。 Next 中客戶端渲染內容最常見的方式是 static 生成。

但是，在 Next 中，您還可以在頁面中混合使用客戶端和服務器端呈現，因此這將取決於動態導入在服務器或客戶端上執行的位置。

Next 默認情況下還會預取動態內容，這可能是您最初的一些混淆之處在於您的代碼。 加載主要內容，然后預取——在主要內容之后不久自動加載動態內容。

因此，如果服務器上發生動態導入，您將啟用 SSR。 啟用 SSR 會禁用服務器上的預取，並確保代碼以正確的順序觸發 - 我不知道它是否有更多額外功能。 例如，在代碼到達客戶端之前，它不會導入動態內容。 如果您真的想深入了解代碼在做什么，這里是GitHub 中的源位置。