Как получить параметр из URL-адреса в getStaticProps без использования getStaticPaths? - PullRequest
Новая
       72

Как получить параметр из URL-адреса в getStaticProps без использования getStaticPaths?

0 голосов
/ 03 августа 2020

Вот моя функция ниже, в которой я использую метод getServerSideProps () и извлекаю данные динамически в соответствии с параметром post_slug из моего 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 } };
}

Но эта функция отображает всю страницу при каждом запросе .

Итак, теперь я решил использовать getStaticProps (), но здесь я не смог получить параметр post_slug из URL.

Я прочитал next js документацию, где они говорят, что я нужно использовать getStaticPaths () вместе с методом getStaticProps (), но здесь проблема в том, что я должен определить stati c params в методе getStaticPaths (), но мне нужен параметр из моего текущего URL-адреса.

Есть ли какое-либо решение для получить параметр post_slug из URL в методе getStaticProps ()?

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

Вы можете сделать это, используя getStaticPaths с fallback, установленным на true, чтобы получить параметры (не запрос) и создать страницу stati c во время запроса.

В этом случае, когда посетители посещают пути, которые не были созданы во время сборки, Next. js будет обслуживать "резервную" версию страницы при первом запросе на такой путь (это может быть просто <div>Loading...</div>)

Далее. js затем запустит getStaticProps и создаст страницу и данные json в первый раз и будет обслуживать посетителя, когда будет готов.

Далее. 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;

Чтобы обновить статически сгенерированные страницы, проверьте Далее. js Incremental Stati c Regeneration

0 голосов
/ 03 августа 2020

Нельзя. getStaticProps будет извлекать данные во время сборки , и вы не сможете использовать данные, которые доступны только во время запроса, например параметры запроса или заголовки HTTP. Если на вашей странице отображаются часто обновляемые данные и / или динамический c контент, вам следует использовать рендеринг на стороне сервера . на самом деле это зависит от того, что вам нужно предварительно обработать, помните, что вы все равно можете использовать Router и получать данные внутри componentDidMount или useEffect

...