adam-26/react-html-metadata

Add SSR rendering and lifecycle method support

Opened this issue · 3 comments

adam-26 commented

Investigate adding support for SSR and client lifecycle method rendering from this repo.

  1. Refactor withReactRouterMetadata() HOC from react-router-metadata into this repo.

  2. SSR: look at accessing the metadata instance after renderToString() has been invoked, and determine if its possible to render and inject the metadata?
    NOTE: This would not support streams on the server, but I'm ok with that. To utilize streaming, no Component code changes would be required, just a few small SSR code changes - and switching to react-router-metadata, or other implementation.

adam-26 commented

For example: export a util method for SSR string rendering with metadata:

// Where the 'App' uses react-html-metadata

export function renderToStringWithMetadata(App) {
  // Configure the Metadata instance so the <Html> tag does NOT render on 'renderToString()'
  const md = Metadata.createNew();

  // assign md prop to the app before rendering to string
  // Only the <body> CHILDREN should be rendered here
  const markup = renderToString(App);

  // Use <Html> to render the metadata and inject the <body> children
  return md.renderToString(markup);
}

This is just a rough idea for now. But in theory shouldn't be a problem to implement.

oyeanuj commented

@adam-26 thank you for for creating these libs! Just to confirm, to implement in a streaming SSR setup, once just needs to use react-router-metadata?

adam-26 commented

@oyeanuj , no - you still need to use this package.

You can see an working example here

FYI, I have not updated these packages for over a year and I do not plan to maintain the other react-router-metadata or other *-dispatcher packages. The API is clunky and needs to be re-designed. (I'm happy to update and apply PRs to this repo - this repo is still useful.)

With the introduction of the React hooks API combined with the fact that the React server rendering is currently in the process of being completely re-written, it should be much easier to re-use this type of logic in the near future (hopefully).

I recommend instead you look here. You MAY be interested in this example of a different package, react-dom-html-tags for a clean syntax defining HTML metadata. The syntax is much better and easier to maintain - you just include <Html> tags in any React component, and it will render the <head> metadata correctly.

However - I've only published react-dom-html-tags in BETA because it has a few minor bugs and I don't have time to fix them right now (It does have many tests though). I haven't published the docs on the readme, but you can read the documentation here.

Let me know if you have questions.