Netflix Removed React?

did you know that Netflix removed react and their website it's 50% faster as a result sounds crazy right I know it has to be true cuz I saw it on Twitter look here it is it's a real picture from what seems like a real presentation obviously this is a really big deal right right this isn't misinformation there isn't a community note proposed this isn't somebody grifting their shitty AI startup and using react drama they don't understand 7 years later is it we have a lot to talk about here the reality is that using react correctly

is both really simple and somewhat complicated and the things the Netflix team has done to make react a good experience for their devs and to make their website a good experience for their users are really interesting and nuanced and weth the conversation not a ship post a conversation I would love to have that conversation and there's a lot of interesting details here everything about how HTML is generated how JavaScript is bundled to why you would use react for a landing page or your terms of service can't wait to dive into all of this with you

but first a really quick word from today's sponsor in software Dev there are two hard problems naming things off by one errors and Live Sync if you've ever tried to make things sync between multiple users at once before you know how painful it is especially once you start adding an O data management querying rendering and all of that chaos so here's a live syncing chat already has Au and everything set up to sup nerds see how it appears in both immediately there's no trickery here there's no live client sides thinking I'm not using the multi-

windows let's see the code for it that's all of it this is all of the front end code how does that possibly happen this can't be real right not only is it real it's really convex these guys make it way too easy to handle the entirety of your back end for react applications and other Frameworks too to be fair I'm a react nerd I'm sure you are too it's really good for that the back of code is just as simple you don't even need to be a backend Dev to get around it you can literally

command click on the thing you're hitting on the front end with use Query or mutation and see in here how it's defined the list query has no arguments it has a simple Handler that uses the database in order to get the last 100 messages and send them to the user and send does validate that you send a body and an author and then handles that new message schema is adorably simple it's nuts how easy this is to work with and that's all it takes really it really is that simple go give him a shot if

you have yet check him out today at soy dev. l/c convex if you look into the community note here it drops a really useful link for context which is this why combinator conversation on The Hacker News board from 2017 let's dive in as a starting point there's a lot of nuance to dive into here but I think here will be a good start hey I work on the team at Netflix that gave the talk on react in the signup flow in the Tweet the full talks are available here if people want to watch them link

to the talk though it also provides some more context than some common questions people have asked let's hear it why are you using react to render a landing page the netx landing page is a lot more Dynamic than most people think it is I should give a little additional context first they didn't remove react from the code base they didn't remove react from the app all they did is server run and server render the landing page in react so that you don't need the JavaScript on the client side so the only thing react was removed

from is the bundle that you load of JavaScript on the client on the homepage as they say here though because the first question you'll ask is well if you removed react why would you even use it for the render just write it in anything else just HTML just write the HTML you're lazy you're dumb you're a JS soy Dev what are you doing there are good reasons as this engineer points out the Netflix landing page is significantly more Dynamic than most people probably think it's our most heavily AB tested page in the signup flow with

even some machine learning models being used to customize the messaging and imagery that you get depending on location whether or not you were previously a Netflix member your device type and a lot more this isn't some AI grift going on now reminder that this was over 7even years ago even beyond that Netflix supports almost 200 countries now and there's a different combination of localization legal challenges and value messaging for each one we end up sharing a lot of the logic in the UI for these AB testing and localization challenges throughout the signup flow mainly through

react components crazy it turns out as your HTML gets more dynamic in terms of the things it might result in reacts a good solution to the problem there are other ways to template your HTML but if your companies already building everything in react you already have this page written in react you just want it to be faster you can use all of these tools to render the right HTML with react and just send the HTML down to the user if you've been around recently this might sound familiar to something the react team introduced don't spoil

yourself though we're going to get there in a little bit the example I always love to give is the terms of use component that we have which to a Netflix customer signing up it's literally one or two checkboxes in the UI but it has some of the most complicated logic in the codebase due to the vast number of countries and user states that we support because of all of this it's more valuable for us to share these custom react components across the entire signup process both for the landing page and for the rest of the

flow which is a single page react and Redux application again they can share everything they're just generating the result for the user ahead of time on the server kind of sounds like server components right we'll get there I also love the terms of use in terms of service example not because everyone has these really Dynamic flows with it but because it is consistently one of the things that requires the most data to be fetched and double fetched if we go to ping. which is an app I built using the old way of building with nextjs

typescript react all that and we go to the terms of service page we'll see something interesting if I go to the network Tab and we grab something like provided by T3 tools and we search for this you'll see this came up in two places not two places in one file but two different files we have the ping. ginfo whatever here which is the actual HTML response and if I open this in my editor you'll see this is the HTML page that my computer fetched when I went to the URL and this includes all of the

information for this terms of service we have all these H2 and P tags that are the terms of service which is included in the HTML cool that's how the web Works nothing special here right one more thing we also reload the exact same data in JavaScript because when we server render with the old model for react we create the default HTML state but we need to run the exact same JS code on the server and the client so the code that resulted in that being done properly and having the right things in the terms of

service all of that including every single word of your terms of service has to be included in the JS bundle that then reruns reeners and reattaches everything as soon as the page loads that sucks hard the fact that you have to double fetch all of this data that you have to have all of the copy in here again even though it's there already it's just in the HTML that sucks and server components help solve this significantly because when you use a server component you don't have to send all of the same stuff down as JS

it can just be the HTML representation we'll go there in a little bit I keep getting ahead of myself we've seen a lot of conversion value through improving the performance of the landing page especially in countries with slower connections but we don't also want to reduplicate a lot of the shared UI logic that we have I will say if you're if your connection is slow enough you can't go through the sign up for Netflix how the are you going to stream a movie on Netflix for other companies like like if this was Amazon or Walmart

or a bank this would make a lot of sense but if your internet's too slow to sign up for Netflix what's your experience going to be like watching it the trade we decided to make is to server render the landing page using react but also prefetching react Redux in the code for the rest of the signup flow while we're on it this optimizes the first load performance but it also optimizes the time to load for the rest of the signup flow which has a much larger JS bundle size to download since it's a single page

app this all makes sense starting to sound a little bit like server components here's where things start to get fun here is Sophie who was at the time an employee on the react team now she just in contributes externally I work on react we'd love to hear from your team sometime and collaborate on this sort of thing we're solving many of the same problems but I rarely hear from Netflix Engineers except that talks where they're announcing that they're avoiding react or they forked it often for reasons that we weren't even aware of yeah there was

a lot of this at the time people Reinventing parts of react or forking or gutting and doing all these things and giving these bombastic talks about it without bothering to reach out or talk to the react team it's gotten better it was a two-sided problem because the react team didn't make it clear how open they were to these types of things they've gotten much better about that it's pretty easy to get a hold of them if you really want to if you you have a compelling enough reason especially if you work at a big company

the reason this was written is almost certainly because they had started exploring how server components would work the harsh but somewhat fun reality of all of the benefits that were described here is if they were using the new server component model it would have done almost all of the exact same things you could have had components be reused on the landing page and in other places and when you render them on the server they were a server component and when you render them on the client they were a client component awesome you could have had

the terms of use be dynamic based on users cookies and whatnot and you have to load all the different possible States as JS you just load the one the user wants I have a weird example of this here is upload thing if you don't already know it's an app I built and uh got a little 3D printed thing of here to make it easier to add file uploads to your apps and when I say file uploads I don't mean I go dump it somewhere in a web UI and then let users see the file I

mean users can upload files ugc is a really hard thing to handle properly when users are uploading their own content we built a great way to do that especially if you're a full stack Dev especially if you're next Dev I'm not here to just shill upload thing though I already did my Shilling earlier I'm here to show you guys how server components made this much easier to build and work with so here we have my apps you might have noticed all of these have these fancy little backgrounds to make it a little clearer that they're

different from each other I'm using hero patterns for that hero patterns is a source of patterns that are open source for you to grab as svgs and use and your stuff it's really cool I have all of these in a giant file here and I mean it when I say giant if I reveal and finder utils generate pattern this file alone is 205 kilobytes of JavaScript and all it is is all of the SVG patterns that I would want to render historically you would not ever ever ever want to do this in your JavaScript code

because if you do this in your JavaScript code now this giant file gets loaded to the user this one file is bigger than the entirety of react which is kind of absurd that would be really bad the alternative way to do this the traditional way would be instead of the svgs all being here you would load them remotely once the content loads but then you don't have the nice embedded Behavior where the patterns are there right when the page loads you have to wait for them to be fetched separately from the server in a different

round trip not ideal so how do we make sure all of these patterns can exist in our code and then we can generate HTML using the right svgs without having to load all of this on the client it's actually quite simple it's done this file works that way if I want it to work differently then I go wherever this exists so we find that I call this in page TSX if I want this to be on the client side it's easy I go up here use client now this file loads JavaScript to the user without

this here get random pattern Styles and the things from that function and the things things from that code do not go to the user I'm able to specify an unbelievable number of permutations in different states the UI can be in and represent that to my code and I have to ship all of those potential states to the user the way to think about this is when you look at something like this UI your code needs to handle all the different states the UI could be in it needs to handle the empty state it needs to

handle the loading state it needs to handle the state with 15 apps he needs to handle the state with one app it needs to handle the different states with the different backgrounds for all of those different apps so every permutation your UI could be in code has to exist for it there's a pattern to describe this way of thinking called server driven UI where instead of the server giving the client data that the client then uses to figure out which version of the UI to show you what if the server drove the UI what if

the server told the client hey your UI should look like this that's how the web used to work apps and I'll admit single Page Apps and websites built that way with stuff like react encour a different way of thinking where your HTML would have nothing in it you load a little bit of JS which would then go fetch Json and then generate the HTML on the user's device which means every single way the HTML can render has to exist in the JS first server components mean you don't have to have that code representing all of

those permutations on the client's device anymore it can run on the server and just send their permutation to them so I have 400 something patterns in that file here at least probably so I have all of these patterns and all of these things but all that loads is the actual HTML for the ones being rendered that's the magic of server components so now imagine instead of these being different patterns that could or couldn't render these are different countries and instead of it rendering 15 of them it renders one but each of them has different needs

and that theoretical Javascript file is huge with all the different copy for all the different languages for all the different expectations that can exist and now you have to render all of those different permutations which means the JavaScript has to include everything for every language now when I load the United States version I loaded the code for the India version too I loaded the code for the Germany version too I loaded all of the different JavaScript for all the different states that URL could potentially be in the magic of server components is you're only fetching

for the things that you're actually rendering so if I am loading this page in the US it's not going to load the JavaScript for the India or the Germany version it's going to just load the things that I rendered it solves this problem they effectively reimplemented server components with what they were describing here which is hilarious because if you implement this with server components the right way your savings are probably going to be even bigger than 50% we've already seen this with a lot of applications taking advantage of these things server components allow you to

have server code that generates HTML that doesn't result in additional JavaScript going to the user and this isn't just Reinventing PHP because PHP doesn't let you write client code you can have a component that on client works the way I'm describing and on server is not sending JavaScript to the user and you can reuse it in both places that is a concept that nothing has had before it and sure the server sending HTML might feel like PHP but if you think this is just PHP then you understand neither PHP nor the browser sorry to call

you out random chatter but this is the stupidest thing anyone said today and I cannot believe that you watch my stuff if you actually think this is the case anyways if you want proof of this there's a really good example I have a video that should probably already be out by now it's called Next faster there's a website called McMaster that people seem to think is vanilla HTML and that's why it's so fast when in reality it's using a shitload of JS like multiple megabytes of it in order to make it feel as fast as

it is Ethan ncer and crew rebuilt it with a service called Next faster it's not a rebuild that's inspired but it's for school materials and it's even FAS when I click things I'm clicking now now now now now they load immediately because it turns out nextjs in server rendering makes it pretty easy to do this and the coolest part of the new model is you get to choose when it stops being just HTML and starts being client sjs and you can pass things from the server to the client as HTML so to Showcase why server

components are so different from previous models I made a simple example imagine in docs you have the little tabs for like typescript or JavaScript or python HTML whatever is one of those tab bars you have these little tabs tab a tab B tab C when you click them they're under different Contents I passed all of these as props we have tab contents tab equals a tab equals B tab equal C I have this little helper function tab contents and it console logs rendering tab components for tab if I do this the way you guys are

used to ignore that I go here I refresh I click tab C it logs click tab B it logs the reason is all of this JavaScript is running on the client as it should what happens if I delete that though we see we're getting these server logs but these are being injected by next it's a cool thing they do that but these aren't happening on the client side they're just forwarding those over for me client side and you'll see here as I click between the tabs there are no new logs how what's going on here

one of the really things you can do with server components that doesn't exist in any other framework right now is when you pass something that is a server rendered component like we have here with tab contents and I pass that as a prop to a client component which obviously tab rapper has a uate call so it is a client component it renders all of these states on the server because they're all being passed as props so now A B and C get rendered on the server and all get passed down is what is effectively HTML

so to speak to the client so they all get get pre-rendered on the server and now we don't have to wait between them they're all there they're all in the HTML they're all in the browser and even though we have these different states that all could exist and all were generated in this code that does exist and does run none of that affects the end user none of this goes to the user they'll never have to know about it as they shouldn't now you can have an infinite number of these different conditions and none of

that is loading is JS that the user gets and it we don't give up the dynamic behaviors and controls that we normally get from react we just have the option to intermingle these things that don't ship JS to the user with the things that do it is a new paradigm it is really cool and it solves all of the problems that are being described in this seven-year-old comment from a seven plus year old talk that is being misused by an AI grifter to get free attention and I cannot believe I'm giving him even more attention

by doing this but it is the stupidest thing I've seen in such a long time that I had to rage a little bit because not only is this problem being deeply misunderstood it also has been solved by the new Solutions and the people who are sharing this thing on ironically like it's a big problem are the same people who are bitching about the new Solutions and saying oh we just reinvented PHP no we didn't this is something new and if you can't see how this is something new you're struggling to see that's not our fault

anymore enough of us have done a good enough job at explaining why this pattern is cool and why we're able to build things as performant as we do with really good public examples like next faster which is open source for you to go look at and see how you can make things that are super Dynamic with a ton of stuff going on both in the markup and the data model without having a thing that sucks to use I will offer some sympathy though if you were at Netflix at the peak of the single page app

craze the these Solutions didn't exist and I can understand why you would do something drastic like reinvent how your HTML is being rendered so you can rip the react part out of it I get it you didn't have server components yet but now we do and continuing to reference examples from years ago from almost a decade ago like these tools haven't improved since it's embarrassing and I really hope we stop sharing these things like their real or sincere or meaningful commentary on how react works for production when nobody at Netflix would say this is the

right thing to do today nobody who built it would say it and I am explaining to you how to do it right instead stop sharing things you don't understand because they're dunking on a thing you don't like and stop the AI grifting I'm so done with it ah God I got nothing else on this one peace notes