查看源代碼以確認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手冊


接下來的更多教程: