推荐阅读
- 先巩固 HTML/CSS/JS 与组件化基础
- 再看状态管理、路由与构建工具
- 最后看性能优化与体验提升
CSR vs SSR：取舍、性能指标与落地路径
副标题 / 摘要 CSR 与 SSR 的选择不是二选一，而是围绕性能、SEO、复杂度的权衡。本文给出可操作的决策路径与示例。 目标读者 负责前端架构选型的工程师 需要改善首屏体验与 SEO 的团队 希望理解 TTFB/TTI 的开发者 背景 / 动机 CSR（客户端渲染）强调前端灵活与交互性，SSR（服务端渲染）强调首屏体验与 SEO。 很多项目因为选型不当，出现首屏慢、SEO 差或部署复杂度过高的问题。 核心概念 TTFB：首字节时间，越小越好 TTI：可交互时间 Hydration：SSR 之后在客户端接管交互 SEO：搜索引擎对 HTML 内容的可见性 实践指南 / 步骤 先看内容属性：是否依赖 SEO、是否内容密集 评估交互复杂度：高度交互通常偏向 CSR 或 SSR+Hydration 关注性能指标：TTFB、FCP、TTI、CLS 考虑部署成本：SSR 需要服务器渲染能力 混合策略：关键页 SSR，其余 CSR 或 SSG 可运行示例 下面用一个最小 Python 服务演示 SSR 和 CSR 的差异： from http.server import BaseHTTPRequestHandler, HTTPServer import json import time class Handler(BaseHTTPRequestHandler): def do_GET(self): if self.path == "/ssr": html = f"<h1>SSR time: {time.time()}</h1>" self.send_response(200) self.send_header("Content-Type", "text/html") self.end_headers() self.wfile.write(html.encode()) elif self.path == "/csr": html = """ <div id='root'>Loading...</div> <script> fetch('/api/time').then(r => r.json()).then(d => { document.getElementById('root').innerText = 'CSR time: ' + d.time; }); </script> """ self.send_response(200) self.send_header("Content-Type", "text/html") self.end_headers() self.wfile.write(html.encode()) elif self.path == "/api/time": body = json.dumps({"time": time.time()}).encode() self.send_response(200) self.send_header("Content-Type", "application/json") self.end_headers() self.wfile.write(body) else: self.send_response(404) self.end_headers() if __name__ == "__main__": HTTPServer(("127.0.0.1", 8000), Handler).serve_forever() 启动后访问： ...