Is it possible to use Server Side Rendering for components that you want to pass children to? #71

Activity

1. markfinger commented on Oct 19, 2016

   

   markfinger

   on Oct 19, 2016

   Owner

   More actions

   You could implement something like that with React components if you use the render method to handle the instantiation of - and branching between - the child components, but it'll probably involve jumping through a number of hoops and seems a bit hacky.

   An alternative might be to re-implement the render server's js file with your own. If you're interested, it's pretty succinct and should be easy to hack on
2. markfinger commented on Feb 27, 2017

   

   markfinger

   on Feb 27, 2017

   Owner

   More actions

   I've linked this question from the README. https://github.com/markfinger/python-react/blob/master/README.md#how-do-i-pass-child-components-to-the-root-component

   Everyone should feel free to continue the discussion, if so inclined.
3. markfinger

   closed this as completedon Feb 27, 2017
4. ryapapap commented on Jun 6, 2017

   

   ryapapap

   on Jun 6, 2017

   More actions

   I was able to get this to work, but would be open to any suggestions if someone knows a better way. I modified the render server's js file from:

   app.post('/render', function(req, res) {
   	reactRender(req.body, function(err, markup) {
   

   to

   app.post('/render', function(req, res) {
           var component = require(req.body.path);
   	reactRender({
                props: { children: component.default(JSON.parse(req.body.serializedProps)) },
                toStaticMarkup: false,
                path: '<path_to_my_main>',
     }, function(err, markup) {
   

   I came up with this after looking at the code inside react-render, which is a bit more defensive (I'm not using any of the custom config options, so ymmv with this sample).
5. markfinger commented on Jun 7, 2017

   

   markfinger

   on Jun 7, 2017

   Last edited by markfinger

   Owner

   More actions

   @ryapapap that seems pretty reasonable.

   The primary benefits of react-render is require caching (reduce IO) and some compatibility for different React versions. There's no massive benefit to using it, other than excising some boilerplate from the render server's script.

   If you want more granular control of the render process, but still use the req/res conventions + handling in python-react, you could always just remove the reactRender call and replace it with your own React.renderToString call. You'll probably want to replicate some of the React Factory stuff (I think it's a one-liner and should be easy to find in react-render's code or React's docs) as I think that avoids re-running some of React's init code. Once you've got a reference to the component factory, it should be trivial to pass in any child components you like.

   Either way, @ryapapap's code above should work well enough for most purposes.
6. ryapapap commented on Jun 7, 2017

   

   ryapapap

   on Jun 7, 2017

   More actions

   That makes a lot of sense, thanks for the info!