MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

如何在 Next.js 项目中高效使用 getStaticProps

2023-08-191.9k 阅读

一、理解 getStaticProps 的基础概念

1.1 getStaticProps 是什么

在 Next.js 项目中，getStaticProps 是一个特殊的函数。它的主要功能是在构建时（build time）获取数据，并将这些数据作为 props 传递给页面组件。这意味着页面在构建阶段就已经有了所需的数据，而不是在运行时（runtime）才去获取。这种预渲染的方式可以极大地提高页面的加载性能，因为用户访问页面时，数据已经准备好，无需等待额外的网络请求。

例如，假设我们有一个博客页面，需要展示一系列文章。如果使用 getStaticProps，在构建博客应用时，它就会去获取所有文章的数据，然后将这些数据传递给博客页面组件，这样当用户访问博客页面时，文章数据能快速呈现。

1.2 为什么要使用 getStaticProps

  1. 性能提升：如前文所述，由于数据在构建时获取，用户访问页面时无需等待数据从服务器获取，减少了加载时间。特别是对于内容更新不频繁的页面，这种方式能显著提升用户体验。例如，一个公司的介绍页面，内容可能几个月才更新一次，使用 getStaticProps 就可以在构建时获取并渲染好，每次用户访问都能快速看到完整内容。
  2. SEO 友好：搜索引擎爬虫在抓取页面时，更倾向于获取静态内容。getStaticProps 预渲染的数据使得页面在构建后就是一个包含完整数据的静态页面，这有助于搜索引擎更好地理解和索引页面内容，提高网站在搜索结果中的排名。

1.3 getStaticProps 的执行时机

getStaticProps 只在两种情况下执行：

  1. 构建时：当我们运行 next build 命令构建项目时，Next.js 会遍历所有导出了 getStaticProps 函数的页面，并在构建过程中执行这些函数来获取数据。这确保了页面在部署前就已经有了所需的数据。
  2. 增量静态再生（Incremental Static Regeneration）：从 Next.js 9.5 开始引入的特性。在某些情况下，我们希望在页面已经部署后，能够在一定时间间隔或特定事件触发时重新生成页面。例如，对于一个新闻网站，文章内容可能每天更新一次，我们可以设置每隔一天重新运行 getStaticProps 来更新文章数据。

二、在 Next.js 项目中使用 getStaticProps 的基本步骤

2.1 创建页面组件

首先，我们需要创建一个页面组件。在 Next.js 中，页面组件位于 pages 目录下。例如，创建一个 pages/about.js 文件：

import React from 'react';

const About = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data.description}</p>
    </div>
  );
};

export default About;

这个 About 组件接收一个 data prop，我们将通过 getStaticProps 来提供这个数据。

2.2 定义 getStaticProps 函数

在同一个页面组件文件中，我们可以定义 getStaticProps 函数。这个函数必须是异步的，因为它通常涉及到从 API 或数据库获取数据的操作。

import React from 'react';

const About = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data.description}</p>
    </div>
  );
};

export async function getStaticProps() {
  const res = await fetch('https://example.com/api/about');
  const data = await res.json();

  return {
    props: {
      data
    },
    revalidate: 60 * 60 * 24 // 一天后重新验证数据，用于增量静态再生
  };
}

export default About;

在上述代码中，getStaticProps 函数使用 fetch 从一个 API 获取数据。获取到数据后，通过返回一个对象，将数据放在 props 字段中传递给页面组件。revalidate 字段设置了增量静态再生的时间间隔，这里设置为一天（以秒为单位）。

2.3 构建和部署项目

当我们完成页面组件和 getStaticProps 的编写后，运行 next build 命令来构建项目。Next.js 会执行 getStaticProps 函数获取数据，并将数据和页面组件一起生成静态 HTML 文件。然后可以使用 next start 命令在本地测试，或者将生成的 .next 目录部署到服务器上。

三、从不同数据源获取数据

3.1 从 API 获取数据

从 API 获取数据是 getStaticProps 最常见的用法之一。除了前面示例中使用的 fetch，我们还可以使用其他库，如 axios。

import React from 'react';
import axios from 'axios';

const BlogPost = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const { data } = await axios.get(`https://example.com/api/posts/${context.params.id}`);

  return {
    props: {
      post: data
    }
  };
}

export default BlogPost;

在这个例子中，getStaticProps 函数使用 axios 从 API 获取特定博客文章的数据。context.params.id 用于动态获取文章的 ID，这在处理动态路由页面时非常有用。

3.2 从本地 JSON 文件获取数据

有时候，我们的数据可能存储在本地的 JSON 文件中，特别是对于一些不需要频繁更新的数据。例如，一个网站的配置信息。

import React from'react';
import siteConfig from '../config/site.json';

const Home = ({ config }) => {
  return (
    <div>
      <h1>{config.title}</h1>
      <p>{config.description}</p>
    </div>
  );
};

export async function getStaticProps() {
  return {
    props: {
      config: siteConfig
    }
  };
}

export default Home;

在这个示例中，我们直接导入本地的 site.json 文件，并在 getStaticProps 中将其作为 prop 传递给 Home 组件。

3.3 从数据库获取数据

从数据库获取数据需要使用相应的数据库驱动。以 MongoDB 为例，我们可以使用 mongodb 包。

import React from'react';
import { MongoClient } from'mongodb';

const Products = ({ products }) => {
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product._id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getStaticProps() {
  const client = await MongoClient.connect('mongodb://localhost:27017');
  const db = client.db('my-shop');
  const productsCollection = db.collection('products');
  const products = await productsCollection.find().toArray();

  client.close();

  return {
    props: {
      products: products.map(product => ({
        id: product._id.toString(),
        name: product.name
      }))
    }
  };
}

export default Products;

在上述代码中，getStaticProps 函数连接到本地的 MongoDB 数据库，从 products 集合中获取所有产品数据，并将其传递给 Products 页面组件。注意，在使用完数据库连接后，需要关闭连接。

四、处理动态路由和 getStaticProps

4.1 动态路由基础

在 Next.js 中，动态路由允许我们根据不同的参数渲染不同的页面。例如，对于博客文章页面，我们可能希望每个文章都有一个独立的页面，其 URL 类似于 /posts/123，其中 123 是文章的 ID。我们通过在 pages 目录中创建带有方括号的文件来定义动态路由，如 pages/posts/[id].js。

4.2 在动态路由页面中使用 getStaticProps

import React from'react';
import axios from 'axios';

const BlogPost = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const { data } = await axios.get(`https://example.com/api/posts/${context.params.id}`);

  return {
    props: {
      post: data
    }
  };
}

export async function getStaticPaths() {
  const res = await axios.get('https://example.com/api/posts');
  const posts = res.data;

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

export default BlogPost;

在这个例子中，getStaticProps 函数根据 context.params.id 从 API 获取特定文章的数据。而 getStaticPaths 函数则用于告诉 Next.js 在构建时需要生成哪些静态页面路径。它从 API 获取所有文章列表，然后生成每个文章的路径。fallback 设置为 false 表示只有在 paths 中定义的路径才会被预渲染，其他路径会返回 404 错误。

4.3 fallback 选项的不同取值

  1. fallback: false：如上述示例，只有在 getStaticPaths 中定义的路径会被预渲染。如果用户访问一个未预渲染的路径，会返回 404 错误。
  2. fallback: true：当用户访问一个未预渲染的路径时，Next.js 会在运行时调用 getStaticProps 来生成该页面。在生成过程中，用户会看到一个加载状态，生成完成后页面会呈现。这种方式适用于数据量较大，无法在构建时全部预渲染的情况，但首次加载可能会有一定延迟。
  3. fallback: blocking：与 fallback: true 类似，但 Next.js 会在服务器端等待 getStaticProps 完成数据获取并生成页面后，再将页面返回给用户。这样用户不会看到加载状态，但可能会增加服务器响应时间。

五、优化 getStaticProps 的使用

5.1 数据缓存

如果在构建过程中多次调用 getStaticProps 从相同的数据源获取数据，我们可以考虑使用缓存机制来提高性能。例如，对于从 API 获取数据的情况，可以使用 lru - cache 库。

import React from'react';
import axios from 'axios';
import LRU from 'lru - cache';

const cache = new LRU({ max: 100 });

const BlogPost = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const cacheKey = `post - ${context.params.id}`;
  let post = cache.get(cacheKey);

  if (!post) {
    const { data } = await axios.get(`https://example.com/api/posts/${context.params.id}`);
    post = data;
    cache.set(cacheKey, post);
  }

  return {
    props: {
      post
    }
  };
}

export async function getStaticPaths() {
  const res = await axios.get('https://example.com/api/posts');
  const posts = res.data;

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

export default BlogPost;

在这个代码中，我们使用 lru - cache 来缓存从 API 获取的文章数据。如果数据在缓存中存在，则直接使用缓存数据，避免重复的 API 请求。

5.2 减少不必要的数据获取

在 getStaticProps 中，只获取页面实际需要的数据。例如，如果页面只需要文章的标题和简介，就不要获取整个文章内容。

import React from'react';
import axios from 'axios';

const BlogPostPreview = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.excerpt}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const { data } = await axios.get(`https://example.com/api/posts/${context.params.id}?fields=title,excerpt`);

  return {
    props: {
      post: data
    }
  };
}

export async function getStaticPaths() {
  const res = await axios.get('https://example.com/api/posts');
  const posts = res.data;

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

export default BlogPostPreview;

在这个示例中，通过在 API 请求中添加 fields 参数，只获取文章的标题和简介，减少了数据传输量和处理时间。

5.3 并行数据获取

当需要从多个数据源获取数据时，可以使用 Promise.all 来并行获取，从而提高整体的获取速度。

import React from'react';
import axios from 'axios';

const Page = ({ data1, data2 }) => {
  return (
    <div>
      <h1>Combined Data</h1>
      <p>{data1.message}</p>
      <p>{data2.info}</p>
    </div>
  );
};

export async function getStaticProps() {
  const [res1, res2] = await Promise.all([
    axios.get('https://example.com/api/data1'),
    axios.get('https://example.com/api/data2')
  ]);

  const data1 = res1.data;
  const data2 = res2.data;

  return {
    props: {
      data1,
      data2
    }
  };
}

export default Page;

在这个代码中，Promise.all 同时发起两个 API 请求，当两个请求都完成后，将数据传递给页面组件。这样可以显著减少获取数据的总时间，特别是当数据源响应时间较长时。

六、处理错误和异常

6.1 API 请求错误

在从 API 获取数据时，可能会遇到各种错误，如网络故障、API 响应错误等。我们需要在 getStaticProps 中处理这些错误。

import React from'react';
import axios from 'axios';

const BlogPost = ({ post }) => {
  return (
    <div>
      {post? (
        <>
          <h1>{post.title}</h1>
          <p>{post.content}</p>
        </>
      ) : (
        <p>Error fetching post data</p>
      )}
    </div>
  );
};

export async function getStaticProps(context) {
  try {
    const { data } = await axios.get(`https://example.com/api/posts/${context.params.id}`);
    return {
      props: {
        post: data
      }
    };
  } catch (error) {
    return {
      props: {
        post: null
      }
    };
  }
}

export async function getStaticPaths() {
  const res = await axios.get('https://example.com/api/posts');
  const posts = res.data;

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

export default BlogPost;

在这个例子中，getStaticProps 使用 try - catch 块来捕获 API 请求可能出现的错误。如果发生错误，将 post 设置为 null，页面组件会显示相应的错误提示。

6.2 其他异常情况

除了 API 请求错误，还可能遇到其他异常，如数据库连接失败（当从数据库获取数据时）。同样，我们需要在 getStaticProps 中进行适当的处理。

import React from'react';
import { MongoClient } from'mongodb';

const Products = ({ products }) => {
  return (
    <div>
      {products? (
        <ul>
          {products.map(product => (
            <li key={product._id}>{product.name}</li>
          ))}
        </ul>
      ) : (
        <p>Error fetching product data</p>
      )}
    </div>
  );
};

export async function getStaticProps() {
  try {
    const client = await MongoClient.connect('mongodb://localhost:27017');
    const db = client.db('my - shop');
    const productsCollection = db.collection('products');
    const products = await productsCollection.find().toArray();

    client.close();

    return {
      props: {
        products: products.map(product => ({
          id: product._id.toString(),
          name: product.name
        }))
      }
    };
  } catch (error) {
    return {
      props: {
        products: null
      }
    };
  }
}

export default Products;

在这个从 MongoDB 获取数据的示例中，try - catch 块捕获可能发生的数据库连接或查询错误。如果出现错误，将 products 设置为 null，页面组件会显示错误信息。

七、与其他 Next.js 特性结合使用

7.1 与 getStaticPaths 和 Incremental Static Regeneration 结合

我们前面已经介绍了 getStaticPaths 与 getStaticProps 在动态路由中的配合使用。当结合增量静态再生时，我们可以让动态路由页面在部署后自动更新数据。

import React from'react';
import axios from 'axios';

const BlogPost = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const { data } = await axios.get(`https://example.com/api/posts/${context.params.id}`);

  return {
    props: {
      post: data
    },
    revalidate: 60 * 60 // 每小时重新验证数据
  };
}

export async function getStaticPaths() {
  const res = await axios.get('https://example.com/api/posts');
  const posts = res.data;

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

export default BlogPost;

在这个例子中，revalidate 设置为每小时，意味着每个博客文章页面在部署后，每小时会重新运行 getStaticProps 获取最新数据，确保页面内容保持最新。

7.2 与 Server - Side Rendering (SSR) 对比和结合

虽然 getStaticProps 主要用于静态生成，但有时候我们可能需要结合 Server - Side Rendering（SSR）的特性。例如，对于一些包含用户特定信息（如用户登录状态）的页面，静态生成可能不太适用，但部分内容可以通过 getStaticProps 提前获取。

import React from'react';
import axios from 'axios';

const UserDashboard = ({ user, commonData }) => {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <p>{commonData.message}</p>
    </div>
  );
};

export async function getStaticProps() {
  const { data } = await axios.get('https://example.com/api/common - data');

  return {
    props: {
      commonData: data
    }
  };
}

export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req); // 假设这是一个获取用户会话信息的函数
  return {
    props: {
      user
    }
  };
}

export default UserDashboard;

在这个示例中，getStaticProps 获取一些通用的数据，而 getServerSideProps 获取用户特定的数据。这样既利用了静态生成的性能优势，又能满足页面中需要根据用户状态动态渲染的部分。

7.3 与 Next.js 中间件结合

Next.js 中间件可以在请求到达页面之前对请求进行处理。我们可以利用中间件来辅助 getStaticProps 的数据获取。例如，通过中间件进行身份验证，确保只有授权用户能够获取某些数据。

// pages/protected - page.js
import React from'react';
import axios from 'axios';

const ProtectedPage = ({ data }) => {
  return (
    <div>
      <h1>Protected Page</h1>
      <p>{data.content}</p>
    </div>
  );
};

export async function getStaticProps(context) {
  const { data } = await axios.get('https://example.com/api/protected - data', {
    headers: {
      authorization: context.req.headers.authorization
    }
  });

  return {
    props: {
      data
    }
  };
}

export default ProtectedPage;

// next.config.js
const withMiddleware = require('@nextjs/middleware');

module.exports = withMiddleware({
  async middleware(req) {
    const isAuthenticated = await checkAuth(req); // 假设这是一个验证用户身份的函数
    if (!isAuthenticated) {
      return new Response(null, {
        status: 302,
        headers: {
          location: '/login'
        }
      });
    }
  }
});

在这个例子中，中间件首先验证用户身份。如果用户未通过验证，将重定向到登录页面。getStaticProps 则从受保护的 API 获取数据，并使用 context.req.headers.authorization 将身份验证信息传递给 API。

通过以上全面的介绍和代码示例，相信你对如何在 Next.js 项目中高效使用 getStaticProps 有了深入的理解。无论是从基础概念、使用步骤，还是优化、错误处理以及与其他特性的结合，都为你在实际项目中应用 getStaticProps 提供了丰富的知识和实践指导。