网页渲染三剑客：CSR、SSR与ISR的奇妙之旅
三种渲染方式的核心本质
CSR(客户端渲染)让浏览器成为"厨师"，SSR(服务器端渲染)让服务器担任"厨师"，而ISR(增量静态再生)则是一位兼具"提前备餐"和"即时烹饪"能力的"超级厨师"。
🍳 生活类比：想象你去餐厅点餐…
CSR: 现场烹饪模式
CSR是由客户端（浏览器）负责渲染页面内容的技术，服务器只提供数据，浏览器获取数据后动态生成HTML并更新DOM。
🔄 流程图:
用户访问网站
↓
浏览器请求页面
↓
服务器返回"空壳"HTML和JS脚本
↓
浏览器加载JS
↓
JS向API请求数据
↓
API返回JSON数据
↓
JS使用数据渲染页面
↓
用户看到完整页面
🍽️ 餐厅类比：就像去一家"食材自选+现场烹饪"的餐厅
- 你到店后先拿到一个空盘子(基础HTML)和烹饪工具(JavaScript)
- 服务员只负责送来原材料(JSON数据)
- 你需要在桌边自己完成烹饪过程(浏览器渲染)
- 优点：可以随时调整菜品口味(交互性强)
- 缺点：从入座到开吃有段等待时间(首屏加载慢)
// React CSR示例
function App() {
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
// 浏览器中请求数据
fetch('/api/products')
.then(res => res.json())
.then(data => {
setProducts(data);
