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 中的源位置。