NextJS：getInitialProps 方法

Question

使用 NextJS 並看到一個頁面示例：

class IndexPage extends Component {
  static async getInitialProps(context) {
    return {};
  }
  render() {
    return <div>hello world</div>;
  }
}
export default withRouter(IndexPage);

NextJS 中的 getInitialProps 方法究竟是什么？

Answer 1

getInitialProps通常是一個異步函數，它適用於服務器上的異步操作，然后將數據作為 props 傳遞到頁面。

它可以在服務器和瀏覽器上運行（例如，如果您使用Link ）。

我的結論是，當您的組件充當 Page 並且您希望將數據作為 Props 提供時，使用getInitialProps來獲取數據。

文檔： https : //nextjs.org/learn/basics/fetching-data-for-pages

Answer 2

請注意，要在頁面加載時加載數據，我們使用 getInitialProps，它是一個異步靜態方法。 它可以異步獲取任何解析為 JavaScript 普通對象的內容，該對象填充道具。

從 getInitialProps 返回的數據在服務器渲染時被序列化，類似於 JSON.stringify。 確保從 getInitialProps 返回的對象是一個普通對象，而不是使用 Date、Map 或 Set。

對於初始頁面加載，getInitialProps 將僅在服務器上執行。 getInitialProps 只會在通過 Link 組件導航到不同路由或使用路由 API 時在客戶端上執行。

注意：getInitialProps 不能在子組件中使用。 僅在頁面中。

Answer 3

獲取初始道具

• 用於異步獲取一些數據，然后填充道具。
• 對於初始頁面加載，getInitialProps 將僅在服務器上執行。
• 只有當通過 next/link 組件或使用 next/router 導航到不同的路由時，才會在客戶端上執行。
• 不能在子組件中使用，只能在每個頁面的默認導出中使用。

如果您使用 Next.js 9.3 或更新版本，建議您使用getStaticProps或getServerSideProps而不是getInitialProps 。

這些新的數據獲取方法允許您在靜態生成和服務器端渲染之間進行精細的選擇。

來源： https : //nextjs.org/docs/api-reference/data-fetching/getInitialProps

Answer 4

使用getInitialProps動機：

所有這些答案都是正確的，但我想補充一點， NextJS服務器端渲染。 這意味着如果您想在向用戶顯示某些內容之前獲取數據，則不能使用componentDidMount （因為這是在渲染之后發生的）。

所以你需要使用getInitialProps因為它首先被執行，然后 NextJS 渲染頁面。 然后 NextJS 將生成的組件的 HTML 發送到瀏覽器。

Answer 5

“getIntialProps”通常用於從服務器獲取數據。 它在服務器和客戶端都運行，但有一個基本區別，即：要使其在客戶端工作，必須從“router.push(/routename)”或下一個 js 'Link' 組件命中路由。

所有這些數據都可以從 props 返回到組件中。

注意： “getIntialProps”無權訪問應用程序道具。

Answer 6

當您希望您的頁面在服務器端而不是客戶端請求數據時使用getInitialProps ，它允許利用 SEO。

Answer 7

我會盡力解釋這個問題：

首先你必須問自己什么是服務器端渲染，為什么我們需要服務器端渲染？

React 中的服務器端渲染意味着數據是從服務器而不是客戶端渲染的，重要的是要注意 ReactJs（不是 NextJS）總是在瀏覽器而不是服務器中渲染任何東西。

因此，當用戶在瀏覽器地址欄中填寫地址時，來自瀏覽器的請求被發送到服務器，並且信息在 React 中的服務器到客戶端之間傳遞（而不是下一個）只是一堆 javascript 和一個 div 標簽（寬度 id="app" 最時間），這是 SEO 的問題。

因為沒有太多信息可供搜索引擎爬蟲 (Google) 解析（它會問自己，真的嗎？一個帶有一堆 JS 的單格 div 標簽？真的？這到底是什么東西？？naaahh 我厭倦了這個，我會的去索引另一個頁面，下次離開這個頁面......等等），搜索引擎感覺難以理解該網站的內容，這意味着它沒有針對搜索引擎進行優化（記住 SEO = 搜索引擎優化）。

所以這就是為什么我們需要渲染來自服務器的數據，以便搜索引擎爬蟲可以放心地解析站點的信息。

為了在 NextJs 中渲染來自服務器的數據，我們需要從 getIntitialProps 傳遞道具。 這個 getIntitialProps 是我們將從服務器端呈現數據（例如，一升產品、產品名稱、價格...）的地方。