在 NextJS SSR 過程中何時以及如何調用 React 生命周期方法？

Question

這是一個簡單的問題，幾乎可以肯定在某個地方的 NextJS 文檔中得到了回答，但是經過查找（以及谷歌搜索有關它的一些文章）后，我找不到它。

據我了解，NextJS 是這樣工作的：

• 如果您從“外部” URL 到達您的應用程序，即不是通過Link ，則該頁面是 SSR 的，並且 NextJS 將 HTML 與 JS（NextJS 框架、React 等）的組合發送到瀏覽器。 這個 HTML 是通過 React 在服務器上生成的。

• 在 SSR 期間，在服務器上調用getInitialProps並且（我假設）通過props將初始數據向下傳遞到 SSR 進程

• 然后調用 React 生命周期方法（ componentDidMount / useEffect ）。 應用程序仍然可以通過props訪問初始數據。 據我了解，這些生命周期方法是在客戶端調用的——這就是我的console.log告訴我的——因此你可以保證訪問諸如localStorage東西。

• 但這是否意味着在原始SSR之后在客戶端有第二次渲染，即原始交付的HTML被SPA替換？

• 或者是否保留了原始 SSR 內容，但 NextJS 以某種方式“直接”調用了 React 生命周期方法？

部分問題是我對 React 內部如何工作一無所知——繪制屏幕和生命周期方法之間有什么關系。

我試圖了解 NextJS 是如何工作的——流程到底是什么，NextJS 的 SSR 和 React 如何協同工作，以及在何時何地發生了什么。

非常感謝任何幫助！

Answer 1

但這是否意味着在原始SSR之后在客戶端有第二次渲染，即原始交付的HTML被SPA替換？

您所描述的是所謂的“補液”過程。 接下來將返回服務器端內容，然后通過效果（例如useEffect ）或客戶端數據獲取（例如SWR ）在客戶端重新水合。

我建議您觀看此視頻，以獲得 Next.js 的首席維護者 Tim 的更詳細解釋。