2

I deployed a react app with a Home page, and some other pages.

On the Home page, i have a class named HomeTitleContainer to display a certain style.

HomeTitleContainer class present once in the project

When I do this on index.js :

ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, rootElement);

I got a normal rendering.

But when I used hydrate() instead of render() like this :

ReactDOM.hydrate(<React.StrictMode><App /></React.StrictMode>, rootElement);

I have all my pages contained in a container with HomeTitleContainer style, which never appeared before this modification.

HomeTitleContainer class is present everywhere

I used hydrate() because i would like to improve SEO because with reactJS Google doesn't see any of our pages otherwise...

Can anybody help me on that please ?

jozinho22
  • 459
  • 2
  • 7
  • 24
  • I had a similar problem because the content returned by server wasn't **exactly** the same as the content returned by `hydrate` (render). You sure that something like this doesnt occur in your case? – kind user Oct 26 '22 at 00:19
  • Could it be a routing issue? I don't know if you are using `react-router-dom` you might have additional setup pass the which page it should render. – denislexic Oct 27 '22 at 21:48
  • @kinduser It's probably the same problem as you – jozinho22 Nov 14 '22 at 18:43

1 Answers1

1

Are you sure that your app is not CSR (Client-Side Rendering), but SSR (Server-Side Rendering) app?

To make your app to be SEO-friendly, i.e. to let the web crawlers read and retrieve your app pages content and to let this content to be indexed later, it's highly recommended to develop a SSR app rather than CSR. Of course, Google crawler started to render apps with dynamically generated html content a long time ago (i.e. apps written in JavaScript frameworks and libraries, such as Angular and React, which are mostly SPAs (Single Page Application)). But static pages (SSR or SSG apps pages) may get higher scores in search results, for the reason that to render your CSR app, the crawler needs download your JavaScript files first and then render content with them, so obviously it takes some time (~5 secs) and this factor can also matter to get a higher spot in SERPs.

For information, The hydrate is tool that helps to attach event listeners to the markup sent by server. This page (html markup) is like static page, which is already rendered on the server side, so crawlers can easily read and retrieve a meaningful content for SEO. Without listeners attached, your app is equal to an html page where you can't do anything, any action on user click and etc., so it's like a page with JavaScript disabled or page without JavaScript (without code in <script> tags) at all.

You can also read more about the concepts and mechanisms below:

Understanding Hydration in React applications(SSR)

ReactDOMServer

What's the difference between hydrate() and render() in React 16?

flosisa
  • 189
  • 7
  • My site is a CSR, because it has only reactJs and everything is done on the client-side. However, when I use hydrate instead of render, it makes some difference, it keeps the render of the Home page. I used react-spa-prerender which generates html file and they recommand to use hydrate afterwhile. – jozinho22 Nov 14 '22 at 18:42