NextJS 如何在客户端执行数据接口请求？

Next.js 是一个基于 React 的框架，它提供了构建服务器端渲染（Server-Side Rendering, SSR）和静态网站的能力。但它也支持在客户端执行数据接口请求。这通常是在组件的生命周期方法中或使用 React 的 Hooks 完成的。以下是一些在客户端进行数据接口请求的常见方法：

使用 fetch API

在组件内部，你可以使用原生的 fetch API 来进行数据请求。例如：

jsx
import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // 空数组表示这个 effect 只会在组件挂载时执行一次

  if (!data) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

使用 axios

axios 是一个流行的 HTTP 客户端库，提供了更丰富的配置选项和功能。你需要先安装它，然后可以在组件中使用：

jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios('https://api.example.com/data');
      setData(response.data);
    };

    fetchData();
  }, []);

  if (!data) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

使用 SWR

SWR 是由 Vercel（Next.js 的开发者）提供的一个 React Hooks 库，用于数据获取。SWR 有很多实用的特性，比如自动重新验证、缓存控制、聚焦重新验证等。

首先，安装 SWR：

bash
npm install swr

然后在组件中使用：

jsx
import useSWR from 'swr';
import React from 'react';

const fetcher = (...args) => fetch(...args).then(res => res.json());

const MyComponent = () => {
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

这些方法都是在客户端执行的，所以它们不会参与到 Next.js 的服务器端渲染或静态生成的过程中。如果你需要在服务器端获取数据以利用 SSR 或 SSG 的优势，你应该在相应的 Next.js 生命周期方法，如getStaticProps或getServerSideProps中获取数据。