s-s-r 有啥好处：动态导入的真正道具？

Posted 2023-02-22

【中文标题】s-s-r 有啥好处：动态导入的真正道具？

【英文标题】：What is the benefit of s-s-r: true prop with dynamic imports?s-s-r 有什么好处：动态导入的真正道具？

【发布时间】：2021-12-19 14:25:03

【问题描述】：

动态导入组件与s-s-r: true有什么区别：

const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), 
  s-s-r: true,
);

只是普通的组件导入：

import  Button  from './Button';

两者相比有什么好处？ 我们将负载放在哪里？ 对于下面的场景（JSX 示例），如果 showButton 是 false，我们还加载了 DynamicButton 吗？

---

// jsx
return showButton && <DynamicButton />

【参考方案1】：

常规导入

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

next/dynamic 与 s-s-r: true

当next/dynamic 与s-s-r: true 一起使用时，Next.js 将组件的代码拆分为单独的块（代码拆分）并单独加载该块（延迟加载）。

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

return showButton && <DynamicButton />

DynamicButton 组件仅在 showButton 为真时才被加载。这样做的好处是减少了在初始页面加载时加载的 javascript 数量。

next/dynamic 与 s-s-r: false

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