ericclemmons
commented
9 years ago @bbnnt You're right in that <title> and <meta> tags are outside the scope of this project (since this really solves the async rendering/loading issue only to stay small & focused).
However, I've found great success with leveraging Flux (or similar) to accomplish this.
It works this way:
-
- In
server.js, you'll initialize yourdispatcher,stores, orstatetree (if you're using Redux or something), which should include aDocumentStoreorMetaStoreor whatever you'd like to call it.
- In
-
- When rendering your components/handlers, you can do things like:
@context("dispatcher")
@resolve("title", ({ dispatcher }) => dispatcher.DocumentActions.setTitle("My Page Title"))-
- After rendering, in
server.js, you'll be able to use this output within the ES6 template:
- After rendering, in
<html>
<head>
<title>${dispatcher.DocumentStore.getTitle()}</title>This works well this way because you never want to render the entire document with React, since analytics, extensions, & other things often modify the DOM out from under you.
When I complete the Redux example (#61), I'll be sure to show this as well.
Frankly, I don't care for things like react-document-title and react-helmet because they have the potential for memory leaks and expect the entire render process to be synchronous, which is not the case anymore.
benbonnet
That's might be more of a stackoverflow question, but I could not find a good answer to adapt it using this tool.
I was wondering how one would do with react-resolver to handle dynamic page title, or if it had to be handled somewhere else than from within the scope of this tool.
I played around with react-document-title which seemed pretty cool, but so far, server-side, the title results as undefined.
Should the server rendering be moved to a component (as opposed to the examples, where the html base is located in server.js) ? In that case, how to handle the returned payload ?