This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Why Use Universal Rendering?" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

This application relies heavily on JavaScript for rendering. This makes it impossible for anyone without JavaScript to view the application. Brian talks about how Universal Rendering can solve this problem making the application more versatile and accessible.

Get Unlimited Access Now

Transcript from the "Why Use Universal Rendering?" Lesson

>> Brian Holt: We're gonna move on to universal rendering. So, taking our app, rendering it on the server first, and then sending it down the wire. So, let's discuss why you wanna do that, cuz it sounds like a whole lot of extra work. So, if I open my View Source here, View Page Source.

[00:00:17] The page source for this is index.html, right? Nothing happens here, there's nothing. And if I open this page without JavaScript,
>> Brian Holt: Disable JavaScript, right there.
>> Brian Holt: Yeah, cuz I have to run dev again.
>> Brian Holt: So, if I run this without JavaScript, I should just get a React has not yet rendered, right?

[00:01:04] Because if you send down this app, it's an entire JavaScript app. It can't do anything if JavaScript is disabled. Now, people disabling JavaScript, probably a pretty minuscule amount of people these days. If you're gonna be on the web, for the most part, you're gonna running JavaScript. However, where this becomes a problem is if you're on a really slow connection, right?

[00:01:23] Like on shitty hotel Wi-Fi, or you're in 2G, or you're in a foreign country that has really bad Internet access. These are all common use places, right? So, what we want instead is we want to send down the complete markup first for this initial page. So, this markup appears before someone instantaneously, right?

[00:01:45] Then they look at this page, right, it's gonna take me at least a second to discern. Okay, brand, okay, search. Okay, now I can search for a movie. So I'm gonna search for house, right? It's gonna take me a least a couple seconds to put all those things together.

[00:02:01] Hopefully by the time that I've completed that entire thought process, and I'm ready to interact with your page, everything will have been loaded by that point, right? But it starts that process sooner. Rather than having to wait for the JavaScript to download, for React to bootstrap, for your app to finish the first render, for it to mount to the DOM, all these different steps, you want it to be something's in front of you, okay?

[00:02:25] And then, React is gonna hurry and bootstrap behind the scene. So any question about the process and why we want to do universal rendering? So we want to send down complete mark-up. That's the point of universal rendering. So, it's gonna send down this mark up. This mark up is not going to be interactive, right?

[00:02:44] Because there's no JavaScript behind it yet. We want React to kind of like hurry up and play catch up so that it can bootstrap itself behind the scenes. So by the time someone's willing to interact with it, the app is ready to go. Does that make sense? Okay, so I'm going to show you how to do this with node.

[00:03:09] You obviously, that this is a JavaScript application. Node is going to be involved in here somewhere if you're gonna be able to do it. The way that we do it at Netflix is all of our backend services, or many of our backend services are JVM based, which obviously don't run JavaScript.

[00:03:25] So, we have a node server that sits in front of our Java servers that then serve requests to people. So, people make requests against the node. We do all of our server side rendering on our node server and then we send it back down. And our node server is actually what talks to all of our different services.

[00:03:41] So, if you're on Python or Django or Ruby or anything like that, that's how you're gonna have to do this if you want to do this, which you should, I think.