0

Long story short I have strings that contain HTML which are downloaded before a production build from a secure server. The framework we're using is React with Gatsby and typically you would just do the following:

<div dangerouslySetInnerHTML={{__html: '<p>My Stuff</p>'}}></div>

Which works fine, the main problem is for SEO purposes we want the html to be compiled into html rather than being rendered with Javascript.

Seeing as it's already HTML is there a way I can disable the protection inside react so these strings aren't escaped by default and become regular HTML in the production build?

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
li x
  • 3,953
  • 2
  • 31
  • 51
  • maybe you could find some useful information here https://stackoverflow.com/questions/44643424/how-to-parse-html-to-react-component – Raden Kriting Jul 05 '21 at 15:48
  • Are you rendering that react on the server or on the client? – Charlie Bamford Jul 05 '21 at 16:10
  • On the client @CharlesBamford – li x Jul 06 '21 at 07:28
  • @RadenKriting I've read this, but it doesn't solve my issue. It still requires javascript to load and render my string as html as react escapes it. – li x Jul 06 '21 at 07:29
  • All the pages are Server Side Generated when you build a Gatsby site so it will "become" html. Check your page with js disabled to see the result of the pages generated server side. – Benedicte Raae Jul 06 '21 at 18:14

3 Answers3

0

Not practically, no. It's important to distinguish a <div> in a .jsx file from a <div> in html. If you look at the compiled output of the jsx, it will reveal what's really going on. If you transpile a react component containing <div>Hello world</div>, you'll get a function call along the lines of _react.createElement("div", null, "Hello world"). Anything that is put into the body of the div will also be inserted into it as JSX elements. The dangerouslySetInnerHtml prop is there to tell React that the value is actual html that you trust. However, even if there were an option other than dangerouslySetInnerHtml, I don't believe it would solve your problem as anything inside your react is going to have to wait for client side rendering.

Now, I'm no SEO expert, but if it's crucial to have content on the page before you render it, you may be able to send in the original html in a hidden element. If your original markup has <div id="app">Some seo stuff</div>, React will replace the content of the div when it renders it.

Charlie Bamford
  • 1,268
  • 5
  • 18
0

I think what you need is SSR; React allows this feature You could install a server adapter (maybe expressjs) and use it to render a first screen (which is most likely SEO related) and once the client side is ready to render, it would hydrate the pages. Since you have the HTML gotten from a server, I think this is best route to go

Praise
  • 43
  • 6
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32278876) – mcky Jul 22 '22 at 20:14
-1
var stringToHTML = function(htmlContent) {
  var dom = document.getElementById('integrationMessage');
  dom.innerHTML = htmlContent;
  return dom;
};
stringToHTML(res.data.message);
<div id = "integrationMessage"></div>
Thamothara Kannan
  • 11
  • 2