Two steps Server Side Rendering

[hitmands]

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
Imagine you have a component which triggers an api request on its componentWillMount method, then, it updates its internal state and you want to render the version of the component after this operation.

You have to call renderToString twice

// pseudo code
Promise
  .resolve(renderToString(<App />)) // this triggers component lifeCycle events
  .then(() => waitForSomething()) // wait for results
  .then(() => renderToString(<App />)) // render the correct version of the app
  .then(html => res.html(html))
;

What is the expected behavior?

const mounted = mount(<App />); // trigger component lifeCycle events
// then wait and perform async operations
res.html(mounted.renderToString())

There are many ways to achieve this, static methods on Component, etc...
By the way, they seem to be tricks...
Having a proper api would be better.

[mijamo]

I suspect you wanted to say componentWillMount as componentDidMount is not called on the server side ?

The thing is you should probably not have API request in the lifecycle if you have server side rendering because otherwise you will request the same thing twice (once in the server, once in the client).

This is the reason why static methods are used instead most of the time, but how it works really depends on how you intend to use server side rendering and your react environment (ex: react-router, helmet for head management etc.). For instance if you use react-router with a static configuration (in v4) you don't actually need to do anything react-related to get the data.

So I am not really sure if there is a good improvement possible INSIDE react as of today.

[hitmands]

Hi,

Thanks for the advice, it was a mistake (I meant componentWillMount).

The thing is you should probably not have API request in the lifecycle if you have server side rendering because otherwise you will request the same thing twice (once in the server, once in the client).

If you don't make api requests in serve side, then, I think that you don't even need for ssr because the version of your app will always be the same...

I need them for SEO purposes, I need to print my product list and I won't have double round trips in client because I will serve them as default state for redux.

I really think that static methods are just tricks... Is interesting what saga does here:

[mijamo]

I said no API request in the lifecycle, static methods allow you to make them without having them in any lifecycle.

With react-router, you could even have them completely separated from your components, for instance as simple async action creators in the route configuration (which is what I personally do).

There might be something to do on the react side but I have yet to see any proposal that would really help on that domain.

[gaearon]

This is a variation on #1739. Let's keep the discussion there.