Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

handling page title and meta #82

Closed
benbonnet opened this issue Sep 14, 2015 · 2 comments
Closed

handling page title and meta #82

benbonnet opened this issue Sep 14, 2015 · 2 comments

Comments

@benbonnet
Copy link

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 ?
@ericclemmons
Copy link
Owner

@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:

    1. In server.js, you'll initialize your dispatcher, stores, or state tree (if you're using Redux or something), which should include a DocumentStore or MetaStore or whatever you'd like to call it.
    1. When rendering your components/handlers, you can do things like:
@context("dispatcher")
@resolve("title", ({ dispatcher }) => dispatcher.DocumentActions.setTitle("My Page Title"))
    1. After rendering, in server.js, you'll be able to use this output within the ES6 template:
<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.

@ericclemmons ericclemmons mentioned this issue Sep 14, 2015
Open
@benbonnet
Copy link
Author

thanks a lot lot for your reply;
ended up making react-document-title, but I'll defintely upgrade this way

too bad react started out with "fake isomorphism" — your component render on the server but… where's the data ? At some point I felt mislead by this buzzword

Your piece of work (or the pattern it implies) should be the norm
I'm doing great improvements since using it. thx again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@benbonnet @ericclemmons