如何檢查你的 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,在瀏覽器內部不應該有任何不同的結果 - 服務器端渲染的頁面應該看起來完全像客戶端渲染的頁面一樣。