alexeyraspopov / react-coroutine

Make your async components compact and descriptive by leveraging the power of the language features
https://react-coroutine.js.org/
MIT License
263 stars 11 forks source link

Server side rendering #3

Open streamich opened 6 years ago

streamich commented 6 years ago

Does it work on server side?

alexeyraspopov commented 6 years ago

Unfortunately, I don't have an example of completed server-side rendering that would include React Coroutine. I don't use server-side rendering at work, so wasn't able to have some focus/environment to work on this exact task.

Currently, I'm trying to create an example using new Context API, Cache Provider, and React Coroutine. This doesn't seem to be trivial so it could be added to the docs, but I'll push it as a soon as code is polished enough.

I think, the bigger limitation in using React Coroutine is the fact it needs async render to string supported by React. And that's something is not supported at the moment, from what I know.

Are there any special techniques you know that could potentially work with React Coroutine?

streamich commented 6 years ago

Are there any special techniques you know that could potentially work with React Coroutine?

For server side rendering it could render one page to string more than once, effectively "resolving" the promises, or in react-coroutine case, looping though the async iterator. Similar to how react-resolver does it.

Like, first time you renderToStaticMarkup without any data and collect all async Promises/generators.

Resolve them and then do a proper render with the fetched data.

Evgenyx82 commented 6 years ago

my 5 cents

imagine compA should fetch data like { id: 1, name: name, extra_key: 2 } compB persist of compA extra_key, etc compA-compZ...

then as suggests streamich it should always re-render while whole tree will be processed...

p.s. still waiting async renderer too) i believe then code splitting + server side rendering become true without headache

max-mykhailenko commented 5 years ago

Deep async generator require to run render several times. I didn't catch how we can move deep API call to the top level using context and only one additional render. Overall idea similar to React suspense and I think we should just wait it.