isomorphic react... best practise for content


(Crazyx13th) #1

Hi there!
At the moment I have a big headache because of setting up our company-page to level “next”. I have build a small isomorphic react application. I render some text on the server-side and the same component is used inside the client… this works.

BUT, if I render the text only at the server-side, after loading the text will be removed from the client because at the client you have a different state (props.children is empty).

In many examples you see somthing like windows.$REDUX_STATE = … to sync the state between the “two sides”. This makes mostly sense for me… but not for the hole copytext, or?! what could be a good practise? can I get the “pre-state” from this component (before client-react removes my text)?

Hope someone had an idea, thx!

Cya crazyx13th


(Jakob Lind) #2

If you try to render a simple div, you would see that it renders the content on both client and server.

You don’t need to have all content in Redux state. I agree it doesn’t make sense to put all copytext in the Redux state. Just put it straight in the JSX.


(Crazyx13th) #3

hey,

you mean static text? but than the text is inside the client-js.
Best solution for me would be at server-side rendered like this:

<myComponent>... my large text ...</myComponent>

At client.js only empty

<myComponent></myComponent>

and combine both with autofill this.probs.children = '… my large text …'
but at the moment he removes the inner children after loading client.js :-/

thx
greeting