服務器端和客戶端呈現有什麼區別？

Question

這個問題有很多圍繞Web討論它的文章，但是鑑於我對web dev的近期工作狀況，我認爲我錯過了幾件作品以獲得完整的圖片。

我的理解如下：

讓我們假設我們有一個Node.js的服務器和我們使用快遞爲我們的Web應用程序。客戶端呈現是當我沒有在Web瀏覽器中輸入一個URL來創建一個HTTP請求到我的服務器。相反，客戶端請求來自JS腳本（當我使用根路由訪問應用程序時，最初從服務器加載），例如：http://localhost:SOME_PORT/）。因此，假設我的請求是從數據庫中獲取某個用戶的某些信息。例如，JS腳本（使用AJAX）直接對數據庫執行XMLHTTPRequest（比如我通過一個名爲Fetch的按鈕來觸發此腳本），而不是通過服務器，然後客戶端（瀏覽器）將獲得一個響應，並反過來將創建一個HTML文檔並呈現它。與服務器端呈現相反，例如我在瀏覽器中輸入URL，服務器攔截請求，並準備HTML文檔以及請求的數據（如果有），並以瀏覽器的HTML形式發回渲染（因此，服務器端，沒有工作在客戶端完成，但實際顯示頁面）。

這是準確的嗎？我對兩者的理解以及何時使用任何一種風格都缺少什麼？

Answer 1

讓我們假設我們有一個Node.js服務器，我們正在爲我們的Web應用程序使用express。

在服務器上使用什麼軟件並不重要，但我們將使用它作爲示例。

客戶端呈現是當我沒有在創建HTTP請求到我的服務器的Web瀏覽器中輸入URL時。相反，客戶端請求來自JS腳本（當我使用根路由訪問應用程序時，最初從服務器加載），例如：http://localhost:SOME_PORT/）。

這將加載一個HTML文件，其中加載了一個腳本元素的JS。你不會直接加載腳本。

因此，假設我的請求是從數據庫中獲取有關某個用戶的某些信息。例如，JS腳本（使用AJAX）直接向數據庫執行XMLHTTP請求，而不是通過服務器執行XMLHTTP請求。

否。您仍然向HTTP服務器發出HTTP請求。

（說我觸發這個按鈕稱爲Fetch）而不是通過我的服務器，然後客戶端（瀏覽器）將得到一個響應，反過來將創建一個HTML文檔並呈現它。

Ish。

客戶端已經有一個HTML文檔。通過客戶端渲染，從該文檔生成的DOM被修改（通常是從服務器請求的新數據）。

由於相對於服務器端渲染，我在那裏例如在瀏覽器中輸入一個URL

爲了保持儘可能接近客戶端呈現例如儘可能的情況下，假設你點擊一個鏈接，而不是輸入一個URL。

，並且服務器攔截請求，

請求被明確地向服務器發出，它不攔截。這意味着它是針對其他地方的。

準備好HTML文檔以及請求的數據（如果有的話），並以HTML形式發回給瀏覽器進行渲染（因此服務器端沒有在客戶端完成工作，但實際顯示這一頁）。

基本上。

---

簡短的版本是：

使用服務器端渲染，一個完整的HTML文件在服務器上準備並交付給瀏覽器。

通過客戶端渲染，在客戶端上操作DOM以生成相同的文檔。