最近,OpenAI 宣布了一个重大的技术栈转变,从 Next.js 转向 Remix。这一决定引起了开发者社区的广泛关注,人们开始质疑为什么会做出这样的转变。在本文中,我将分享我对此的看法和见解,这是基于我对他们的代码库进行探索以及分析他们如何在应用程序中实现 Remix 的结果。尽管我没有收到任何内部消息,但通过对技术细节的深入挖掘,我对 OpenAI 为何做出这一转变有了很好的理解。
OpenAI 的 ChatGPT 接口现在由 Remix 提供支持,主要作为一个客户端渲染应用程序运行。与传统的服务器端渲染设置不同,传统设置是从服务器将完整的 HTML 传递到浏览器,OpenAI 的方法主要围绕客户端渲染展开。这意味着大部分繁重的工作发生在客户端而不是服务器端。
访问该网站时,您会收到一小部分 HTML,包括一些元标记和一组预加载的图像和 JavaScript 文件,这对客户端操作至关重要。虽然 Next.js 以其强大的服务器端渲染(SSR)功能而闻名,但 Remix 也擅长创建单页面应用程序(SPA),其中大多数交互发生在浏览器中,使其非常适合客户端渲染。
OpenAI 可能选择 Remix 的一个关键原因是其卓越的路由系统。Remix 是由 React Router 的创建者开发的,路由是 Remix 实力的核心。OpenAI 的应用程序使用大约 60 个路由,Remix 处理路由的方式优化了客户端渲染,同时有效地管理每个路由的数据加载。
Remix 的“加载器”特别强大,允许服务器在渲染之前收集路由所需的所有必要数据。这与 Next.js 不同,后者可能首先加载 JavaScript,然后意识到需要通过 API 获取额外的数据,这可能会减慢初始加载时间。通过使用 Remix 的加载器,OpenAI 确保初始页面加载更快更顺畅,因为所有必需的数据都是预取并在单个步骤中传递的。
转向 Remix 的决定可能归结为几个关键因素:
-
客户端渲染优化:OpenAI 的应用程序不太依赖 SSR。相反,Remix 允许他们在客户端端处理大部分渲染,服务器主要提供数据。这与 OpenAI 的架构相吻合,其中大部分工作 - 如模型交互和 API 调用 - 发生在单独的后端系统上。Remix 作为一个轻量级的前端框架,能够与这些后端系统无缝集成,因此是一个自然的选择。
-
加载器效率:Remix 的加载器提供了在第一次渲染时加载数据的有效方式。在 OpenAI 的情况下,这意味着当您加载页面时,会立即提供所有必要的信息(例如用户数据、会话令牌等),从而减少延迟并增强用户体验。
-
与 API 调用的灵活性:OpenAI 的 Remix 应用程序与外部 API 进行交互,该 API 处理大部分后端逻辑。他们并不依赖 Remix 进行服务器端操作,而是使用 Remix 作为从这些 API 获取数据的前端。这种关注点的分离使得 OpenAI 能够将其 API 和后端逻辑与前端解耦,实现更好的可扩展性和维护性。
-
轻量级框架:Remix 运行在 Vite 上,后者以快速和轻量级的开发环境而闻名。Vite 的速度和灵活性可能吸引了 OpenAI,特别是与运行在 Webpack 上的 Next.js 相比。尽管 Webpack 和 Next.js 在工具方面取得了进展,如 TurboPack,但 Vite 的简单性和性能可能为开发者提供更无缝的体验。
鉴于服务器端渲染在 SEO 和性能方面的流行,一些人可能会想知道为什么 OpenAI 选择放弃 Next.js 的 SSR 功能。答案很简单:ChatGPT 不需要 SSR 带来的典型 SEO 好处。由于该应用程序主要是一个工具而不是内容驱动的网站,SEO 不是一个很大的问题。相反,OpenAI 专注于快速、流畅的客户端交互,而 Remix 能够有效处理这一点。
从技术细节来看,OpenAI 的后端 API 可能托管在自定义基础设施上,由使用 Envoy 和 CDN(Azure)的代理服务器支持。Remix 与这些 API 进行交互以检索必要的数据,但不直接管理服务器端逻辑。选择在 Express 服务器上运行 Remix 也突显了 OpenAI 偏好轻量级和高效的服务器端操作。
虽然他们之前使用 Vercel 与 Next.js,但现在没有迹象表明他们正在使用 Vercel。相反,他们似乎选择了更自定义的基础设施设置,其中 Cloudflare 处理一些负载平衡和流量分发。
OpenAI 仍然使用 Tailwind CSS 进行样式设计,这与他们的 Next.js 实现没有变化。然而,值得注意的是,他们并没有使用 Remix 的一些其他功能,比如处理表单提交和服务器端函数的 actions。这表明他们的重点纯粹在于优化数据加载和客户端交互。
总而言之,OpenAI 转向 Remix 是符合他们架构需求的。Remix 提供了客户端渲染的灵活性,一个强大的加载系统用于高效地获取数据,并与他们基于 API 的后端无缝集成。此外,Remix 的路由系统和在 Vite 上运行的能力为 OpenAI 用户期望的快速、客户端渲染的交互提供了一个轻量级和高效的解决方案。
虽然 Next.js 仍然是一个强大的工具,但 Remix 似乎为 OpenAI 的 ChatGPT 提供了他们所需的特定优势,使得迁移成为一个合乎逻辑的步骤。
希望我们能从 OpenAI 这里听到更多关于这一转变的消息,但根据我的探索,Remix 显然更适合他们追求快速、客户端渲染交互、强大路由和数据管理的目标。