Блог

Я прочитал Next.js документы, и я знаю, как работать как с getStaticProps, так и с getStaticPaths.

Чего мне не хватает, так это того, как они на самом деле работают вместе? Я имею в виду, когда именно вызывается getStaticProps (при использовании с getStaticPaths в файле [slug].js) ?

В моем анализе (в котором я не уверен) я думаю, что getStaticProps «каким-то образом» вызывается внутри цикла getStaticPaths, поэтому getStaticPaths запускает getStaticProps для каждого объекта в его переменной «пути», я прав?

Найдите мой комментарий в этом фрагменте кода:

 export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
// getStaticProps is called somewhere in the previous loop???

  
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Post
 

Я также хочу подтвердить другое понимание, изменяет ли getStaticPaths переменную контекста, назначая ключ параметров для каждого объекта в массиве путей, поэтому, когда он вызывает getStaticProps, параметры будут обновлены в контексте (к которому обе функции имеют доступ) и готовы для getStaticProps?

Я прочитал Next.js документы и просмотрел много видео о получении данных в Next.js, но все еще не нашел ответа на свои вопросы.

Спасибо, Таха

getStaticPaths называется первым. Вы возвращаете некоторые параметры и массив параметров для ввода getStaticProps .

getStaticProps затем вызывается один раз для каждого набора параметров, из которого вы вернулись getStaticPaths . Этот шаг также выполняется параллельно, чтобы ускорить сборку.