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, v3 (feat. Redux, Router & Flow) course:
The "Separating the Client and Server Code" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

For Universal Rendering to work, the application must run both on the server-side and client-side. Brian spends a few minutes separating the client and server aspects of the application with the core logic of the application now residing in an App.jsx file.

Get Unlimited Access Now

Transcript from the "Separating the Client and Server Code" Lesson

>> Brian Holt: So it's really great if we can make React router handle both server-side routing and client-side routing. And the answer is, you can, that does work. So let's go ahead and go do that.
>> Brian Holt: So there's a couple things that we're gonna have to do first.
>> Brian Holt: So open your app.jsx.

>> Brian Holt: The thing that we have here on the outside is browser router, right? As you might imply by the name, browser router depends on a browser, right? And if we try to run browser router in node, node doesn't have document, it doesn't have window, it doesn't have all these things.

[00:00:40] So if you try and run browser router in node, it's gonna fail. So in other words, this is going to be a client side concern, so we're gonna have to move it to client app, right? So go ahead and take out BrowserRouter.
>> Brian Holt: And so provider is the top component and that's fine.

[00:00:58] Redux works both in node and in the browser. Get rid of BrowserRouter up here.
>> Brian Holt: And then go up to clientapp.jsx and what you're going do here is you're just going to import BrowserRouter from 'react-router-dom', okay? And then you're just going to surround app with BrowserRouter.
>> Brian Holt: And that's it.

>> Brian Holt: You can put that on multiple lines if that makes you feel better.
>> Brian Holt: Like that.
>> Brian Holt: So now BrowserRouter is only going to be rendered on the client. That frees us up on the node side to use a different kind of router. Which is gonna be I think, is it the static router?

[00:01:59] Something like that, we'll figure it out.
>> Brian Holt: Okay, the next thing I want you to do is I want you to open your index.html, which we haven't edited for a long time.
>> Brian Holt: What we wanna do here is we wanna edit this so that,
>> Brian Holt: This is going to be used as the template as well.

[00:02:28] And there is 10 billion ways to do the template here, and I'm not actually super concerned of how you choose to do the templating, right? We need to use this and we need to insert mark up into this, right, in order for this to work. I'm going to use low dash templating just because it's really simple.

[00:02:44] But again, you could use handle bars, you could just write template strings yourself. There's a million ways to do it and it's really not important. So low dash templates are really easy. I'm just gonna say this, which is gonna be <%=. I'm gonna body here, and then I'm going to hit %>.

>> Brian Holt: And this is just gonna say whenever I go to render this template, this going to put body in there, right?
>> Brian Holt: You can actually use react itself to do templating here, that's fine as well. It's just a little bit more work than I care to do right now.