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

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

Universal rendering, or server-side rendering, involves sending the fully rendered application in the initial payload to the browser and loading the application code afterward. This shortens the time the user will have to wait before something appears on screen. Brian demonstrates what happens without universal rendering and talks about how to solve these problems.

Get Unlimited Access Now

Transcript from the "What is Universal Rendering?" Lesson

>> [MUSIC]

>> Brian: Universal rendering, this is like the holy grail. This is one of the most compelling reasons to use both Node and React together. That we're basically, if you look at our web page, if you look at just viewing source, if you view the source there's nothing to it, right?

[00:00:19] There's an app file and just a little bit of boilerplate, and that's it, right? What's really kind of crappy about this, if we have a really slow connection here, I wonder if I can even simulate it.
>> Brian: Network, no throttle, yeah, and I'm gonna turn this down to super slow, like 2G.

[00:00:46] I don't know how well this is gonna work. Connection refused, it doesn't work. Just kidding, I wasn't running my server.
>> Brian: Okay, look how slow our webpage is now.
>> Brian: Isn't that horrible? I'm just getting gross feelings looking at this.
>> Speaker 2: [LAUGH]
>> Brian: You can do it.
>> Speaker 2: I would give up.

>> Brian: Yeah, wouldn't you? Wow, how long is this gonna take? I didn't expect this to be so compelling. [LAUGH]
>> Speaker 2: [LAUGH]
>> Speaker 2: [LAUGH].
>> Brian: Look how slow that was, how slow was that? That was 30 seconds. Now granted this is 2G connections, right, not even 3G. But if you're, for example, I went to China last year and I had 2G connection for much the time I was there.

[00:01:43] So, first of all, fix your web pages so they're much lighter. But secondly, universal rendering is gonna make this much better because in the initial payload, we're gonna actually send down the rendered app. Then we send down the JavaScript that'll take over, and then actually make your web page interactive.

[00:01:58] That's the idea going on here.
>> Speaker 2: Could you push a branch before we go further?
>> Brian: Yeah sure.
>> Brian: Definitely turn that off. I do this all the time, where I go do things and then I forget to turn them off. Okay, it turns them off for you.

[00:02:15] But there was a couple weeks where I had 3G speeds on my computer and I was like, why is this taking so long?
>> Speaker 2: [LAUGH].
>> Brian: Or, one of my most embarrassing moments was at Oscom last year. I turned off JavaScript in my browser to test something and then I left it on, and I was teaching a workshop on React.

[00:02:32] And I was like, why doesn't this work? And everyone else is working, then I find out half hour into the workshop, I'm like, crap. Everything's, no JavaScript is working because you turned off JavaScript.
>> Speaker 2: [LAUGH]
>> Brian: So frustrating, okay, cut a branch.
>> Brian: Let's see, git checkout -b fem-23.

[00:03:00] Git add ., status, commit -m.
>> Brian: FEM step 23, push origin fem-23, okay.
>> Brian: So, universal rendering is actually pretty easy with React. It's actually super easy with React. However, we did React Router and we did Redux, which actually makes it three steps more complicated to get all that working together nicely on your server.

[00:03:47] So, I say universal rendering, that's my term of preference. But people call it server-side rendering which is actually literally what it is. And they also call it isomorphic rendering, which is not a great name but people call it that. All three of those things, we're all getting at the same thing.

[00:04:03] Taking your React app, rendering on your server, and then sending a completed rendered payload down to your client. So I did wanna show you, I have another,
>> Brian: Another workshop that I give called ES6 React. And I wanted to show you how easy it is if you don't include React Router to do universal rendering.

[00:04:26] So if you look here at app.js, 26 lines of which many of them are just blank lines, this is it. This is all you need to get universal rendering with just React.
>> Brian: So basically you do ReactDOMServer.rendertoStringReact. That's it, and then you just send that down with the payload, and that's it.

[00:04:53] So, suffice to say, this is very simple for just React. And now that we're using React Router, we have to share the routing with the server, with the client, right? So, sharing the routing is actually the really, really complicated part about this. The React part is very simple.

[00:05:10] Actually, even the Redux part's not too bad. But the React Router part is hairy.
>> Brian: Yeah.
>> Brian: So anyway, that's what I wanted to show you.