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

IT技术 reactjs next.js
2021-05-03 17:36:16

下面是我的函数,其中我使用 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。

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

是否有任何解决方案可以在 getStaticProps() 方法中从 URL 获取参数 post_slug?

4个回答

你可以这样做,用getStaticPathsfallback一套以true获得PARAMS(未查询),并在请求时创建静态页面。

在这种情况下,当访问者访问尚未在构建时生成的路径时,Next.js 将在对此类路径的第一次请求时提供页面的“回退”版本(它可以简单地是<div>Loading...</div>

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

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

在您的情况下,您不能简单地getServerSidePropsgetStaticPaths. 您必须创建一个[postSlug].js才能使用 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 Incremental Static Regeneration

你不能。
getStaticProps将在构建时获取数据,您将无法使用仅在请求期间可用的数据,例如查询参数或 HTTP 标头。
如果您的页面显示经常更新的数据和/或动态内容,您应该改用服务器端渲染
它实际上取决于您需要预渲染的内容,请记住,您仍然可以使用Router并获取其中的数据componentDidMountuseEffect

export async function getStaticPaths() {
  return {
    paths: [],
    // Enable statically generating additional pages
    // For example: `/posts/3`
    fallback: true,
  }
}

这条信息已经在 docs, link 中提到

引用文档:

fallback: true 如果您的应用程序有大量依赖于数据的静态页面(想想:一个非常大的电子商务网站)很有用。您想预渲染所有产品页面,但这样您的构建将花费很长时间。

相反,您可以静态生成一小部分页面并使用 fallback: true 其余部分。当有人请求尚未生成的页面时,用户将看到带有加载指示器的页面。不久之后, getStaticProps 完成,页面将使用请求的数据呈现。从现在开始,每个请求相同页面的人都将获得静态预渲染的页面。

这确保用户始终拥有快速体验,同时保留快速构建和静态生成的好处。

如果您不想显示加载程序状态,而是想显示浏览器请求页面(仅限第一次,将添加到预先生成的页面中以供连续请求。)回退:“阻塞”

对于开发,每个请求都会调用 getStaticPaths 和 getStaticProps。

使用getServerSideProps. getStaticPathsgetStaticProps用于生成静态页面以进行预渲染。假设您在数据库中有博客,您获取博客、获取路径并将它们传递给getStaticProps.

在您的情况下,context对象被传递给getServerSideProps,您可以按如下方式访问 params.id:

export const getServerSideProps = async (context) => {
  return { props: { paramsId: context.params.id } };
};

现在,当您提出请求时,next.js 会将“paramsId”传递给客户端,您可以使用以下命令在组件内部访问它 props.paramsId