Asynchronous SSR-ready Document Head management for React 16.3+
This module allows you to define
document.head tags anywhere in your component hierarchy. The motivations are similar to react-helmet in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies (it does not use react-side-effects) and it should work fine with asynchronous rendering; the only requirement is React 16.3+.
npm i react-head
yarn add react-head
How it works
- You wrap your App with
- From the server, you pass
- Then call
renderToStaticMarkup(headTags)and include in the
<head />block of your server template
- To insert head tags within your app, just render one of
<Link />, and
<Base />components as often as needed.
On the server, the tags are collected in the
headTags array, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).
You can view a fully working sample app in the /example folder.
Wrap your app with
<HeadProvider /> on the server, using a
headTags array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.
;;;;// ... within the context of a request ...const headTags = ; // mutated during render so you can include in server-rendered template laterconst app =;res;
There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the
;;const App =<HeadProvider><div className="Home"><Title>Title of page</Title><Link rel="canonical" content="" /><Meta name="example" content="whatever" />// ...</div></HeadProvider>;
Please follow the contributing docs