What is React Helmet?
React Helmet can be termed as the document head manager for React-based applications. Using it, it becomes very easy for developers to update meta tags present on the server-side and the client-side. This library can be termed perfect for applications where SEO plays a crucial role. It is also a media-friendly library with different dependencies and features that make its usage easy in any React app. We will study all the aspects in this tutorial and see how you can add React Helmet into your project.
Before moving any further, we need to install React Helmet using the traditional and most effective npm approach. We will first initialize a new React project using some commands and start the development process when the server is ready.
To install and initialize React Helmet, follow the below command.
Ensure that the system port 3000 is occupied, and then you can get straightforward head over to http://localhost:3000 and see your app.
Newly Created React App
We might have known that, like most SPAs available, our application will have a default <head> element. This can be easily verified if we move to the browser for inspection and press F12 in Chrome or use Ctrl+Shift+C in the Firefox browser. Analyzing the content on Chrome, we might see what the <head> element looks like.
There's another way to manage the <head>. This is done by updating the public/index.html directory but should not always be an alternative since it is a bad practice. After this step, we need to install and make use of React Helmet in our project.
Installation and Setup
React Helmet can be installed into your React project through Yarn or npm using the command given below.
The next is to follow the process of importing the Helmet component. Once done, we can easily add elements to the <head> of the document. See how the following step is implemented in the below code snippet.
As soon as the above code snippet is updated to the directory src/App.js file, we will notice the changes in our React application.
In this code snippet, to keep the understanding level easy, we have used only <title>, <html> and <meta> tag elements for description and some amount of theme color is also used for the other elements like base, meta, link, script, etc. These elements are generally treated as the children of Helmet. Below is the example where we can see the attributes that have been defined for the body tag and html tag.
Note: There is ambiguity in the above example because we may not know whether the preference would be given to the Child or Parent.
To clarify this, the preference is given to the child component. Consider the below code:
Now, to import the child component, i.e. the Child.js file, to the parent component, i.e. App.js file, we must not forget to change the document's title according to the child component. But, it is also important to understand that the metadata and the theme color cannot be overwritten. The demonstration for the same is shown in the code snippet given below.
Another instance to consider here is that the one occurring later will always be given the utmost preference between two child components. For instance, consider two child components <Child1> and <Child2>, then the <Child2> will be given the preference and vice-versa. The demonstration to support this statement is given below.
It is evident from the above code that the title will be set according to the <Child2> component. If the order is reversed, then the <Child1> will be set to the preference. This can be shown using the code snippet shown below.
React Helmet with SSR integration
As we previously discussed, React Helmet is mostly nominated to be the best partner for app rendering residing in the server-side of the application; you can easily refer to the terms by setting up a sample React SSR application. Thus, in the application's server-side code, just after the ReactDOMServerr's renderToString or renderToStaticMarkup, we need to apply the method of render static in the Helmet. To illustrate how it is done, consider the below code snippet.
It is important to understand that in every Helmet property, there is a method of toString(). This method is mainly used inside the HTML string. It is also an instance of Helmet's render static that generally returns with all the properties covered like the script, link, title, etc., and all of these properties have default toString() method contained in them.
It might not always be a good option to work synchronously to proceed with the React Helmet's SSR implementation. If we are open or bound to make asynchronous requests like streaming, the React Helmet would lead to potential threats and errors. Hence, to cope up with this issue, we use the react-helmet-async method. This method solves this problem by forking React Helmet explicitly. To install it, we need to run the following terminal command in the node environment.
After running this command, we need to be assured to keep everything except just using HelmetProvider so that the React tree gets encapsulated on both the server-side and the client-side. The simple demonstration for this is shown below.
React Helmet & React Router
React Helmet works great if the application being build uses React Router for routing. One hook associate with it is that we need to use React Helmet with every Router, so the routes remain intact, and this can be demonstrated using the below code snippet.
This is how routing is done using React Helmet and React Router, and also, the method can be used as many routes as possible.
In this tutorial, we learned how to install, set up and use React Helmet. React Helmet is a powerful library mainly used as the document head manager that brings our SEO to the top of the web page. It is small and convenient to use, and if the application is built with the intent to remain at the top charts, it outlasts better than any library in its class.