CODEWITHSUNDEEP
reactjsisomorphic-javascript
sddonne
sddonne

Reputation: 123

What happens with the state in a React isomorphic App

I am building an isomorphic app with React that must support users without JS.

I am new in this technology and I have a basic doubt: The server can store the components states to emulate what React does in the client-side?

I imagine this flow when the user dont have JS:

  1. The user click a button and send a request to the server.
  2. The server recovers the state of the app and makes changes in it.
  3. The components listen this changes and are rendered again.

Is it correct?

Upvotes: 1

Views: 793

Answers (1)

mfrachet
mfrachet

Reputation: 8922

Assuming that you're using react-router :

The server aims to initialize your state, to provide it the default minimum values necessary to make your application work while getting an url.

For example, if you have an application in which you want to display a user list, let say on /users URL, when you'll send your first request, the server will store the users in the react state.

After that first load, you'll be working on the client side using react-router, and making XHR request.

However, if you refresh your page, the process will start again : first load initializing the state and then client side navigation.

EDIT : Explanations =>

When you want to use react on the server, this means that you use a Nodejs server. The fact is that react-dom provides a method called renderToString that transform a react jsx component into standard HTML.

This aims to load the first call faster

Why ?

When you load a "big" JS application on the client, you have some delay time, the time your browser needs to download your JS bundle.

Server side rendering aims to avoid that behaviour, or at least, to gives the feeling that the app starts faster.

In no case you can only use react, even if you use your server side renders. Why ? . Because your events on buttons, or asynchronous load on client, or keypress are in JS language.

Upvotes: 1

Related Questions