Matarialize中文社区-数据获取与处理

数据获取与处理

前端初学者 2024-09-26 17:53:14

236 Next.js 专栏

在 Next.js 中，数据获取是非常关键的部分，它允许你从 API 或外部服务中获取数据并将其渲染到页面上。可以使用 fetch()、axios 等工具进行数据获取，并结合 Next.js 的不同渲染模式，如静态页面生成（SSG）和服务端渲染（SSR），实现不同的数据获取方式。我们将详细介绍如何在这些模式下获取和处理数据。

1. 使用 `fetch()` 获取数据

Next.js 支持使用浏览器内置的 fetch() 函数来进行数据获取。在客户端和服务端渲染模式下都可以使用。

1.1 在页面组件中使用 `fetch()`

在 Next.js 中可以直接在 useEffect 钩子中使用 fetch() 来获取数据，适合客户端渲染。

代码示例：

import { useEffect, useState } from 'react';

export default function ClientFetch() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>Fetched Posts</h1>
      {data ? (
        <ul>
          {data.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

1.2 说明：

使用 useState 存储从 API 获取的数据。
使用 useEffect 进行数据获取，确保只在组件挂载时执行。
fetch() 是异步的，返回的 Promise 需要通过 .then() 链式处理。
这种方式适合需要在浏览器中进行数据加载的场景。

2. 使用 `axios` 获取数据

axios 是一个流行的 HTTP 请求库，功能更强大且易用性更好，支持拦截器、取消请求等功能。

2.1 在组件中使用 `axios`

安装 axios：

npm install axios

代码示例：

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

export default function AxiosFetch() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => setData(response.data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <div>
      <h1>Fetched Posts with Axios</h1>
      {data ? (
        <ul>
          {data.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

2.2 说明：

axios.get() 返回一个 Promise，成功时调用 .then()，失败时调用 .catch()。
axios 提供了更简洁的 API，并默认支持 JSON 数据的解析。

3. 在 SSG 模式下获取数据

静态生成（SSG）是 Next.js 的一种数据获取模式，允许你在构建时预先获取数据，并生成静态页面。适合不需要频繁更新的数据场景。

3.1 使用 `getStaticProps()` 获取数据

getStaticProps() 是 Next.js 提供的一个函数，用于在构建时获取数据并生成静态页面。

代码示例：

export default function StaticGeneratedPage({ posts }) {
  return (
    <div>
      <h1>Statically Generated Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

3.2 说明：

getStaticProps() 是一个异步函数，会在构建时被执行。
返回的对象必须包含 props，它将作为组件的属性传递给页面组件。
当你访问这个页面时，它是静态生成的 HTML，适合博客等场景。

3.3 使用场景：

数据不经常变化，或可以在构建时生成的场景。
可以结合 revalidate 选项实现定期重新生成。

4. 在 SSR 模式下获取数据

服务端渲染（SSR）是每次请求时从服务器动态获取数据并渲染页面的方式，适合需要实时更新数据的场景。

4.1 使用 `getServerSideProps()` 获取数据

getServerSideProps() 是一个函数，用于在请求时获取数据并服务端渲染页面。

代码示例：

export default function ServerRenderedPage({ posts }) {
  return (
    <div>
      <h1>Server-Side Rendered Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}