Is it possible to render HTML in react without using dangerouslySetInnerHtml

Question

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?

maybe you could find some useful information here stackoverflow.com/questions/44643424/… — Raden Kriting
– Raden Kriting, Commented Jul 5, 2021 at 15:48
Are you rendering that react on the server or on the client? — Charlie Bamford
– Charlie Bamford, Commented Jul 5, 2021 at 16:10
@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
– li x, Commented Jul 6, 2021 at 7: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
– Benedicte Raae, Commented Jul 6, 2021 at 18:14

Charlie Bamford · Accepted Answer · 2021-07-06 12:36:39Z

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.

Praise · Accepted Answer · 2022-07-19 02:59:12Z

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

answered Jul 19, 2022 at 2:59

Praise

536 bronze badges

1 Comment

mcky Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Thamothara Kannan · Accepted Answer · 2021-07-06 13:04:18Z

-1

var stringToHTML = function(htmlContent) {
  var dom = document.getElementById('integrationMessage');
  dom.innerHTML = htmlContent;
  return dom;
};
stringToHTML(res.data.message);
<div id = "integrationMessage"></div>

answered Jul 6, 2021 at 13:04

Thamothara Kannan

112 bronze badges

1 Comment

Greedo Over a year ago

Hello, welcome to SO, try to expand your answer adding some explaination

Collectives™ on Stack Overflow

Is it possible to render HTML in react without using dangerouslySetInnerHtml

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related