【譯】Next.js 9.3 getStaticProps，getStaticPaths和getServerSideProps的新API概述

Next.js 9.3引入如下三個API:

• getStaticProps
• getStaticPaths
• getServerSideProps

前提知識

SSG

Next.js根據pages目錄中的文件名進行路由設定

getInitialProps

getInitialProps是在渲染頁面以前就會運行的API。 若是該路徑下包含該請求，則執行該請求，並將所需的數據做爲props傳遞給頁面。 (實際上有時會有發送日誌等不影響HTML的反作用。 ） 與這次介紹的3個API同樣，只能在pages文件夾內的文件中使用。 getInitialProps是SSR專用的API，這是誤解。 直接訪問後，getInitialProps將在服務器端運行。 另外一方面，使用next/link進行客戶端路由時，在客戶端執行。 所以，建議使用isomorphic-unfetch等fetch庫。

//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是用於在構建時預先執行getInitialProps進行的處理並預先生成靜態文件的API。 不會在客戶端上運行。 始終在服務器端運行。

//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
  若是fallback設置爲true，則即便未預構建的路徑也不會爲404

結論

	服務端	客戶端	執行時間
getStaticProps	true	false	在構建時（根據要求，若是+ fallback = true）
getStaticPaths	true	false	僅在建造時
getServerSideProps	true	false	根據要求
getInitialProps	true	true	根據要求

原文

qiita.com/matamatanot…