Why OpenAI Migrated from Next.js to Remix: An In-Depth Analysis
Heads up!
This summary and transcript were automatically generated using AI with the Free YouTube Transcript Summary Tool by LunaNotes.
Generate a summary for free
If you found this summary useful, consider buying us a coffee. It would help us a lot!
Introduction
The recent announcement of OpenAI's migration from Next.js to Remix has caused a significant stir in the web development community. Understanding the technical reasons behind this shift can shed light on the motivations for such a major transition. In this article, we will analyze the critical components of OpenAI's architecture and discuss why the move to Remix is beneficial for their application.
The Shift from Next.js to Remix
OpenAI, known for its cutting-edge AI technologies, decided to transition from Next.js—previously a favored framework—to Remix. This decision raises numerous questions as to why they opted for this change and what advantages Remix provides.
Reasons for the Transition
-
Client-Side Rendering Focus
OpenAI's application architecture is primarily client-rendered. While Next.js is known for its server-side rendering capabilities, Remix excels in client-side applications, making it a suitable choice for OpenAI's needs. -
Improved Data Handling with Loaders
Remix offers an efficient loader API that allows data to be fetched upfront for an initial render. Instead of requiring the application to fetch data post-render—common in Next.js—Remix bundles all necessary data into the initial payload. This lowers initial load time and enhances performance for the user. -
Robust Routing Capabilities
At the core of Remix is React Router, renowned for its powerful routing capabilities. It simplifies the transitions between pages, making client-side navigation seamless and efficient -
Lightweight Dependencies with Vite
Remix runs on Vite, which boasts a faster, more efficient build process compared to Webpack—used by Next.js. The lightweight infrastructure of Vite optimizes the development experience, reducing frustration and potential bottlenecks that developers often face with Webpack. -
Enhanced Flexibility
OpenAI is not merely a web application; it encompasses mobile applications and desktop applications built on Electron. The structure and flexibility of Remix offer a seamless integration with these various platforms.
The Technical Analysis of the OpenAI Application
To get a clearer picture of how OpenAI has structured their application using Remix, one must delve into its mechanics.
Initial Page Load
- Upon visiting the OpenAI application, the initial HTML response includes meta tags, preloads for images, and essential JavaScript—it’s a heavily client-focused approach.
- Interestingly, it incorporates a nifty JavaScript snippet that avoids the flash of unstyled content, enhancing user experience immediately upon loading.
Data Manifestation
- The Remix manifest reveals approximately 60 routes, where each route is efficient in returning data via loaders.
- Notably, there’s a significant amount of JSON being hydrated for effective client-side rendering. The use of a single JSON object allows for rapid transitions when navigating through various pages of the application.
Backend and APIs
- OpenAI’s backend employs API requests to gather necessary data for client-side operations. The API server uses Envoy as a proxy to handle traffic effectively. Thus, the Remix framework interacts with OpenAI’s external APIs, retrieving data without becoming bogged down by server-side rendering concerns.
Hosting Environment
- A surprising revelation is that the Remix server runs on Express, using multiple lightweight servers. OpenAI may be leveraging its significant infrastructural capabilities to host these servers in-house efficiently.
Additional Insights into Remix
Benefits of Using Remix
- SEO and Performance: Although OpenAI's application may not have rigorous SEO requirements, using Remix still lays the groundwork for potential SEO optimization, should that need arise.
- Server Features: While OpenAI appears to underutilize some features of Remix—like actions—it remains adaptable for future enhancements and expansions.
Future Considerations
Given the rapid evolution of web development frameworks, monitoring how Remix and Next.js perform in the long run will be crucial. Each framework continues to innovate, making comparisons increasingly relevant.
Conclusion
OpenAI's migration from Next.js to Remix offers insightful implications for future web application development. The move is rooted in optimizing client-side rendering, improving data fetching efficiencies, and enhancing routing capabilities. The lightweight design of Vite contributes to a better development experience, allowing engineers at OpenAI to focus on delivering top-notch applications seamlessly. As both frameworks evolve, this transition may pave the way for similar migrations within the tech community, driven by the need for flexibility and performance.
Ultimately, while OpenAI’s decision may seem surprising at first, a closer examination reveals that Remix is incredibly well-suited to meet their evolving needs in an increasingly competitive landscape.
so chat GPT um they moved from nextjs to remix um and they announced that yesterday and everybody's freaking out
because oh wh why what's going on um and the biggest question is like like why why are they doing this type of thing
why are they moving from nextjs so I spent the last hour or so sort of digging in I downloaded the entire code
base um and I sort of just sniffed around and looked at the dev tools to figure out how they are using remix um
and that gives me a pretty good idea as to why they've moved the switch and again this is just a guess um I haven't
heard I've certainly asked but I haven't heard any uh any inside scoop from anybody in there so first let's take a
look at the application itself so the application is almost entirely client rendered so it is not a server rendered
application that just sends HTML to the browser most of the interaction most of the rendering all happens on the client
so what I did is I went ahead and downloaded the initial when you visit a page fresh like you you type in chat
gp.com or you you go to a link um what you get is some HTML and I have that here and inside of that is we've got
some meta tags they have a whole bunch of Link tags that will preload some images for you um and then they also
have a bunch of pre-loading of their JavaScript because this is all the JavaScript that is needed to run it on
the client so um where as nextjs they're very heavy on server uh and and remix can certainly do
that as well but remix is also very good at doing spas or or client side applications that are client side
entirely so what they're doing here is they are server rendering this part this HTML but there is
no like there's no HTML being rendered on the server aside from all of these preload links and a little bit of
JavaScript actually I thought this little bit of JavaScript was pretty nifty um if you have a color scheme set
in local storage you can get this flash of unstyled or flash of light mode before you hit dark mode so what they do
is they just put the script here before they run any of the other JavaScript so that this is this is a quick blocking
script so that you don't get that flash of of dark mode but that's besides the point then I went and downloaded the
Manifest right here and they have about 60 different routes on there so that's another really good um look at it is
that remix is from the react router folks in fact remix is going back to being react router and at the core of
remix and at the core of any good web framework is a really good router um so they have about 60 routes on there and
it actually gives you a little bit more information about each of the routes and and what they do so lots of them have
these things called loaders and what a loader is is the ability to provide data to a route when it goes ahead and
renders and if we take a look at that page that I you initially hit you're going to see a massive JavaScript object
inside of here window doore remix content and this provides it with all of the data so on the server on the first
render they are collecting absolutely every single piece of data that is needed for that initial render so what's
not happening is that you're loading the application the JavaScript runs and then it realizes oh I need to go off to an
API and fetch some data and then come back and then render that's what gives slow initial load time so your options
there are you can either give it all of the data it needs for its first client side render or you can even just go one
step further and render all of the HTML on the client and then pick it up sorry all of the HL on the server and then
pick it up on the client they're not doing that in this case they're simply just providing all of the data that is
needed for this hydration you can see here it's got my email address my user ID and some session tokens and it's it's
many many many lines here if I close this up you'll see what 7,000 lines of Json that's being hydrated and quite
honestly it's pretty fast for that initial load but what chat GPT knows is that when you are now switching from
page to page like if I click on this explore uh gpts here and we go to all you're going to see actually we go to
fetch there we go this is the route and the route now is not returning HTML like it was on that first one but it is
simply just returning um some Json that is needed for the next route so now we're entirely client side switching
pages is done entirely client side and they're simply just hitting an API server for the data that is needed and
if you take a look at the headers right here you'll see that they often will Point towards a backend API here um
which I'm assuming is a totally separate server they're not running the API out of remix remix is simply just hitting
the API itself and collecting the data that it then needs um what other other information did I find out here so their
backend API is running if we take a look at the headers here you'll often see like an X to see what sort of server
it's running on here we go X Envoy Upstream so that is a proxy server that will generally sit in front of uh they
probably are hosting their own servers uh in their own data center since they're open Ai and they use Envoy to be
able to distribute it and proxy it through to the different they also do have cloudflare in front of that as well
um so that's the API server but if you actually look at the initial request of going to one of these URLs so if we
click on document and go to one of these Pages you'll see that the remix server itself is running on Express which I
found pretty surprising so they probably have a very lightweight server that runs remix server side it's running on
Express on a whole bunch of different servers um and then we'll send that data up to the client side what else did we
find out about it they are using Azure um for their CDN to to send everything on up so I do not think I think they
were running on versel previously but I do not see any of the Little sniffing that I usually see when something is
running on versel um they're using Tailwind for styling they are not using any actions as far as I can see so in
remix the ability to um submit data via a form or run a server function from the client is is called an action um and as
far as I can see via this manifest you can often see this has action false there is nothing there that says has
action true or has client action true so doesn't look like they are using too many of the other features of remix
except for the initial rendering in the Fantastic router so the big question is why did they move to remix I think that
they did that because a they have a fantastic router in remix that lets you do things client side if you want to
nextjs can do stuff client side but it really doesn't make that much sense and honestly you're going to be battling
against nextjs to do everything client side if that's what you want we are seeing most applications swing to the
server which why I thought this was interesting but uh open aai is not just a website it's not just a nextjs
application they have their own server they have iOS apps they have a desktop application that's built in electron so
in most of their like heavy lifting is done via the API and the remix application is a way to interact with
with that type of thing so it I think that building this type of thing in remix is probably a lot easier um and
then second the loader API in remix is very good for being able to collect the data that you need for that initial
render dump it into the document via this window remix uh not remix manifest but the window. remix content variable
and then you can pick it up on the client side and quickly do a render this application it doesn't need any of the
benefits of like there's no SEO that needs to be done there isn't a ton of heavy server rendering there's no
database quering again that's all being done via the API um the off is taking care of via remix though you can log in
and it sends the cookies on over there's lots of streaming lots of streaming back and forth um which is done via
websockets or server sent events so that's not even um something that they need to worry about lastly remix runs on
vit and vit is freaking fantastic it is so lightweight um you're able to bring a remix app into vit instead of the other
way around um nextjs runs on webpack and they are they've been working for many years to write the next generation of
webpack to make it faster to make the dev server even better and they're working really hard on that I thing
called turbo pack which I'm excited for but there's lots of Special Sauce in the nextjs dev server and I have hit so many
issues where this works in V just fine this works in regular JavaScript just fine but as soon as you have to
introduce it to the webpack flow you start getting into trouble you get all these errors and it's it's honestly
quite exhausting and this is I'm saying this is somebody who loves nexj I think I have four or five production nextjs
application I'm still going to use nextjs I I use remix as well but uh I just wish that xjs ran on V uh V is so
fantastic I just think remix is probably a much more flexible thing for what they're trying to do here and that's why
they made the migration so hopefully you hear a little bit more information from them as to why this happened but that's