SSR：带有动态导入的 true prop 有什么好处？

Question

动态导入组件与以下内容有什么区别ssr: true：

const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), {
  ssr: true,
});

和普通的组件导入：

import { Button } from './Button';

• 一种相对于另一种有什么好处？
• 我们把负载放在哪里？
• 对于下面的场景（JSX 示例），如果showButton是false，我们是否仍然加载DynamicButton以及加载到哪里？

---

// jsx
return showButton && <DynamicButton />

Answer 1

常规进口

当使用常规组件导入时，Next.js 将组件的代码与给定路由的其余组件捆绑在一起。这通常意味着您最终会得到一个包含每个路由的所有组件代码的大块。

next/dynamic和ssr: true

使用next/dynamicwith时ssr: true，Next.js 将组件的代码拆分为单独的块（代码拆分）并单独加载该块（延迟加载）。

这意味着对于您描述的场景：

return showButton && <DynamicButton />

该DynamicButton组件仅在为真时才会加载showButton。这样做的好处是可以减少初始页面加载时加载的 JavaScript 数量。

next/dynamic和ssr: false

使用next/dynamicwith时ssr: false，动态导入的所有上述优点也适用。但是，该组件的代码不会预加载到服务器上，而只会在客户端上运行。当组件包含仅在浏览器中工作的库或 API 时，这通常很有用。