CSR、SSR与ISR的奇妙之旅

网页渲染三剑客：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);