数据获取与处理

class 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,
    },
  };
}

4.2 说明：

  • getServerSideProps() 每次请求时都会运行，并获取最新的数据。
  • 返回的对象必须包含 props，数据会传递给页面组件进行渲染。
  • 适合需要频繁更新或实时数据的页面，比如用户仪表盘、股票数据等。

5. 结合 CSR、SSG 和 SSR

Next.js 提供的多种渲染模式可以组合使用，根据页面的需求选择不同的渲染方式。

5.1 混合使用 CSR、SSG 和 SSR

你可以在应用中为不同的页面选择不同的渲染模式。例如，主页可以使用 SSG，某些交互性强的组件可以使用 CSR，而需要实时数据的页面可以使用 SSR。

  • 静态页面生成（SSG）：使用 getStaticProps() 在构建时预生成页面。
  • 服务端渲染（SSR）：使用 getServerSideProps() 在请求时动态生成页面。
  • 客户端渲染（CSR）：在组件挂载后使用 fetch() 或 axios 动态获取数据。

总结

  • fetch() 和 axios：可以在 Next.js 中轻松获取数据，适合客户端渲染时的动态数据加载。
  • getStaticProps()：在构建时获取数据并生成静态页面，适合内容不频繁变化的场景。
  • getServerSideProps()：在每次请求时获取数据并渲染，适合需要实时更新的数据场景。

Next.js 通过支持多种数据获取方式，使得开发者可以根据应用需求灵活选择最适合的渲染方式。

评论区
评论列表
menu