首先從概念上區分，服務器渲染（Server-side Rendering，簡稱 SSR）和客戶端渲染（Client-side Rendering，簡稱 CSR）主要的區別在于頁面的渲染地點不同：
-
服務器渲染，即 SSR，是在服務器端將數據和模板進行組裝，渲染成最終的HTML頁面，然后返回給客戶端的瀏覽器，實際上用戶第一次打開頁面時看到的就是最終渲染的結果。
-
客戶端渲染，即 CSR，初始時服務器返回一個基本的HTML框架和JavaScript文件，數據是通過AJAX或Fetch等技術請求獲得的，然后在客戶端進行頁面的渲染。
他們各自有其優點和缺點：
-
SSR 的優點主要體現在：
- SEO 友好。對于服務器渲染的頁面，搜索引擎可以直接抓取到渲染后的頁面，有利于搜索引擎優化。
- 首屏加載快。用戶可以更快地看到首屏的內容，對于用戶體驗非常好。
SSR 的缺點：
- 服務器壓力大。因為渲染操作在服務器端進行，服務器需要處理大量的渲染操作，消耗的資源會比客戶端渲染要大。
- 后續的操作可能需要額外的AJAX請求。
-
CSR 的優點：
- 用戶交互體驗好。一旦頁面加載完成，用戶操作可以立即看到反饋，不用像SSR一樣每次都需請求服務器。
- 服務器壓力小。服務器只需要負責返回JSON數據，HTML渲染工作由客戶端完成。
CSR 的缺點：
- 不利于SEO。因為初始的HTML頁面幾乎沒有內容，搜索引擎無法有效地分析頁面信息。
- 首屏加載時間可能較長。受網絡情況和設備性能的影響，客戶端渲染頁面的首屏渲染時間可能會較長。
????????Next.js 和 Nuxt.js 等框架提供了一種稱為同構渲染（Universal Rendering）或預渲染（Prerendering）的模式，這種模式結合了SSR和CSR兩種渲染方式，兼顧了他們的優點。
????????Next.js 是React的服務端渲染框架，Nuxt.js 是Vue的服務端渲染框架。他們首次渲染在服務器端完成（SSR），能夠使用戶快速看到頁面內容，有利于SEO。之后的頁面交互和切換則在客戶端完成（CSR），提高了頁面響應速度和用戶體驗，減少了服務器壓力。
1、服務器渲染（SSR）
????????在以下的服務器渲染的示例中，服務器會將數據 "Hello, World!" 嵌入到 HTML 中，并將其發送到客戶端。
const express = require('express');
const app = express();app.get('/', (req, res) => {const response = `<html><body><h1>Hello, World!</h1></body></html>`;res.send(response);
});app.listen(3000, () => console.log('Server is running on port 3000'));
2、客戶端渲染（CSR）
????????在以下的客戶端渲染的示例中，實際上服務器僅僅發送了一個空白的 HTML 頁面和一個 JavaScript 文件。這個 JavaScript 文件會在客戶端運行，獲取數據，并更新 HTML。
服務器端代碼：
const express = require('express');
const app = express();app.get('/', (req, res) => {const response = `<html><body><div id="app"></div><script src="/script.js"></script></body></html>`;res.send(response);
});app.get('/script.js', (req, res) => {const script = `window.onload = function() {document.getElementById('app').innerHTML = '<h1>Hello, World!</h1>';};`;res.send(script);
});app.listen(3000, () => console.log('Server is running on port 3000'));
塊存儲簡單對接k8s(上集))
