面试官：Next.js 中的 next/dynamic 有什么作用？如何使用它

next/dynamic 是 Next.js 提供的动态导入（Lazy Loading）功能，用于按需加载组件，从而减少首屏 JS 体积，提高性能。

🔥 next/dynamic 的作用

✅ 减少初始 JS 体积（代码分割，提高页面加载速度）
✅ 按需加载组件（只有在需要时才下载 JS 代码）
✅ 避免 SSR 渲染不支持的库（如 window 依赖的库）
✅ 支持自定义加载状态（可以显示 Loading 占位符）

🔥 next/dynamic 的基本用法

📌 基础用法

import dynamic from "next/dynamic";

// 组件在客户端加载（不会 SSR）
const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
  ssr: false, // 关闭 SSR
});

export default function Page() {
  return <HeavyComponent />;
}

✅ 优化点

• HeavyComponent 不会被包含在服务器渲染的 HTML 中

• 仅在 客户端加载，不会影响 SSR

🔥 1. 懒加载大型组件

📌 适用于图表、地图等大型组件

import dynamic from "next/dynamic";

// 组件按需加载
const Chart = dynamic(() => import("../components/Chart"), {
  loading: () => <p>Loading...</p>, // ⏳ 加载时显示占位符
});

export default function Page() {
  return <Chart />;
}

✅ 优化点

• Chart 组件不会影响首屏加载

• 只有用户访问该页面时才会加载

🔥 2. 关闭 SSR，避免 window 相关错误

📌 某些第三方库（如 mapbox-gl）只在客户端运行

import dynamic from "next/dynamic";

// 关闭 SSR，避免 `window is not defined` 错误
const Map = dynamic(() => import("../components/Map"), { ssr: false });

export default function Page() {
  return <Map />;
}

✅ 优化点

• 避免 window is not defined 错误

• 适用于仅在客户端运行的库

🔥 3. 仅在事件触发时加载

📌 避免不必要的加载

import { useState } from "react";
import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("../components/HeavyComponent"));

export default function Page() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>显示组件</button>
      {show && <HeavyComponent />}
    </div>
  );
}

✅ 优化点

• 只有用户点击按钮时才加载 HeavyComponent

• 减少初始加载时间

🔥 4. dynamic() 配合 import() 进行代码拆分

📌 按需加载模块

async function handleClick() {
  const { someFunction } = await import("../utils/heavyFunctions");
  someFunction();
}

✅ 优化点

• 仅在需要时加载模块

• 避免影响主 JS 体积

🎯 总结

📌 一句话总结👉 next/dynamic 让 Next.js 组件支持懒加载，减少 JS 体积，优化页面性能！