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

03-12

服務端每次是重新發送html頁面去客戶端嗎？html的數據會不會大量重複，不用服務端渲染，客戶端來渲染一個或者其他組件的時間會快一些呢

nodejs 是一個運行 js 的環境，它有 io 的模塊可以訪問本地的文件，有 http 模塊可以處理請求。但是服務端渲染讀模板，綁數據，到返回 html 都需要你自己去實現。

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

為什麼這麼做，因為百度的爬蟲太弱了只能爬靜態網頁裡面的內容。

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

NodeJS 是 runtime，也就是 JavaScript 的運行環境。NodeJS 可以做服務端渲染，也可以做別的，比如提供 API，或者做 API gateway，或者做代理伺服器…… 基本上服務端能做的都可以用 NodeJS 實現（不討論性能和多線程的話）

next.js和nuxt.js的運用是什麼呢？它們的區別是什麼？

那麼如果想做服務端渲染，最快的就是用一個框架。那麼在這個時候，如果你的項目是基於 ReactJS 的，就用 NextJS；如果是基於 VueJS 的，就用 NuxtJS；如果是基於 Angular 的…… 他們自己有。如果不用 NextJS 和 NuxtJS 可以嗎？技術上是沒問題的，自己寫一個渲染引擎就可以；只不過從項目的角度上說沒必要，用現成的更好更方便。不過 NextJS 也好，NuxtJS 也好，他們必須在 NodeJS 的環境里才能運行，因為他們都是 JavaScript 寫的，需要一個 JS Runtime。

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

並不是，最典型的 SPA (單頁應用) 的例子就是，只有首屏是 HTML，因為我們需要一個 HTML 去包含 JavaScript。而這個 HTML 可以簡單到只有

& &


&

&

&

  &

  &分享&

&

&

  &

    &&
    &&
  &
  &

    var titleEle = document.getElementById(title);

    var contentEle = document.getElementById(content);

    titleEle.innerText = 我是分享標題;

    contentEle.innerHTML = [

      &,

        我是分享內容。,

      &,

    ].join();

  &

&

&
看似沒什麼問題吧，瀏覽器也能正常解析，內容也能正常顯示。
但是爬蟲(以下爬蟲都指搜索引擎爬蟲)碰到這個頁面就不是這麼友好了，在爬蟲眼裡可能就完全忽視了script標籤里的內容。
也許爬蟲很智能，會把簡單腳本執行一遍後再看整個文檔的內容再做分析，但如果文章內容是非同步請求的，那沒有特殊情況，爬蟲是絕對不會等你請求完文章等一系列操作後再分析頁面結構。
因為爬蟲壓根不知道頁面什麼時候渲染好，即便是window.onload也只是說明資源都載入完畢了而已。

以上其實是一個簡單的背景，現在的vue、react等前端框架也是因為上述與其他一些原因才需要SSR(服務端渲染)。
無論是使用帶compiler的vue版本直接在瀏覽器里運行，還是利用vue-loader將模版全部編譯成render函數，都存在這個問題。
題主可以用vue-cli建一個簡單的項目，隨便寫幾個組件展示在頁面上，然後編譯結果。
編譯完可以觀察結果的html文件，會發現這個html除了放vue根組件的掛載元素(通常是id為app的一個div)，剩下的就是引入資源，當然如果你修改過模版html，那修改的內容也會帶過來。
那樣結果就很明顯了，寫的那幾個組件，都是通過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寫的照片分類去重軟體算哪門子分類嘞？幫忙解答下唄。
還有node.js寫的遊戲伺服器也算服務端渲染？

其實「伺服器渲染」這個說法有一定誤導性。我覺得用「同構渲染」更具有精確描述。其實ssr,ssg就是一種同構渲染方式。

服務端渲染只是類似java jsonp和 asp .net那套服務端返回html的渲染方案，nuxt.js和next.js就是做類似這種事情，只是一個基於vue 一個基於react，node.js web api ，文件操作node.js 做不了嘛，建議先多了解下.

 
  推薦閱讀：


TAG:Nodejs | Nuxtjs | 服務端渲染 |