NextJS 动态导入 SSR 组件

Question

看看在 NextJS 中导入 react 组件的方式：

1. 普通的旧静态导入：

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

1. 动态导入：

import dynamic from 'next/dynamic'

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

1. 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 中客户端渲染内容最常见的方式是静态生成。

但是，在 Next 中，您还可以在页面中混合使用客户端和服务器端呈现，因此这将取决于动态导入在服务器或客户端上执行的位置。

默认情况下，Next 还预取动态内容，这可能是您最初的混淆之处在于您的代码。加载主要内容，然后预取——在主要内容之后不久自动加载动态内容。

因此，如果服务器上发生动态导入，您将启用 SSR。启用 SSR 会禁用服务器上的预取，并确保代码以正确的顺序触发 - 我不知道它是否有更多额外功能。例如，在代码到达客户端之前，它不会导入动态内容。如果你真的想深入了解代码在做什么，这里是source location in GitHub。