search

andreypopp / react-quickstart

[DEPRECATED] React project template with server-side UI rendering and routing
371 stars 47 forks source link

Inserting page data serverside using getInitialStateAsync. #19

Closed chrisdew closed 10 years ago

chrisdew commented 10 years ago

On https://github.com/andreypopp/react-quickstart/blob/master/client.js#L42 you use 'getInitialStateAsync' to load the data (via superagent (AJAX?)) as soon as the page loads in the browser.

As the page is initially rendered on the server, how could I provide the intial data during the server-side rendering (needed for SEO)?

I realise that I will need to split the API into functions which return Javascript (then wrap them into a http API for superagent), but I don't know what to put into getInitialStateAsync.

The initial data for the page can only be retrieved async (it comes form a DB). I tried using superagent in getInitialStateAsync, but the page tried to render before the state was available.

andreypopp commented 10 years ago

On initial page load it should render only once with data already available (it renders on server and embeds state as JSON). Do you a different behaviour?

chrisdew commented 10 years ago

No, now I've dug more deeply, the getInitialStateAsync is being called in client.js on the server-side.

The issue must be somewhere in my code (where the getInitialStateAsync is not being called).

Is there any limitation that would cause deeply nested classes' getInitialStateAsync to not be called at all during server-side rendering?

chrisdew commented 10 years ago

I've found the issue, I needed to use:

mixins: [ReactAsync.Mixin],

in my React.createClass.