Why did OpenAI move from Next.js to Remix?

Wes Bos

5 Sept 202410:40

Summary

TLDR昨天他们宣布从Next.js迁移到了Remix，大家都很好奇为什么会做出这样的决定。经过研究发现，他们的应用主要是客户端渲染，Remix在处理这类应用时表现更好。Remix提供了强大的路由功能和加载器API，可以优化首次渲染时的数据加载，并且通过Vite提供了更轻量的开发体验。此外，他们的应用依赖于API和后端进行大部分数据处理，Remix适合这种架构。虽然Next.js也能实现类似的功能，但使用Webpack带来了开发中的一些问题。因此，Remix更灵活，更适合他们的需求。

Takeaways

🔄 OpenAI 将 ChatGPT 从 Next.js 切换到 Remix，并引发了广泛讨论。
📱 应用程序几乎完全依赖客户端渲染，而不是服务器端渲染。
💻 初始页面加载时会提供所有必需的数据，减少了后续的 API 调用，从而加快了加载速度。
🗺 Remix 的强大路由功能使得客户端渲染更加高效，尤其适用于单页应用。
⚙️ OpenAI 通过 Remix 提供的加载器 (loader) 在初次渲染时传输所有数据，并将其存储在客户端。
🔄 页面的切换完全在客户端完成，仅向后端 API 请求所需的数据，而不重新渲染 HTML。
🛠 ChatGPT 使用了 Azure CDN 和 Express 作为后端服务器，同时依赖 Envoy 作为代理服务器。
🎨 OpenAI 使用 Tailwind 进行样式设计，但并没有使用 Remix 的动作 (action) 功能。
💡 OpenAI 选择 Remix 可能因为其优秀的路由和加载器功能，以及与 Vite 的高效集成。
⚡ 相比 Next.js 依赖的 Webpack，Remix 使用 Vite 提供了更快的开发体验，减少了开发过程中可能遇到的复杂问题。

Q & A

问题1: 为什么OpenAI选择从Next.js切换到Remix？
-根据分析，OpenAI选择切换到Remix的原因可能是因为Remix具有优秀的客户端渲染能力和强大的路由功能。与Next.js相比，Remix在进行单页应用程序（SPA）时更加灵活，尤其适合OpenAI这种主要依赖API交互的系统。
问题2: Remix如何处理数据加载？
-Remix通过使用'loader'来处理数据加载，loader可以在渲染页面时预先获取所需的数据，这样可以避免在客户端执行额外的API请求，从而加快页面的初始加载速度。
问题3: OpenAI的应用是如何进行页面间切换的？
-页面间的切换是完全在客户端进行的。每次切换页面时，Remix只请求所需的数据，并通过API服务器返回JSON格式的数据，供客户端渲染使用。
问题4: OpenAI应用的初始加载是如何进行的？
-在用户首次访问页面时，Remix会通过服务端预加载所有必要的JavaScript和数据，并在客户端进行快速的初次渲染。这确保了用户体验的流畅性，特别是针对复杂数据的处理。
问题5: OpenAI应用中Remix和Next.js在渲染策略上有什么区别？
-Remix擅长客户端渲染，并且更适合构建SPA应用，而Next.js则更多地依赖服务端渲染。虽然Next.js也能进行客户端渲染，但在与服务端渲染混合使用时可能会遇到挑战。
问题6: OpenAI为什么选择使用Remix而不是继续使用Next.js？
-OpenAI选择Remix的主要原因在于其灵活的路由功能和轻量级的客户端渲染能力。Next.js虽然功能强大，但在使用时需要更多的服务端渲染支持，而Remix更加适合OpenAI以API为核心的架构需求。
问题7: OpenAI的应用是否使用了Remix的表单提交功能（Actions）？
-没有。在分析中，Manifest文件显示没有任何页面启用了Remix的Actions功能，表明OpenAI并未使用Remix的表单提交或服务器端功能，更多的是依赖API进行数据处理。
问题8: Remix是如何提高客户端渲染性能的？
-Remix通过使用其loader API，在初次加载时就将所有需要的数据注入到页面中，并通过轻量级的渲染框架Vite，使得客户端渲染更加快速高效，避免了额外的数据获取过程。
问题9: OpenAI使用Remix时是如何处理用户的身份验证和会话的？
-Remix处理用户登录和身份验证，并通过Cookies在客户端和服务器之间传递会话信息。这确保了用户在不同页面间切换时身份信息的保持。
问题10: OpenAI的后端基础设施是如何支持其应用的？
-OpenAI的后端API使用Envoy进行代理，并通过Cloudflare提供CDN支持。此外，Remix应用运行在Express服务器上，使用轻量级的架构进行数据传输和处理。