查看源代碼以確認 Next.js 中的服務器端渲染是否正常工作

如何檢查你的 Next.js 應用程序的服務器端渲染是否正常工作

你已經設置好你的新的 Next.js 應用程序了嗎？太棒了！

現在讓我們檢查應用程序是否按照我們的期望工作。因為這是一個 Next.js 應用程序，所以應該是服務器端渲染的。

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

這有三個主要的優點：

• 客戶端不需要實例化 React 進行渲染，這使得網站對用戶更加快速。
• 搜索引擎可以在不運行客戶端 JavaScript 的情況下索引頁面。 Google 已經開始這樣做，但公開承認這是一個較慢的過程（如果你想排名靠前，應該盡量幫助 Google）。
• 你可以使用社交媒體元標籤，用於添加預覽圖片，自定義 Facebook、Twitter 等平台上分享的頁面的標題和描述。

讓我們查看應用程序的源代碼。
在 Chrome 中，你可以在頁面中的任何位置右鍵點擊，然後點擊查看頁面源代碼。

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

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

React應用程序將在客戶端上啟動，並且將驅動像點擊鏈接之類的交互的部分進行客戶端渲染。但是重新加載頁面將重新從服務器加載它。使用 Next.js，在瀏覽器內部不應該有任何不同的結果 - 服務器端渲染的頁面應該看起來完全像客戶端渲染的頁面一樣。