Question

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

普通的旧静态导入：

In [15]: A = np.arange(24).reshape(2, 4, 3)

In [16]: A
Out[16]: 
array([[[ 0,  1,  2],
        [ 3,  4,  5],
        [ 6,  7,  8],
        [ 9, 10, 11]],

       [[12, 13, 14],
        [15, 16, 17],
        [18, 19, 20],
        [21, 22, 23]]])

In [17]: A.shape
Out[17]: (2, 4, 3)

In [18]: B = A.swapaxes(0, 1)

In [19]: B.shape
Out[19]: (4, 2, 3)

In [20]: B
Out[20]: 
array([[[ 0,  1,  2],
        [12, 13, 14]],

       [[ 3,  4,  5],
        [15, 16, 17]],

       [[ 6,  7,  8],
        [18, 19, 20]],

       [[ 9, 10, 11],
        [21, 22, 23]]])

动态导入：

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

使用 ssr = false 动态导入：

import dynamic from 'next/dynamic'

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

我的问题很简单：第二个选项什么时候是首选选项？（在所有三种情况下，想象一下通过 getServerSideProps 的存在启用了 SSR。）

似乎在任何情况下，我的组件都是客户端专用的或由用户操作触发的，我想要选项 #3。而且似乎在任何情况下都需要进行 SSR，如果我选择选项 #2，则块文件会在 import dynamic from 'next/dynamic' const DynamicComponentWithNoSSR = dynamic( () => import('../components/hello3'), { ssr: false } ) [...] return ( <DynamicComponentWithNoSSR /> ) 阶段立即下载，因此它似乎不会在任何时候拯救我.它似乎只是添加了一个网络调用。那么为什么我不直接使用选项 #1？

选项 2 的实际用例是什么？

Answer 1

最佳选择取决于内容是服务器端呈现还是客户端呈现。 Next 中客户端渲染内容最常见的方式是静态生成。

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

Next 还默认预取动态内容，这可能是您的代码中的一些原始混淆所在。加载主要内容，然后预取 - 在主要内容之后不久自动加载动态内容。

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

NextJS动态导入SSR组件

1 个答案: