从用户点击到页面呈现，每一层在做什么，为什么需要它
从左到右：用户 → 网络层 → 应用层 → 数据层
用户打开 tp-link.com/us/products/deco-x50，背后发生了什么
| 页面 | 策略 | 原因 |
|---|---|---|
| 首页 | ISR（60s） | 需要展示最新促销，但不需要秒级实时 |
| 产品介绍页 | SSG | 营销内容不频繁变，追求最快速度 |
| 产品详情页 | ISR（30s） | 价格库存需要更新 |
| 搜索结果 | CSR | 完全由用户输入决定，无法预生成 |
| 购物车 | CSR | 每个用户不同 |
| 结账页 | SSR | 需要实时验证库存和价格 |
| 用户账户 | SSR | 个人信息，需认证 |
理解这个区分是理解现代网站架构的关键
什么时候发生：代码推送后，CI/CD 触发构建
什么时候发生：用户打开浏览器访问网站
每种数据有自己的家，Next.js 只是搬运工
| 数据类型 | 存在哪里 | 谁写入 | 谁读取 | 更新频率 |
|---|---|---|---|---|
| 品牌内容 Banner、活动页、品牌故事 |
Headless CMS | 内容运营团队 | Next.js（构建时/ISR） | 每周数次 |
| 产品营销素材 卖点图文、规格、对比 |
Headless CMS | 产品营销团队 | Next.js（构建时/ISR） | 产品发布时 |
| 商品数据 SKU、价格、库存、变体 |
Shopify | 电商运营团队 | Next.js（ISR + 客户端） | 每天/实时 |
| 购物车 / 订单 加购、结账、支付 |
Shopify | 用户操作 | 浏览器 JS → Shopify API | 实时 |
| 用户账户 登录、订单历史、地址 |
Shopify | 用户 | Next.js（SSR，需认证） | 实时 |
| 搜索索引 产品搜索、筛选 |
Algolia | Shopify → 自动同步 | 浏览器 JS → Algolia API | 准实时 |
| 用户行为 浏览、点击、转化 |
GA / Segment | 浏览器 JS 自动采集 | 数据分析团队 | 实时 |
从工程师写代码到全球用户访问
Content Delivery Network，内容分发网络。
把你的网站文件复制到全球几百个节点。用户访问时，从最近的节点返回。
类比：你的网站在全球每个城市都有一个分店，用户不需要飞到总部取货。
主流选择：Vercel Edge Network、Cloudflare、AWS CloudFront（你们现在用的）
| 本地开发 | 工程师电脑上，改了代码秒看效果 |
| 预览环境 | 每个 PR 自动生成一个临时网址，PM 和设计师可以直接看效果、提反馈 |
| Staging | 和生产环境一样的配置，上线前最后验证 |
| 生产环境 | tp-link.com/us，真实用户访问 |
一个新功能从构思到用户面前的全过程
每一层的职责、主流选择、和 TP-Link 推荐
| 层级 | 职责 | 主流选择 | TP-Link 推荐 |
|---|---|---|---|
| 前端框架 | 页面渲染、路由、状态管理 | Next.js / Nuxt / Remix / Gatsby | Next.js |
| UI 组件库 | 按钮、弹窗、表单等基础组件 | shadcn/ui / Radix / Ant Design | shadcn/ui（高度可定制） |
| CSS 方案 | 页面样式 | Tailwind / CSS Modules / styled-components | Tailwind CSS |
| Headless CMS | 品牌内容管理 | Contentful / Sanity / Strapi / Hygraph | Contentful 或 Sanity |
| 电商后端 | 商品、库存、购物车、结账 | Shopify / BigCommerce / Medusa | Shopify Plus（Headless） |
| 搜索 | 站内搜索、筛选、自动补全 | Algolia / Typesense / MeiliSearch | Algolia |
| 部署平台 | 构建、CDN、Serverless | Vercel / Netlify / AWS Amplify | Vercel（Next.js 亲儿子） |
| 域名 / DNS | 域名管理、SSL | Cloudflare / Route53 / Vercel DNS | Cloudflare（兼做 DDoS 防护） |
| 监控 | 错误追踪、性能监控 | Sentry / Datadog / Vercel Analytics | Sentry + Vercel Analytics |
| Analytics | 用户行为追踪 | GA4 / Segment / Mixpanel | GA4 + Segment |
网站不是发布了就完事，需要持续运营和保护
| HTTPS | 所有通信加密，无例外。Vercel/Cloudflare 自动管理证书。 |
| DDoS 防护 | Cloudflare 自动拦截恶意流量，不需要你做任何事。 |
| WAF | Web Application Firewall，过滤 SQL 注入、XSS 等攻击。 |
| CSP | Content Security Policy，控制页面能加载哪些外部资源，防止恶意脚本注入。 |
| 认证 | 用户登录走 Shopify 或第三方（Auth0），不自己存密码。 |
| 密钥管理 | API 密钥存在环境变量里，不进代码仓库。 |
| 错误追踪 Sentry |
页面报错时自动收集错误信息、用户环境、调用栈，通知工程师。 |
| 性能监控 Vercel Analytics |
追踪 Core Web Vitals（LCP、FID、CLS），确保用户体验达标。 |
| 可用性监控 Uptime Robot / Checkly |
每分钟检测网站是否可访问，宕机立即告警。 |
| 业务监控 GA4 + Shopify Analytics |
转化率、跳出率、购物车弃单率 —— PM 最关心的指标。 |
把前面所有内容落到你的项目上