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

import dynamic from "next/dynamic";

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

export default function Page() {
  return <HeavyComponent />;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

import dynamic from "next/dynamic";

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

export default function Page() {
  return <Chart />;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

import dynamic from "next/dynamic";

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

export default function Page() {
  return <Map />;
}
1.
2.
3.
4.
5.
6.
7.
8.

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>
  );
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

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