{"action":"opened","issue":{"url":"https://api.github.com/repos/theKashey/react-imported-component/issues/51","repository_url":"https://api.github.com/repos/theKashey/react-imported-component","labels_url":"https://api.github.com/repos/theKashey/react-imported-component/issues/51/labels{/name}","comments_url":"https://api.github.com/repos/theKashey/react-imported-component/issues/51/comments","events_url":"https://api.github.com/repos/theKashey/react-imported-component/issues/51/events","html_url":"https://github.com/theKashey/react-imported-component/issues/51","id":394938880,"node_id":"MDU6SXNzdWUzOTQ5Mzg4ODA=","number":51,"title":"Strange SSR issue","user":{"login":"xiao-hu","id":6172805,"node_id":"MDQ6VXNlcjYxNzI4MDU=","avatar_url":"https://avatars1.githubusercontent.com/u/6172805?v=4","gravatar_id":"","url":"https://api.github.com/users/xiao-hu","html_url":"https://github.com/xiao-hu","followers_url":"https://api.github.com/users/xiao-hu/followers","following_url":"https://api.github.com/users/xiao-hu/following{/other_user}","gists_url":"https://api.github.com/users/xiao-hu/gists{/gist_id}","starred_url":"https://api.github.com/users/xiao-hu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xiao-hu/subscriptions","organizations_url":"https://api.github.com/users/xiao-hu/orgs","repos_url":"https://api.github.com/users/xiao-hu/repos","events_url":"https://api.github.com/users/xiao-hu/events{/privacy}","received_events_url":"https://api.github.com/users/xiao-hu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-12-31T07:04:35Z","updated_at":"2018-12-31T07:04:35Z","closed_at":null,"author_association":"NONE","body":"Hi,\r\n\r\n  I followed the instructions for SSR (not streaming) in README. I only replaced `ReactDOM.render` with `ReactDOM.hydrate`, e.g.,:\r\n\r\n```\r\n  import { rehydrateMarks } from 'react-imported-component';\r\n\r\n  // this will trigger all marked imports, and await for competition.\r\n  rehydrateMarks().then(() => {\r\n    ReactDOM.hydrate(<App />,document.getElementById('main'));\r\n  });\r\n```\r\n\r\nI saw a react warning `react-dom.development.js:180 Warning: Did not expect server HTML to contain a <div> in <div>.` indicating some difference between the client/server side rendering. \r\n\r\nSo I went ahead and investigate what the difference:\r\n```\r\n  import { rehydrateMarks } from 'react-imported-component';\r\n\r\n  // this will trigger all marked imports, and await for competition.\r\n  rehydrateMarks().then(() => {\r\n    const divMain = document.getElementById('main')\r\n    console.log(divMain.innerHTML); #server side result looks OK\r\n    ReactDOM.hydrate(<App />, divMain);\r\n    console.log(divMain.innerHTML); #async components are not rendered\r\n  });\r\n```\r\nIt turns out that the async components are not rendered. I passed in empty `options` to `importedComponent `. The server side generated the marks:\r\n`<script>window.___REACT_DEFERRED_COMPONENT_MARKS=[\"1v1uipo\"];/*stream 0*/</script>`.\r\n\r\nOther than this, everything else worked just fine.\r\n\r\nChecked the process against README a few times and still couldn't figure out why :(.\r\nDo I need to set`options.render` or use `whenComponentsReady`?\r\n\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"xiao-hu"}}