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文档，他们告诉我需要在getStaticProps（）方法上使用getStaticPaths（），但是这里的问题是我必须在getStaticPaths（）方法中定义静态参数，但是我想从当前URL中获取参数

有什么解决方案可以通过getStaticProps（）方法中的URL获取post_slug参数吗？

Answer 1

您可以使用getStaticPaths并将fallback设置为true来获取参数（非查询）并在请求时创建静态页面。

在这种情况下，当访问者访问在构建时尚未生成的路径时，Next.js将在对该路径的第一个请求时提供页面的“后备”版本（可以简单地为{{1} }）

Next.js然后将运行<div>Loading...</div>，并首次构建页面和数据json，并在准备好时将其提供给访问者。

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

就您而言，您不能简单地将getStaticProps换成getServerSideProps。您必须创建一个getStaticPaths才能使用参数[postSlug].js。

postSlug

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

Answer 2

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

中的数据

Answer 3

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

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

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

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

Answer 4

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

此信息已在文档中提及，link。

引用文档：

<块引用>

fallback: true 如果您的应用程序有大量静态依赖于数据的页面（想想：一个非常大的电子商务网站）。你想要预渲染所有产品页面，但是您的构建需要永远。

相反，您可以静态生成一小部分页面并使用回退：其他情况为真。当有人请求的页面不是尚未生成，用户将看到带有加载指示器的页面。不久之后， getStaticProps 完成并且页面将被呈现与请求的数据。从现在开始，所有要求相同的人页面将获得静态预渲染页面。

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

如果您不想显示加载器状态，而是想显示浏览器请求页面（仅限第一次，将添加到预先生成的页面中以供连续请求。）fallback:"blocking"

对于开发，每次请求都会调用 getStaticPaths 和 getStaticProps。

如何在不使用getStaticPaths的情况下从getStaticProps中的网址获取参数？

4 个答案: