RickWong/react-transmit

High Level: Does transmit support server side data retrieval & rendering?

elverskog opened this issue · 2 comments

elverskog commented

First off, thanks for the amazing work on this and your starter kit.

I'm trying to add server-side retrieval to a Transmit.createContainer. Using your starter kit as a base. Testing for server vs client or using isomorphic-fetch. Does it support server-side (async) data retrieval, pre-render?

Doing so always passes nothing to the components props (even though I can log JSON that came in). Client side works fine. I've tried methods that return a promise or just raw data but nothing is passed to props. The only way I have gotten it working is to pull the initial data before renderToString is called (in server.js) and passing it along via Transmit.renderToString(Handler,props)...

Also sending the props data to the markup in Transmit.injectIntoMarkup(output, props, ...). This isn't very componentized though.

btw - You referenced react-async in the docs which seems to offer this (although I haven't tried it).

Any ideas?

elverskog commented

Thanks. What you sent is what I was using. Again, I used the starter kit as my base. I suspect I am doing something stupid or am not explaining myself very well.

Works fine for client side render (with or without the data injection into __reactTransmitPacket).

Server-side the app seems to serve HTML before the data is retrieved inside a given component's Transmit.createContainer. In other words, the initial HTML served never has the results included (say a list of people). Just the DIV container. I am looking to render the full contents server-side for SEO.

The issue, for me, may lie in ReactData. This was always was empty for me.

In the weird model I have working (where I call the router after I have my data) , I actually needed to send a seperate props down the chain. Like...
Transmit.renderToString(Handler,props).then(({reactString, reactData}) => {
...
output = Transmit.injectIntoMarkup(output, props, [${webserver}/dist/client.js]);

Anyways. I'll keep banging away at it. Thanks again.