Why did OpenAI move from Next.js to Remix?

0:00 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

0:46 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

1:33 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

2:18 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

3:06 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

3:52 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

4:39 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

5:25 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

6:10 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

6:56 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

7:43 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

8:28 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

9:14 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

10:01 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 my two cents