Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Rendering Questions" 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:

Before moving on, Brian spends a few minutes answering audience questions about Express and the implications of producing different output between the server and client environments.

Get Unlimited Access Now

Transcript from the "Rendering Questions" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Speaker 1: Question on in express, how would you pass data from a request object to react?
>> Brian Holt: That's a good question. So, one thing I do want to before I answer that question that I want to stress here. I wonder if I can actually show you, so let's go to landing.jsx.

[00:00:27] What I wanna stress is that you wanna make sure that whatever you're rendering on the server is also exactly what you're going to be rendering on the client or React's gets really pissed at you. So I'm gonna do that right now. Here in the svideo, I'm gonna say instead of that Math.random.

[00:00:46] All right, that's the name of the function. Make sure of that, Math.random, yep, cool. So what this is gonna do, this is just return a random number between zero and one. But the property I wanna exploit here is it's gonna be different every single time. So it's gonna be different on the server than it is on the client, right?

[00:01:15] Because it's gonna be running Math.random two separate times and React's are gonna get really pissed at us for doing this. So first of all, start and stop this again, which I probably didn't have to. No, I did. Okay, so here, now if I go to landing. Notice that it got really pissed at me here, cuz it said React tried to do this and you messed it up [LAUGH].

[00:01:44] And the way that does this is React has a checksum, it basically hashes your entire app into one checksum and if those checksum don't match up on the server and on the client, It says well you messed it up I'm gonna blow away your entire client and try again.

[00:02:02] So, I said that to address his or her question because you don't wanna be mucking too much on the server with it, unless you're sure that whatever your rendering on the server and whatever you're running on the client is gonna end up being the same. So, all of this to say coming back here let's get rid of this because we don't want that.

[00:02:25] First of all does that makes sense of why you need to make sure that what you're doing on the client and on the server is the same. The reason why is you lose all the performance gains because if you render on the server and then send it down and the checksums match, React does not blow away the DOM and render something new.

[00:02:42] It actually just quietly takes over what's already there. If you mess it up and they are different, Reacts well screw this and blows the entire thing away and creates a whole new thing, which is slower, less performant and kind of just defeating the whole point. Okay, let me let me finish my thought and then I'll address your questions.

[00:03:05] So to answer the question, which I totally sidestepped and I meant to answer is how do you pass stuff in from express to react. It's I mean the wrong one.js. See here I'm passing store and here's stuff to I can actually just as have to render props and then actually get perpetuated down to the client.

[00:03:25] So, you just have to make sure that that ends up both on the client and on the server so that's what I wanted to say. Yeah what's was your question?
>> Speaker 3: So, when I'm on the details page or one of them and I refresh all the styles everything from public errors.

[00:03:43]
>> Brian Holt: The reason you need to change as well as go to index.HTML and put these as slash as well, and actually public as well. Yeah, cuz it's doing relative paths and we can't do relative paths anymore. That's a good catch. Yeah, they need to be /public. The reason I was working before for me is cuz it was cached.

[00:04:09]
>> Brian Holt: So that should work now. I have to restart and stuff.
>> Brian Holt: Just so you know, so if you haven't already do, npm install -g nodemon like this. It's annoying to start and stop your server every time. Nodemon will just do that for you or nodemon. I've heard a lot of people argue how you say this.

[00:04:37] The idea is a demon is something that runs in the background. This is the nodemon right. That's the idea. So I'm gonna say instead of nodeapp.js I said nodemonapp.js. It actually does a watch for you. So any time I change something, it just restarts my server automatically. That's the idea, okay.

[00:05:01]
>> Brian Holt: So now if I refresh this. It should be okay again. I should go to Browse All. Daredevil and refresh, everything should be happy again. Okay, cool.
>> Brian Holt: All right, other questions before I move on?
>> Speaker 1: The question I had queued up was, so were specifically can you not use dynamic values versus where can you use them?

[00:05:28]
>> Brian Holt: I mean that's a far reaching question. The real answer to that question is, if you're gonna be using dynamic values from the server you just have to make sure that they are available in the client too. And there's any number of ways that you can make sure that that's the case.

[00:05:46] Hopefully, that sufficiently vague, but it's also kind of a vague question. So, [LAUGH] just make sure that whatever's available in your node environment. It's tough to say without a concrete example.