QUESTION: How do I pass data to a child container when using server rendering #1
Comments
|
Hello, In order for your ajax data to be reflected in your initial render:
Step 1 will introduce an overhead to your server request, since we have to 'wait' until the data is retrieved from the API call. There could be many ways to achieve Step 2. One of the simplest solution is to pass your data as a prop to If I put these together, my code will be updated as follows: // middleware.js
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
...
} else if(process.env.NODE_ENV == 'production') {
myAjaxCall((ajaxResult) => {
res.status(200).send(`
<!doctype html>
<html>
<header>
<title>My Universal App</title>
<link rel='stylesheet' href='bundle.css'>
</header>
<body>
<div id='app'>${renderToString(<App data={ajaxResult}/>)}</div>
<script src='bundle.js'></script>
</body>
</html>
`);
});
}
...
});
// app.js
render() {
return (
...
<UsersPage data={this.props.data} />
...
);
}Please let me know if this resolves the issue :) |
|
Big thanks for the quick reply! When I switched to rendering the App object (instead of RouterContext) I start receiving this error:
The other thing is that I needs to pass the props.data to the rendered children components. And also, when I look at the network tab in the browser it still seems like the actual content doesn't get rendered, so I guess it's not working yet... It this is getting too specific for you, let me know and I'll just try to figure it out on my own :) Thanks again. |
|
BTW, I saw this post which seems to be trying to solve the same problem, but I'm still trying to understand if it can be done with just using react... |
|
Oops, I think I made some mistake!
You can update the code as follows: // middleware.js
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
...
} else if(renderProps) {
myAjaxCall((ajaxResult) => {
if(process.env.NODE_ENV == 'development') {
res.status(200).send(`
<!doctype html>
<html>
<header>
<title>My Universal App</title>
<link rel='stylesheet' href='bundle.css'>
</header>
<body>
<div id='app'></div>
<script>
window.__AJAX_RESULT__ = ${JSON.stringify(ajaxResult)};
</script>
<script src='bundle.js'></script>
</body>
</html>
`);
} else if(process.env.NODE_ENV == 'production') {
res.status(200).send(`
<!doctype html>
<html>
<header>
<title>My Universal App</title>
<link rel='stylesheet' href='bundle.css'>
</header>
<body>
<div id='app'>${renderToString(
<RouterContext
{...renderProps}
createElement={(Component, props) =>
<Component data={ajaxResult} {...props} />
}
/>
)}</div>
<script>
window.__AJAX_RESULT__ = ${JSON.stringify(ajaxResult)};
</script>
<script src='bundle.js'></script>
</body>
</html>
`);
}
});
}
...
});
// routes.js
class App extends Component {
render() {
return (
<div>
{(this.props.data)
? React.cloneElement(this.props.children)
: React.cloneElement(this.props.children, {data: window.__AJAX_RESULT__})
}
</div>
);
}
}
export default (
<Route path='/' component={App} >
<IndexRoute component={Home} />
<Route path='page' component={Page} />
</Route>
);Then you shoud be able to read |
|
Justin, looks like it's working! I'm going to play with it a little tomorrow just to make sure I'm not missing anything. I'm somewhat new at this... Thanks a lot! |
|
No worries :) Let me know when you want to close it. |
|
Justin, Also, I have a few additional questions concerning the implementation that are not relevant here. Is it ok if I send you a separate email with my questions? Thanks, |
|
The global variable is necessary for storing the ajax result that will be used as a data prop for client-side rendering. Client-side rendering is a whole new render from the scratch. |
|
Understood, but in PRODCUTION mode it's not being used. The App component only uses it in debug mode (when the props.data is unavailable) |
|
No, the initial render in production mode is just a string, so props.data would still be unavailable. That's why I said client-side rendering is a whole new render from scratch (it doesn't get any states, props or event handlers from server-side rendering) |
|
OK. I think I understand now. |
|
No worries :) I'll close the issue then. You can open a new issue or email me for other questions! |
Hi,
Thanks for the post and the example.
I'm using your boilerplate code in my app and the only thing missing is that I need to pass some data (result of an ajax call) to one of my containers (to fix SEO issues).
The app's stucture is something like this:
and I need to pass the data to the the UsersPage container.
There are a lot of examples out there, but most contain usage of jade or other node related objects and your example is much more clear.
Could you assist?
BTW, I'm not using the Redux part just simple data binding...
Thanks in advance.
The text was updated successfully, but these errors were encountered: