我可以使用带有 getStaticPaths 的空对象获取参数吗？

Question

在getStaticPaths函数中，有一个带参数返回的路径postId:1。如果有两个或三个参数 postId: 2, postId: 3 等，这些将静态生成。对吗？

有没有办法不使用任何 id 静态加载任何 post？如果我想加载所有 posts 载入画面，可以实现吗？

import {useRouter} from "next/router"

export default function Post({ post }) {
  const router = useRouter()
  if (router.isFallback) {
    return <h1>Loading...</h1>
  }

  return (
    <>
      <h4>{post.id} - {post.title}</h4>
      <p>{post.body}</p>
    </>
  );
}

export async function getStaticPaths() {
  return {
    paths: [
       {
         params: { postId: "1" }
       }
     ],                 
    fallback: true,
  };
}

export async function getStaticProps(context) {
  const { params } = context;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.postId}`
  );
  const data = await response.json();

  if(!data.id) {
    return {
      notFound: true
    }
  }

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

Answer 1

我认为您正在寻找一种解决方案来获取静态页面的动态数据，而不是从 static-side 代提供后备页面。

我建议 2 个选项：

您可以将 server-side 渲染与 getServerSideProps 一起使用。当然，所有 HTML 将在 run-time 期间生成（每个请求生成 HTML）

export async function getServerSideProps(context) {
  const { params } = context;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.postId}`
  );
  const data = await response.json();

  if(!data.id) {
    return {
      notFound: true
    }
  }

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

第二个选项是Incremental static regeneration (ISR) (available from version 9.5). This is the upgrade version of static-site generation (SSG) and likely a hybrid between SSG and SSR, it will generate all static HTML with defined paths in getStaticPath (like SSG), BUT if the path, which a user has fetched, is not defined, it will automatically generate HTML on the fly, and then cache it on the server (like other generated HTMLs in SSG). To have this behavior, you need to use fallback: 'blocking' in getStaticPaths (If you want to understand how fallback works, you can check this document出)

ISR 还提供重新验证机制。由于 API 的数据更新，您可以设置更新生成的 HTML 的计时器。此功能的唯一缺点是只能从 Next.js 12.1 开始使用，因此您可以考虑为此实施升级 Next.js 版本。

export async function getStaticPaths() {
  return {
    paths: [
       {
         params: { postId: "1" }
       }
     ],                 
    fallback: "blocking", //Next.js 9.5 - generate a new HTML based on user demand if the path is not defined
  };
}

export async function getStaticProps(context) {
  const { params } = context;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.postId}`
  );
  const data = await response.json();

  if(!data.id) {
    return {
      notFound: true
    }
  }

  return {
    props: {
      post: data,
    },
    revalidate: 10, //Next.js 12.1 - Validate data to regenerate static HTMLs every 10 seconds
  };
}

我可以使用带有 getStaticPaths 的空对象获取参数吗？

Can I have the params with an empty object with getStaticPaths?

javascript

node.js

reactjs

next.js