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

问题描述

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

Here is my function below in which I am using the getServerSideProps() method and fetch data dynamically according to the param post_slug from my URL.

// 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 } };
}

但是这个函数在每次请求时都会渲染一个完整的页面.

But this function render a whole page on every request.

所以现在我决定使用 getStaticProps() 但在这里我无法从 URL 获取参数 post_slug.

So now I decide to use getStaticProps() but here I could not get param post_slug from URL.

我阅读了 next js 文档，他们告诉我需要使用 getStaticPaths() 沿 getStaticProps() 方法，但这里的问题是我必须在 getStaticPaths() 方法中定义静态参数，但我想要来自当前 URL 的参数.

I read next js documentation where they tell I need to use getStaticPaths() along getStaticProps() method but here the problem is I have to define static params in getStaticPaths() method but I want param from my current URL.

有没有办法在getStaticProps()方法中从URL获取param post_slug?

Is there any solution to get param post_slug from URL in the getStaticProps() method?

推荐答案

您可以使用 getStaticPaths 并将 fallback 设置为 true 来实现获取参数(不是查询)并在请求时创建静态页面.

You can do so using getStaticPaths with fallback set to true to get params(not query) and create the static page at request time.

在这种情况下，当访问者访问在构建时尚未生成的路径时，Next.js 将提供后备"服务.第一次请求到这样一个路径的页面版本(它可以简单地是<div>Loading...</div>)

In that case, when visitors visit paths that have not been generated at build time, Next.js will serve a "fallback" version of the page on the first request to such a path (It can simply be <div>Loading...</div>)

Next.js 将运行 getStaticProps 并首次构建页面和数据 json 并在准备好后提供给访问者.

Next.js will then run getStaticProps and build the page and data json for the first time and serve to the visitor when ready.

Next.js 还会将此路径添加到预渲染页面列表中，因此对同一路径的后续请求将服务于生成的页面，就像在构建时预渲染的其他页面一样.

Next.js also adds this path to the list of pre-rendered pages so subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time.

在您的情况下，您不能简单地将 getServerSideProps 换成 getStaticPaths.您必须创建一个 [postSlug].js 才能使用参数 postSlug.

In your case, you can't simply swap out getServerSideProps with getStaticPaths. You will have to create a [postSlug].js to use the param 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增量静态再生

To update the statically generated pages, check out Next.js Incremental Static Regeneration

这篇关于如何在不使用 getStaticPaths 的情况下从 getStaticProps 中的 url 获取参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！