簡介

參考: https://blog.csdn.net/weixin_46803507/article/details/119188874

不同獲取數據的方式

getServerSideProps

會在每次請求 (每次 request) 頁面或是組件的時候都執行一次。

export async function getServerSideProps(context) {
  return {
    props: {},
  }
}

getStaticProps

會在 build 階段獲取數據，也就表示說，只會獲取一次，數據就再也不會改變了，因此 static 表示靜態。使用方式其實就是要 export 出這個函數。這邊 return 的 props 就會被當成該組件的 props 參數傳進去渲染組件。

export async function getStaticProps(context) {
  return {
    props: {},
  }
}

getStaticPaths

用於動態路由的場景，而且必須與 getStaticProps 連用才行。所做的就是，對於動態路由，Next 希望在 build 階段就要知道需要根據路由的動態參數生成出多少份 HTML。比如說，假設今天有 pages/posts/[id].js，然後假設現在系統中有 id 為 1~3 的 posts，Next 就會希望渲染動態路由 /posts/[id] 之前就先生成出三份 HTML，/posts/1、/posts/2、/posts/3。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true or false
  };
}

看到 return 的一個重要的屬性就是 paths 數組。其中每個元素都是一個對象，形如 { params: { ... } }。以上述違例，Next 就規定 getStaticPaths 要返回如下： getStaticProps 的 context 中有一個 params 參數，通過這個參數，Next 就會將當前的參數對象 (eg. { id: '1' }) 動態賦值給 params 參數。並且這麼一來，Next 就可以在 build 階段生成出所有動態路由對應的 HTML。

return {
  paths: [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ],
  fallback: ...
}

我們可以看到 getStaticProps 的 context 對象中沒有 req, res, query。原因也很簡單，就是因為 getStaticProps 是在 build 階段運行的，所以那些請求與 http 相關的一些參數，自然只會存在於 getServerSideProps。

getStaticProps 和 getServerSideProps 是不可以同時使用的。

上面說 getStaticProps 只會在 build 階段運行一次，且數據也就靜態的固定下來。不過一般我們在開發環境下 (npm run dev)，其實會發現如果數據變了，頁面 UI 也會變，也就意味每次 request 也調用了 getStaticProps。原因是因為 getStaticProps 只有在生產環境下 (npm run build -> npm run start) 才是靜態的，在開發環境下 (npm run dev) getStaticProps 仍然會在每次 request 時都會被調用。

getStaticProps 只能在 page 級頁面下使用。但是 getServerSideProps 可以隨意用。

屬性	getServerSideProps	getStaticProps
預渲染形式	服務端渲染 SSR	靜態生成 SSG
生成 HTML 時機	每次 request 重新生成	只有一次，build 階段
運行階段	每次 request	只有一次，build 階段
運行環境	服務端	服務端
動態路由	不支持	與 getStaticPaths 連用

簡介

getServerSideProps​

getStaticProps​

getStaticPaths​

getServerSideProps

getStaticProps

getStaticPaths