React: What's the difference between client/server side react rendering? What's the latter even is?

[hyphen-wrex]

Good day, honest fellows! I'm fairly new to react and single page apps, and I really can't wrap my head around something here.

In the server routing section in README.md of create react app it is stated that we just send the index.html again and again despite accessing different routes.

I guess it is ok to send this file again and again since it is almost empty and we usually only have div tag with id="app" os something.

And so that way react is injecting html that being sent from the server already on the client side right? And building different html file of sorts. And client-side routing is being handled with no caveats either.

So my questions are, sorry there's a lot of them:

• What's the difference in client/server side react rendering? What's server side react rendering even is? Why would one want it?
• How to do client-side routing with it? That's a major one.
• How then client accesses the data? Via api on different route? And for instance Redux reducers would do that kind of work, right?

Help me to understand this please.

[pinakdas163]

React can do rendering of HTML both in server side and client side as it is isomorphic application. Server side rendering is when HTML is created on server and sent to client. Eg: Nunjucks/Express. In client side rendering HTML is created in browser by JS. Ex: Angular.js, React.

Traditionally in client side rendering you see ReactDOM render your target app first and then you render your own app inside that target app. Client sends api requests to server, receives all data that is needed and component is rerendered on the screen again.

In server-side rendering, server handles the initial render when an user first request for your app. When the server receives the request, it renders the required component into an HTML string, and then sends it as a response to the client. After that client does the render on its own.
Server also send the state of yout app along in the response, so the client can use it as the initial state. This is important because, if you preload any data before generating the HTML, you want your client to also have access to this data. Otherwise, the markup generated on the client won't match the server markup, and the client would have to load the data again.

[hyphen-wrex]

@pinakdas163 thanks for the answer!

So difference between client and server side rendering is only in where the DOM gets rendered? And we would want it to be server-side to transfer DOM building operations from client to server to free up client load, am I correct?

But how the routing logic between client/server sides differs then? I guess with React we really don't use server-side routing at all, always giving back a blank index.html file, huh. And the data comes from api routes as json, and React rerenders DOM with that data again. So these are just SPA ways of doing things.

And what I wasn't understanding is that React, or react-router to be precise, routing logic is using different browser API, overriding the one where we request a page per route from server, please correct me if I'm wrong.

[pinakdas163]

Yes, your idea is right. In server side rendering HTML document is prepared on the server and delivered to the browser. So client load is less.
You can use server side routing using react-router too. You just have to set up the react-router inside your server. Once a url request comes, you match the url with the routes. For any match you make component to string and return as response to client.
If you are just using router from the client side, I guess your concern only will be for rendering different components based on url changes. The data can be fetched like the way you said as json and React will rerender DOM with new data again.
So with React, we are no longer navigating between different HTML pages from a remote server instead we change the components on a single page.

[hyphen-wrex]

Ok thanks @pinakdas163, I got the answers I needed to have some kind of overall picture.

To anyone wondering here, other useful materials on the topic are:

• medium article
• github project

[prakharrke]

I am trying to wrap my head around this new concept. A few things that I find difficult to understand are:
When we say server side and client side with React, does it mean that a separate React project is deployed on the server and a separate one on client? Because in development environment, all my files, both Express files and React files reside in the same project. Correct me if I am perceiving this in a wrong fashion. I find it difficult to understand as to how does it work during production deployment.
Thank you

[mitarth]

There is a different project/module for react present inside the main express application. I am saying this because there is a different package.json present in this. We can call it a react client. In this react client we make change in the configuration i.e. package.json to configure it to use a proxy so that it can render the express APIs on the same server since express and react are running on different servers.