{"action":"created","issue":{"url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/208","labels_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/208/labels{/name}","comments_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/208/comments","events_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/208/events","html_url":"https://github.com/kriasoft/react-starter-kit/issues/208","id":101135975,"number":208,"title":"wait for server data on Initial load","user":{"login":"simtechmedia","id":2899548,"avatar_url":"https://avatars.githubusercontent.com/u/2899548?v=3","gravatar_id":"","url":"https://api.github.com/users/simtechmedia","html_url":"https://github.com/simtechmedia","followers_url":"https://api.github.com/users/simtechmedia/followers","following_url":"https://api.github.com/users/simtechmedia/following{/other_user}","gists_url":"https://api.github.com/users/simtechmedia/gists{/gist_id}","starred_url":"https://api.github.com/users/simtechmedia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/simtechmedia/subscriptions","organizations_url":"https://api.github.com/users/simtechmedia/orgs","repos_url":"https://api.github.com/users/simtechmedia/repos","events_url":"https://api.github.com/users/simtechmedia/events{/privacy}","received_events_url":"https://api.github.com/users/simtechmedia/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-08-15T03:29:22Z","updated_at":"2015-08-17T10:19:41Z","closed_at":null,"body":"Hey all, \r\n\r\nI know this is a common scenario where people wishing to do isomorphic react want to wait for external data before initial load, has anyone been able to achieve this with the starter pack? I've been goggling around for hours without much success.\r\n\r\nThe scenario I want to achieve is that on initial load, wait for server JSON data coming from MongoDB before rendering, that way indexing can be done with data on the page, and there's no second call to get the data after initial load then business as usual once the initial load is done .\r\n\r\nCheers"},"comment":{"url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/comments/131767728","html_url":"https://github.com/kriasoft/react-starter-kit/issues/208#issuecomment-131767728","issue_url":"https://api.github.com/repos/kriasoft/react-starter-kit/issues/208","id":131767728,"user":{"login":"lehneres","id":7437288,"avatar_url":"https://avatars.githubusercontent.com/u/7437288?v=3","gravatar_id":"","url":"https://api.github.com/users/lehneres","html_url":"https://github.com/lehneres","followers_url":"https://api.github.com/users/lehneres/followers","following_url":"https://api.github.com/users/lehneres/following{/other_user}","gists_url":"https://api.github.com/users/lehneres/gists{/gist_id}","starred_url":"https://api.github.com/users/lehneres/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lehneres/subscriptions","organizations_url":"https://api.github.com/users/lehneres/orgs","repos_url":"https://api.github.com/users/lehneres/repos","events_url":"https://api.github.com/users/lehneres/events{/privacy}","received_events_url":"https://api.github.com/users/lehneres/received_events","type":"User","site_admin":false},"created_at":"2015-08-17T10:19:41Z","updated_at":"2015-08-17T10:19:41Z","body":"in my server.js I have a route (or middleware? not sure about the naming):\r\n\r\n````\r\nserver.get( \"/hotel/:uid\", async( req, res, next ) => {\r\n    try {\r\n        const hotel = (await nekst.inflate( req.params.uid )).hotel;\r\n        const place = (await nekst.getPlace( hotel.locationId )).place;\r\n        const blog  = await nekst.getBlog( place );\r\n\r\n        req.data = {hotel, place, blog};\r\n\r\n        next();\r\n    } catch ( err ) {\r\n        next(err);\r\n    }\r\n} );\r\n````\r\nfinally you could put this date into your template\r\n````\r\nrouter.dispatch( {path: req.path, context}, ( state, component ) => {\r\n            data.body    = ReactDOM.renderToString( component );\r\n            data.css     = css.join( '' );\r\n            data.hotel  = req.data.hotel;\r\n            data.place = req.data.place;\r\n            data.blog  = req.data.blog;\r\n        } );\r\n\r\n        const html = template( data );\r\n\r\n        res.status( statusCode ).send( html );\r\n````\r\n\r\nin your html template:\r\n\r\n````\r\n <script>\r\n        var hotel = <%= JSON.stringify(hotel) || JSON.stringify({}) %>;\r\n        var place = <%= JSON.stringify(place) || JSON.stringify({}) %>;\r\n        var blog = <%= JSON.stringify(blog) || JSON.stringify({}) %>;\r\n    </script>\r\n````\r\n\r\nwell, this is working, but I do not know for sure if it is good practice to store the date like this in the request. You could of course use any other global object as \"transporter\" but you would have to make sure it is \"thread safe\" or what ever has to be done in Javascript (which is not as you might see my *homebase*)"}}