Electron 自带 Chromium，每个 App 都要打包一份浏览器（~100MB+）。Tauri 用操作系统自带的 WebView（macOS WKWebView / Windows WebView2），后端是 Rust 编译出的小二进制，所以包体只有几 MB。代价是不同系统 WebView 版本不一，要测兼容性。

前端代码最终会发到用户浏览器，按 F12 全可见。任何人都能拿走你的 Key 去刷你的账单。正确做法是：Key 放后端环境变量，前端只调自己后端的 /api/chat，后端再转发给 OpenAI，并加鉴权和速率限制。

Next.js App Router 默认所有组件是 Server Components，在服务端跑，能直接查数据库、不下发到浏览器。只要用了 useState / useEffect / 事件监听 / 浏览器 API（window/document），就必须在文件顶部加 "use client" 标记成客户端组件。

LCP 最大内容绘制 < 2.5 秒；INP 交互到下次绘制 < 200 毫秒；CLS 累积布局偏移 < 0.1。Google 用这三个衡量用户体验，直接影响 SEO 排名。

XSS：攻击者在页面注入恶意脚本。React 默认转义 + 加 CSP + Cookie HttpOnly 可防。CSRF：攻击者借用户登录态偷发请求。用 CSRF Token + Cookie SameSite=Lax/Strict 可防。

先测量别急着改。Performance 面板录一次滚动看长任务在哪。多半是 1000 行 DOM 节点每次滚动都重排——上虚拟列表（@tanstack/react-virtual）只渲染可视区；列表项用 React.memo 包；动画走 transform；事件监听节流。若数据本身是从后端拉的大列表，考虑后端分页/虚拟滚动配合。

文章正文放服务端组件（async/await 查库，直接出 HTML，SEO 好、零 JS）；评论区是交互的，单独做一个客户端组件（"use client"）嵌在服务端组件里。列表页 SSG/ISR 静态生成 + revalidate；Server Actions 处理提交评论，写完 revalidatePath 刷新。评论鉴权在服务端组件/cookies() 里判断，别在客户端藏。

在意包体选 Tauri（3-10MB vs 100MB+），但团队要学一点 Rust 写命令、配 capabilities 权限。纯 JS 团队、要最大 Chromium 兼容性和成熟生态选 Electron，但守好 contextIsolation/nodeIntegration/sandbox 三条安全线。这个场景"在意包体"权重最高，先 Tauri；Rust 学习成本用命令封装 + 官方插件生态摊薄。

3 秒是在等模型一次性返回完整答案。改成流式：后端用 streamText 走 SSE，前端读 ReadableStream 逐 token 拼到当前消息，首字几百毫秒就出来，体感从"卡 3 秒"变"打字机"。同时把 API Key 放后端、前端只调自己 /api/chat，加 loading 态和停止按钮。

history 模式路由是前端路由，服务器不认识 /dashboard。Nginx 配 try_files $uri $uri/ /index.html，把所有未命中的路径都回退到入口 HTML，交给前端路由。同时确认 API 路径（/api/）被反代到后端、没被回退规则吃掉。