如何在不使用 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。

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

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

Answer 1

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

\n

这条信息已在文档链接中提到。

\n

引用文档：

\n

\n

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

\n

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

\n

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

\n

\n

如果您不想显示加载程序状态，而是想显示浏览器请求页面（仅限第一次，将添加到预先生成的页面中以进行连续请求。）后备：“阻止”

\n

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

\n

Answer 2

你可以这样做，用getStaticPaths同fallback一套以true获得PARAMS（未查询），并在请求时创建静态页面。

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

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

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

在您的情况下，您不能简单地getServerSideProps用getStaticPaths. 您必须创建一个[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

Answer 3

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

RoutercomponentDidMountuseEffect

\n