reactjs - 如何在不使用 getStaticPaths 的情况下从 getStaticProps 中的 url 获取参数？

Question

下面是我的函数，其中我使用 getServerSideProps() 方法并根据我的 URL 中的参数 post_slug 动态获取数据。

// This gets called on every request
export async function getServerSideProps({ query }) {
  const { post_slug } = query || {};

  let url = API_URLS.POST.GET_POST_BY_SLUG;

  url = url.replace(/#POST_SLUG#/g, post_slug);

  const res = await fetch(url);
  const { data } = (await res.json()) || {};

  // Pass post_data to the page via props
  return { props: { data } };
}

但是这个函数在每个请求上渲染一个完整的页面。
所以现在我决定使用 getStaticProps() 但在这里我无法从 URL 获取参数 post_slug。
我读了 next js他们告诉我需要使用 getStaticPaths() 和 getStaticProps() 方法的文档，但这里的问题是我必须在 getStaticPaths() 方法中定义静态参数，但我想要来自当前 URL 的参数。
是否有任何解决方案可以在 getStaticProps() 方法中从 URL 获取参数 post_slug？

Answer 1

您可以使用 getStaticPaths 这样做与 fallback设置为 true获取参数(不是查询)并在请求时创建静态页面。
在这种情况下，当访问者访问未在构建时生成的路径时，Next.js 将在对此类路径的第一次请求时提供页面的“回退”版本(可以简单地为 <div>Loading...</div>)
Next.js 将运行 getStaticProps并首次构建页面和数据json，并在准备好后提供给访问者。
Next.js 还将此路径添加到预渲染页面列表中，因此对同一路径的后续请求将为生成的页面提供服务，就像在构建时预渲染的其他页面一样。
就您而言，您不能简单地换掉 getServerSideProps与 getStaticPaths .您必须创建一个 [postSlug].js使用参数 postSlug .

// Example code
import { useRouter } from 'next/router';

function Post({ post }) {
  const router = useRouter();
  if (router.isFallback)  return <div>Loading...</div>;
  // Render post...
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { postSlug: 'sth' } }, { params: { postSlug: 'sth-else' } }],
    fallback: true,
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.postSlug}`);
  const post = await res.json();
  return {
    props: { post },
  }
}

export default Post;

要更新静态生成的页面，请查看 Next.js Incremental Static Regeneration