在 NextJS 中獲取客戶端和服務器端的數據

Question

我需要在 NextJS 項目中的某些組件中使用第三方 API 獲取數據

我希望服務器使用該 API 為 SEO 預渲染組件。 但在那之后，當用戶與應用程序交互時，組件 props 應該在客戶端獲取。

我可以通過使用 NextJS getInitialProps方法來實現這種行為。 但在 NextJS 官方文檔中，建議使用getStaticProps或getServerSideProps 。

我想知道推薦的方法是什么。

Answer 1

當我們使用getServerSideProps而不是getInitialProps時，包的大小更小，因為 getServerSideProps 在服務器上而不是在瀏覽器上執行代碼。

在此處閱讀有關這兩者之間差異的更多信息。

Answer 2

Next.js 文檔說：

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

這些新的數據獲取方法允許您在靜態生成和服務器端渲染之間進行精細的選擇。 了解有關頁面和數據獲取文檔的更多信息。

如果出現以下情況，您應該使用 getStaticProps：

• 呈現頁面所需的數據在用戶請求之前的構建時間可用。
• 數據來自無頭 CMS。
• 數據可以公開緩存（不是特定於用戶的）。
• 該頁面必須預渲染（用於 SEO）並且速度非常快 — getStaticProps 生成 HTML 和 JSON 文件，這兩個文件都可以由 CDN 緩存以提高性能。

我應該什么時候使用 getServerSideProps？ 僅當您需要預呈現其數據必須在請求時獲取的頁面時，才應使用 getServerSideProps。 到第一個字節的時間（TTFB）將比 getStaticProps 慢，因為服務器必須對每個請求計算結果，並且結果不能在沒有額外配置的情況下被 CDN 緩存。

如果您不需要預渲染數據，那么您應該考慮在客戶端獲取數據。 單擊此處了解更多信息。

Answer 3

如果您已經知道您的網站將包含多少頁面，那么使用靜態站點生成，即使用getStaticProps 。 這將在構建期間預先生成所有頁面。

示例內容主要是靜態的投資組合網站。

注意：- 使用 getStaticProps 不會反映對您網站所做的任何更改，您需要重新部署才能查看更改。

因此，如果您的投資組合還包含一個博客，那么getStaticProps將不是一個理想的解決方案，相反您可以通過在getStaticProps函數中添加一個重新驗證鍵來使用增量靜態再生，這意味着最多每 X 在每個請求上重新生成頁面-秒。

現在，如果您需要為每個請求預渲染，或者您需要訪問請求對象（例如設置 cookie），那么服務器端渲染是一個選項，使用getServerSideProps函數。 getServerSideProps 僅在服務器上運行，而不是在構建過程中運行

對於客戶端數據獲取，您可以使用 NEXT JS 提供的 useEffect 鈎子或swr鈎子。

所以在你的情況下，

對於服務器端數據獲取，您可以使用函數getServerSideProps並且它們返回的道具可以在您的useState鈎子中使用以將其設置為您的初始狀態。

然后對於客戶端數據獲取，您可以使用 Next JS 團隊提供的useEffect鈎子或swr鈎子來實現。