Next.js 9.3 Обзор новых API для getStaticProps, getStaticPaths и getServerSideProps

React.js

В Next.js 9.3 представлены следующие три API:

  • getStaticProps
  • getStaticPaths
  • getServerSideProps

предварительное знание

SSG

Next.js выполняет настройки маршрутизации на основе имени файла в каталоге страниц.

getInitialProps

getInitialProps— это API, который запускается до отображения страницы. Если путь содержит запрос, выполните запрос с требуемыми данными какpropsперешел на страницу. (На самом деле иногда возникают побочные эффекты отсутствия воздействия на HTML, такие как отправка журналов.) Подобно трем API, представленным на этот раз, его можно использовать только вpagesИспользуется в файлах внутри папки. getInitialProps — это API, специфичный для SSR, что является недоразумением. После прямого доступа getInitialProps запустится на стороне сервера. С другой стороны, при использовании next/link для маршрутизации на стороне клиента она выполняется на стороне клиента. Поэтому рекомендуется использовать библиотеку выборки, такую ​​как isomorphic-unfetch.

//pages/stars.js
// 用于客户端和服务器端
import fetch from 'isomorphic-unfetch'

// getInitialProps中获取返回的数据stars
function Stars({ stars }) {
  return <div>Next stars: {stars}</div>
}

// 先执行获取数据
Stars.getInitialProps = async () => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Stars

getStaticProps

getStaticPropsдля предварительного выполнения во время сборкиgetInitialPropsAPI для обработки и предварительной генерации статических файлов. не запускается на клиенте. Всегда запускайте на стороне сервера.

//pages/buildTimeStars.js
// 不在客户端运行
import fetch from 'node-fetch'

// getStaticProps中返回的stars, build_time数据
function BuildTimeStars({ stars, build_time }) {
  return <div>ビルド時（{build_time}）のNextのstar数は: {stars}</div>
}

// 在构建时运行
export async function getStaticProps() {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  const stars = json.stargazers_count
  const build_time = new Date().toString();

  return {
    props: {
      stars,
      build_time
    },
  }
}

export default BuildTimeStars

Dynamic Routes

существуетpagesДобавьте квадратную скобку [] к имени файла в папке, чтобы включить динамическую маршрутизацию. (pages/posts/[pid].js)

//pages/posts/[pid].js
import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

//posts/abc
<div id="__next">
   <p>Post: abc</p>
</div>

//posts/hoge
<div id="__next">
   <p>Post: hoge</p>
</div>

getStaticPaths

Используется для создания статических файлов при использовании динамической маршрутизации.

//zeit/[name].js
import fetch from 'node-fetch'

function Zeit({ name, stars }) {
  return <div>{name} stars: {stars}</div>
}

// 首先执行。 返回路径以使用数组进行预构建。
export async function getStaticPaths() {
  // zeit获取30个由API管理的存储库
  const res = await fetch('https://api.github.com/orgs/zeit/repos')
  const repos = await res.json()
  // 存储库名称的路径
  const paths = repos.map(repo => `/zeit/${repo.name}`)
  return { paths, fallback: false }
}

// 接收带有路由信息的参数
export async function getStaticProps({ params }) {
  // 对应于文件名zeit/[name].js
  const name = params.name
  const res = await fetch(`https://api.github.com/repos/zeit/${name}`)
  const json = await res.json()
  const stars = json.stargazers_count

  return { props: { name, stars } }
}

export default Zeit

// /zeit/ms
<div id="__next">
   <div>ms stars: 2699</div>
</div>

// /zeit/micro
<div id="__next">
   <div>micro stars: 9128</div>
</div>

Обязательные параметры для getStaticProps:pathsа такжеfallback. Он определяет поведение при доступе к путям, отличным от предварительно созданных путей.

  • false
    Другие маршруты 404
  • true
    Если для резервного варианта установлено значение true, даже пути, которые не были предварительно созданы, не будут 404

В заключение

Сервер клиент время исполнения
getStaticProps true false во время сборки (по запросу, если +fallback=true)
getStaticPaths true false только когда построен
getServerSideProps true false по требованию
getInitialProps true true по требованию

оригинальный

I he .com / Matamata не ...

Категории