V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
drymonfidelia
V2EX  ›  程序员

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

  •  
  •   drymonfidelia · 45 天前 · 1595 次点击
    这是一个创建于 45 天前的主题,其中的信息可能已经有所发展或是发生改变。
    觉得四个问题关联程度比较高,也找不到比较准确的答案,就一起问了
    19 条回复    2024-10-27 13:05:03 +08:00
    Dlin
        1
    Dlin  
       45 天前
    让我看看楼下怎么回答
    drymonfidelia
        2
    drymonfidelia  
    OP
       45 天前
    我觉得传输初始 DOM 会更慢是因为初始 DOM 混在 HTML 里没办法被浏览器缓存,而 js 可以
    并不能有效减少白屏时间
    xuld
        3
    xuld  
       45 天前
    因为这些代码是 ChatGPT 的员工开发的
    MaxSecurity
        4
    MaxSecurity  
       45 天前
    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
        5
    4ark  
       45 天前
    问就是 CTO 喜欢,没有为什么
    FishBear
        6
    FishBear  
       45 天前
    @MaxSecurity #4 别贴了 想被封号吗
    SimonOne
        7
    SimonOne  
       45 天前
    @MaxSecurity #4 v2 不允许直接贴 ai 生成的回答,你都不知道它是不是在放屁,这大段机械回答废话很多可以压缩一下呀
    NessajCN
        8
    NessajCN  
       45 天前
    交互前怎么没内容了,你打开 gpt 网站不是会读取之前的 session 让你接着问吗?
    drymonfidelia
        9
    drymonfidelia  
    OP
       45 天前
    @NessajCN 交互前没有需要给搜索引擎抓取的内容
    NessajCN
        10
    NessajCN  
       45 天前 via Android
    @drymonfidelia
    ssr 又不是只为搜索引擎准备的,最重要的功能是优化网站前端加载速度啊
    iapplebear
        11
    iapplebear  
       45 天前
    因为技术选型用的 next 开发的,默认就有 ssr
    gorvey
        12
    gorvey  
       45 天前
    1. 框架选型老生常谈了,去 Wappalyzer 看看,不管是大厂,小厂都有用 Vue ,React 的。没必要纠结别人都在用 XX ,我们也要跟上
    2. 选了 React ,90%会选 Next.js ,SSR 是 Next.js 开箱即用的功能
    3. 弱网环境肯定是 SSR 加载更快
    drymonfidelia
        13
    drymonfidelia  
    OP
       45 天前
    @NessajCN 但是 gpt 的 SSR 并不渲染 context 和历史会话,一样是单独用 ajax 拉取
    弱网环境下加载会更慢吗
    hahastudio
        14
    hahastudio  
       45 天前
    我觉得 ChatGPT 重要的不是前端页面用什么技术,重要的是那个 Web API 背后的事情,应该是这帮人会什么就用了什么吧
    之前 Altman 抱怨一个开源库的 bug 使得 ChatGPT 没法显示对话历史,我感觉这帮人可以是科学家,但仿佛对软件工程缺乏基本素养
    https://x.com/sama/status/1638635717462200320
    drymonfidelia
        15
    drymonfidelia  
    OP
       45 天前
    @hahastudio 这个是开源库 bug 导致了用户看到了别人的聊天记录,我刚才也在问这是什么开源库会导致这么严重的问题 /t/1080887
    nzbin
        16
    nzbin  
       44 天前
    Gemini 不就是 Angular 写的吗,没啥原因吧,主要看开发人员会啥就用啥
    linzhe141
        17
    linzhe141  
       44 天前
    因为 react 很火,nextjs 也很火
    drymonfidelia
        18
    drymonfidelia  
    OP
       34 天前
    @Livid #4 AI 回复
    Livid
        19
    Livid  
    MOD
       34 天前
    @drymonfidelia 谢谢。那个使用 AI 回复的账号已经被彻底 ban 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2030 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:23 · PVG 08:23 · LAX 16:23 · JFK 19:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.