如何檢查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手冊
接下來的更多教程:
- Next.js入門
- Next.js vs Gatsby vs create-react-app
- 如何安裝Next.js
- 使用鏈接在Next.js中鏈接兩個頁面
- 路由器中Next.js中的動態內容
- 使用getInitialProps將數據饋送到Next.js組件
- 使用CSS樣式化Next.js組件
- 在Next.js中預取內容
- 使用路由器檢測Next.js中的活動鏈接
- 查看源代碼以確認SSR在Next.js中正常工作
- Next.js:使用自定義標籤填充head標籤
- 立即部署Next.js應用程序
- Next.js:僅在Next.js的服務器端或客戶端運行代碼
- 在生產中部署Next.js應用
- 如何分析Next.js應用程序捆綁包
- Next.js中的延遲加載模塊
- 向您的Next.js應用添加包裝器組件
- Next.js添加到您的應用程序中的圖標
- Next.js應用程序捆綁包
- 如何使用Next.js路由器
- 如何使用Next.js API路由
- 如何在Next.js應用中在服務器端獲取Cookie
- 如何更改Next.js應用程序端口