为什么 ChatGPT 和 Claude 的网页版都使用了 React，还做了 SSR？这种用户交互前没内容的工具类服务完全用不上 SSR 吧？传输初始 DOM 会不会导致弱网环境加载更慢？为什么不用 Angular 写？

[drymonfidelia]

觉得四个问题关联程度比较高，也找不到比较准确的答案，就一起问了

[Dlin]

让我看看楼下怎么回答

[drymonfidelia]

我觉得传输初始 DOM 会更慢是因为初始 DOM 混在 HTML 里没办法被浏览器缓存，而 js 可以
并不能有效减少白屏时间

[xuld]

因为这些代码是 ChatGPT 的员工开发的

[MaxSecurity]

ChatGPT 和 Claude 等大型语言模型（ LLM ）服务选择使用 React 进行开发，并且采用 服务器端渲染（ SSR ），是基于多个因素综合考虑的，尽管这些工具类服务在用户输入之前确实可能没有太多内容需要呈现。

1. React 的生态系统和开发体验
React 是目前最流行的前端框架之一，拥有庞大的社区和丰富的插件与库，开发者资源也十分丰富。这使得开发团队在构建复杂的前端应用时，可以快速迭代、维护和扩展功能。
通过 组件化 和 声明式编程，React 提供了更高的开发效率，特别是在构建动态和交互丰富的用户界面时，可以很好地满足 ChatGPT 和 Claude 这样的应用需求。
2. SSR 的目的：首屏渲染优化
尽管 ChatGPT 和 Claude 在用户交互前没有太多内容，但 SSR 的引入是为了加速 首屏渲染。通过在服务器端预先渲染出初始 HTML ，用户访问页面时可以看到一个已渲染的 DOM ，减少空白页面或加载指示的等待时间。
SSR 帮助提升 SEO 和 页面性能，尤其是在提升首屏加载速度和为网络爬虫提供友好页面方面很有效。尽管 LLM 这样的服务对 SEO 要求不高，但首屏加载时间对用户体验仍有显著影响。
在弱网环境下，传输预先渲染的 HTML 虽然增加了初始 DOM 的传输量，但相比用户完全依赖客户端渲染时要加载和执行 JavaScript 的复杂逻辑，SSR 反而可能会更快地呈现内容。因此，SSR 在很多场景下是为了加速弱网环境的体验，而非拖慢它。

3. React 与 SSR 的结合
Next.js 等 React 框架支持非常灵活的 SSR 与静态生成（ SSG ），可以根据不同页面需求动态调整渲染方式。在没有复杂交互需求的页面，SSR 提供了灵活的策略来优化性能。
React 在 SSR 后，客户端会进行 hydration ，让 React 应用从静态 HTML 变为可交互的 SPA （单页应用）。这对于用户输入、模型响应和交互式体验是非常关键的，ChatGPT 和 Claude 都需要这种即时互动。
4. 为什么不用 Angular
Angular 是一个重量级的框架，包含完整的开发套件，适合开发大型、企业级应用。然而相比 React ，Angular 学习曲线较陡峭，且其灵活性稍逊于 React 。
语言模型类服务通常注重 轻量化的前端 和 快速迭代能力，而 React 的开发模式可以满足这些需求。
React 的生态 更广泛，容易引入大量优化工具和第三方库，而 Angular 相对较为封闭。
从长期维护和扩展的角度来看，React 的生态在构建 LLM 前端时更具优势。React 与各种前端和后端技术（如 GraphQL 、TypeScript ）有良好的集成能力，方便团队快速开发和迭代。
总结
React 之所以被选中是因为其在复杂交互和高效开发上的优越表现。SSR 的使用，尽管可能不总是关键，但在提升首屏体验、性能优化和灵活的开发模式上依然有其价值。而 Angular 虽然强大，但对于 LLM 类服务可能会显得过于复杂且开发灵活性不足。

[4ark]

问就是 CTO 喜欢，没有为什么

[FishBear]

@MaxSecurity #4 别贴了 想被封号吗

[SimonOne]

@MaxSecurity #4 v2 不允许直接贴 ai 生成的回答，你都不知道它是不是在放屁，这大段机械回答废话很多可以压缩一下呀

[NessajCN]

交互前怎么没内容了，你打开 gpt 网站不是会读取之前的 session 让你接着问吗？

[drymonfidelia]

@NessajCN 交互前没有需要给搜索引擎抓取的内容

[NessajCN]

@drymonfidelia
ssr 又不是只为搜索引擎准备的，最重要的功能是优化网站前端加载速度啊

[iapplebear]

因为技术选型用的 next 开发的，默认就有 ssr

[gorvey]

1. 框架选型老生常谈了，去 Wappalyzer 看看，不管是大厂，小厂都有用 Vue ，React 的。没必要纠结别人都在用 XX ，我们也要跟上
2. 选了 React ，90%会选 Next.js ，SSR 是 Next.js 开箱即用的功能
3. 弱网环境肯定是 SSR 加载更快

[drymonfidelia]

@NessajCN 但是 gpt 的 SSR 并不渲染 context 和历史会话，一样是单独用 ajax 拉取
弱网环境下加载会更慢吗

[hahastudio]

我觉得 ChatGPT 重要的不是前端页面用什么技术，重要的是那个 Web API 背后的事情，应该是这帮人会什么就用了什么吧
之前 Altman 抱怨一个开源库的 bug 使得 ChatGPT 没法显示对话历史，我感觉这帮人可以是科学家，但仿佛对软件工程缺乏基本素养
https://x.com/sama/status/1638635717462200320

[drymonfidelia]

@hahastudio 这个是开源库 bug 导致了用户看到了别人的聊天记录，我刚才也在问这是什么开源库会导致这么严重的问题 /t/1080887

[nzbin]

Gemini 不就是 Angular 写的吗，没啥原因吧，主要看开发人员会啥就用啥

[linzhe141]

因为 react 很火，nextjs 也很火

[drymonfidelia]

@Livid #4 AI 回复

[Livid]

@drymonfidelia 谢谢。那个使用 AI 回复的账号已经被彻底 ban 。