查看源代碼以確認SSR在Next.js中正常工作

如何檢查SSR在您的Next.js應用程序中是否正常運行

您是否已設置新的Next.js應用程序？偉大的！

現在讓我們檢查應用程序是否正常運行，正如我們期望的那樣。這是一個Next.js應用，因此應該服務器端渲染。

這是Next.js的主要賣點之一：如果我們使用Next.js創建一個網站，則該網站頁面將呈現在服務器上，該服務器會將HTML傳遞給瀏覽器。

這具有3個主要優點：

客戶端不需要實例化React來渲染，這使得網站對您的用戶更快。
搜索引擎將為頁面編制索引，而無需運行客戶端JavaScript。 Google開始做的事情，但公開承認這是一個緩慢的過程（如果您想獲得良好的排名，則應該盡可能地幫助Google。
您可以擁有社交媒體元標記，可用於添加預覽圖像，自定義在Facebook，Twitter等上共享的任何頁面的標題和描述。

讓我們查看應用程序的源代碼。使用Chrome瀏覽器，您可以右鍵單擊頁面中的任意位置，然後按查看頁面源代碼。

如果您查看頁面的源代碼，則會看到<div><h1>Airbnb clone</h1></div>HTML中的代碼段body，以及一堆JavaScript文件-該應用程序捆綁在一起。

我們不需要進行任何設置，SSR（服務器端渲染）已經在為我們工作。

React應用程序將在客戶端上啟動，並且將成為使用客戶端渲染推動交互（例如單擊鏈接）的一種方式。但是重新加載頁面會從服務器重新加載頁面。使用Next.js，瀏覽器內部的結果應該沒有差異-服務器呈現的頁面應該看起來完全像客戶端呈現的頁面。

免費下載我的Next.js手冊