node js不就是服務端渲染嗎?next js和nuxt js的運用是什麼呢?它們的區別是什麼?

時間 2021-05-10 20:40:15

1樓:召伯樹

nodejs 是乙個執行 js 的環境,它有 io 的模組可以訪問本地的檔案,有 http 模組可以處理請求。但是服務端渲染讀模板,綁資料,到返回 html 都需要你自己去實現。

以前的服務端渲染的方式是每次資料更新的時候重新整理頁面重新傳送 html 去客戶端更新資料,nuxt.js 並不是,與其說是服務端渲染更應該叫前後端同構渲染,只有第一次訪問的時候是服務端渲染的方式,之後的資料更新還是 ajax 請求。

2樓:然冬

首先要理解next.js或者nuxt.js使用場景下所謂的服務端渲染的含義以及想要解決的問題。

假設以下場景,題主自己寫了一篇技術分享文章放在自己的伺服器上。

在訪問這個頁面的時候,瀏覽器從伺服器拿到的HTML是這樣的:

lang

="en"

>

>

charset

="UTF-8"

>

>分享title

>head

>

>

="title"

>div>

="content"

>div>

div>

>vartitleEle

=document

.getElementById

('title'

);var

contentEle

=document

.getElementById

('content'

);titleEle

.innerText

='我是分享標題'

;contentEle

.innerHTML=[

'','我是分享內容。','

',].join(''

);script

>body

>html

>看似沒什麼問題吧,瀏覽器也能正常解析,內容也能正常顯示。

但是爬蟲(以下爬蟲都指搜尋引擎爬蟲)碰到這個頁面就不是這麼友好了,在爬蟲眼裡可能就完全忽視了script標籤裡的內容。

也許爬蟲很智慧型,會把簡單指令碼執行一遍後再看整個文件的內容再做分析,但如果文章內容是非同步請求的,那沒有特殊情況,爬蟲是絕對不會等你請求完文章等一系列操作後再分析頁面結構。

因為爬蟲壓根不知道頁面什麼時候渲染好,即便是window.onload也只是說明資源都載入完畢了而已。

以上其實是乙個簡單的背景,現在的vue、react等前端框架也是因為上述與其他一些原因才需要SSR(服務端渲染)。

無論是使用帶compiler的vue版本直接在瀏覽器裡執行,還是利用vue-loader將模版全部編譯成render函式,都存在這個問題。

題主可以用vue-cli建乙個簡單的專案,隨便寫幾個元件展示在頁面上,然後編譯結果。

那樣結果就很明顯了,寫的那幾個元件,都是通過js渲染到頁面上的。

假如說和上述情形一樣,題主寫的是乙個技術分享文章,文章內容通過非同步請求獲取,那不通過其他手段,搜尋引擎爬八十年可能都不會收錄這篇文章,因為對爬蟲而言,這個 html是空的,沒有有用的資訊。

背景基本理清楚了,回歸題主的問題。

node.js不就是服務端渲染嗎?

現在常說的服務端渲染,是由服務端提供首屏內容的html,這樣對搜尋引擎更友好,首屏渲染也更快。

因為瀏覽器拿到後可以直接解析首屏的html,而不用等js資源載入完後再做一系列的動作。

扯遠了,猜測題主理解的服務端渲染應該是由服務端輸出了html,那就是服務端渲染。

next.js和nuxt.js的運用是什麼呢?

我覺得他們官方文件解釋的可能比我說的會清楚一些。

Next.js: Next.js 是乙個輕量級的 React 服務端渲染應用框架。

Nuxt.js: Nuxt.js 預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置。

他們都是乙個框架,預先幫你做好了服務端渲染需要做的事情。

使用這兩個框架開發後編譯出的內容,通過node.js執行,訪問的時候會將首屏的html內容在服務端生成後再返回。

它們的區別是什麼?

區別已經很清楚了,乙個是給React開發者用的,乙個是給Vue開發者用的,或者說是針對各自框架產生的。

服務端每次是重新傳送html頁面去客戶端嗎?

這個可以脫離開框架來講,通常不做ssr,大多數情況下這些前端資源都會作為靜態資源存在,直接丟到cdn。

但是如果要做ssr,那每次訪問都是由服務端來生成html了,所以沒有快取等輔助機制,那服務端每次都要重新生成html後傳送給客戶端。

html的資料會不會大量重複,不用服務端渲染,客戶端來渲染乙個或者其他元件的時間會快一些呢

這個得看具體場景了,通過上面這些問題,這個問題題主自己應該可以理解了,大部分情況下我們是不需要做服務端渲染的。部分場景還可以使用預渲染,這個題主可以去了解一下。

以上內容供參考

為什麼要做node js服務端渲染?

我是老尚 這其實是乙個工作場景不斷 前移 的過程。最早期的頁面只是html css,後來內容都是直接套在php jsp裡的。但這樣速度很慢,並且在架構上存在緊耦合。後來把頁面的渲染生成放在js裡,前端只要獲得Json資料,就可以動態的更新頁面,這就是ajax。這時前端頁面的更新 響應速度有了極快的提...

為什麼現在又流行服務端渲染html?

以下只為個人看法 描述之前先鋪墊幾個概念 TTFB 首位元組到達時間,是頁面載入效能比較重要指標,對於使用者感知不大,主要針對研發人員,表示網路後端的整體響應時長。FP 首次螢幕繪製。FCP 首次內容繪製,對應使用者是有感知的,可算可以看到點東西。TTI 可互動時間。從服務端生成html 如serv...

基於react或vue的服務端渲染和傳統的服務端渲染(如PHP)的優劣?

狼族小狽 有個簡單的辦法,單獨提供乙個Node SSR 服務,由PHP呼叫這個服務進行 SSR 渲染。這樣不就和傳統的後端渲染一樣了?了解一下 Genesis 劉冰 我是個容易糾結的人,所以直接告訴自己 沒優點,不用糾結。VUE是漸進式增強框架,有那麼多顧慮就不要用SPA,直接傳統方式引入vue,也...