面试题：Next.js中如何实现基本的按需加载组件

Question

在Next.js项目中，假设你有一个大型组件 `LargeComponent`，它在页面初始渲染时并不需要，当用户点击某个按钮后才需加载并展示。请阐述实现此按需加载功能的步骤，并给出关键代码示例。

Answer 1

1. 实现步骤：
   • 使用动态导入（Dynamic Imports）。在Next.js中，next/dynamic 提供了一种方式来动态导入组件，从而实现按需加载。
   • 创建一个状态来跟踪按钮是否被点击。
   • 当按钮点击时，更新状态，并触发组件的加载。
2. 关键代码示例：
   • 首先，导入 dynamic 并创建一个状态变量：

import dynamic from 'next/dynamic';
import React, { useState } from'react';

const LargeComponent = dynamic(() => import('./LargeComponent'), {
  ssr: false
});

const MyPage = () => {
  const [isButtonClicked, setIsButtonClicked] = useState(false);
  return (
    <div>
      <button onClick={() => setIsButtonClicked(!isButtonClicked)}>
        {isButtonClicked? 'Hide Component' : 'Show Component'}
      </button>
      {isButtonClicked && <LargeComponent />}
    </div>
  );
};

export default MyPage;

在上述代码中：

• dynamic(() => import('./LargeComponent'), { ssr: false }) 动态导入 LargeComponent，ssr: false 表示在服务器端渲染（SSR）期间不预渲染该组件，因为它是按需加载的。
• isButtonClicked 状态变量跟踪按钮的点击状态。
• 当按钮被点击时，isButtonClicked 状态更新，根据状态决定是否渲染 LargeComponent。