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/dynamic 与 ssr: true 一起使用时，Next.js 将组件的代码拆分为一个单独的块（代码拆分）并单独加载该块（延迟加载）。

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

return showButton && <DynamicButton />

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

next/dynamic 与 ssr: false

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