следующий. js getStaticPaths перечисляет все пути или только те, которые находятся в непосредственной близости? - PullRequest
Новая
       8

следующий. js getStaticPaths перечисляет все пути или только те, которые находятся в непосредственной близости?

0 голосов
/ 28 мая 2020

Используя Next. js для экспорта stati c страниц, я получаю, что в динамическом c маршруте, таком как pages/[id].js, будет создан любой путь, который я ввел в раздел getStaticPaths. Круто.

Что лучше перечислить каждую страницу: 

getStaticPaths(){
  return (
    // some function to spit out a list of every possible page
  )
}

или 

getStaticPaths(){
  return (
    // some function to return the next and previous page
  )
}

или это имеет значение?

1 Ответ

1 голос
/ 30 мая 2020

Для Dynami c пример маршрутов posts/[id].js getStaticPaths необходимо определить список путей, чтобы nextjs предварительно отображал все указанные пути во время сборки.

Функция getStaticPaths необходимо вернуть объект со свойством paths, которое представляет собой массив с параметрами маршрута и свойством fallback, которое будет истинным или ложным. Если для fallback установлено значение false для любого пути, который не возвращается из функции, getStaticPaths не будет предварительно отрисован, что приведет к странице 404.

Если вы знаете все пути, которые вы необходимо выполнить рендеринг заранее, вы можете установить fallback в false. Вот пример .. 

 // getStaticPaths for /category/[slug] where slug can only be -
 // either 'category-slug-1', 'category-slug-2' or 'category-slug-3'

 export const getStaticPaths = async () => {

   return {
      paths: [
        { params: { slug: 'category-slug-1'} },
        { params: { slug: 'category-slug-2'} },
        { params: { slug: 'category-slug-3'} }
       ],
     fallback: false // fallback is set to false because we already know the slugs ahead of time
   }   

 }

Допустим, у вас есть маршрут /posts/[id].js и идентификаторы, поступающие из базы данных, и новые сообщения создается каждый день. В этом случае вы можете вернуть уже существующие пути для предварительного рендеринга некоторых страниц. и установите fallback на true и по запросу следующий js будет обслуживать резервную версию страницы вместо отображения 404 страницы для путей, которые не возвращаются из функции getStaticPaths, а затем в фоновом режиме , следующий js вызовет getStaticProps для запрошенного пути и предоставит данные как JSON, которые будут использоваться для отображения страницы в браузере.

Вот пример: 


export const getStaticPaths = async () => {
   const posts = await // your database query or fetch to remote API

   // generate the paths
   const paths = posts.map(post => 
      { 
        params: { id: post.id } // keep in mind if post.id is a number you need to stringify post.id
      }
   )

   return {
      paths,
      fallback: true
   }   

 }

PS - При использовании fallback, установленного на true, вам нужно отобразить какой-то запасной компонент в вашем NextPage компоненте, иначе, когда вы попытаетесь получить доступ к данным из реквизита, он выдаст ошибку, например cannot read property ...x of undefined

Вы можете отобразить резервный вариант следующим образом: 

// in your page component
import {useRouter} from 'next/router';

const router = useRouter()

if (router.isFallback) {
   return <div>loading...</div>
}
...