depends on where the markdown comes from, but unless you are building a markdown previewer where the content is provided by the user in some <textarea>, i would recommend compiling markdown to html in a server component first, then simply render that html on the server.

using react-markdown will not affect SEO but it will likely mean the markdown2html compiler will be shipped in the js bundle to the client which is suboptimal.

First of all thank you for taking the time to answer
Secondly I used the react-markdown package and the content itself is static and will be rendered on server side

Basically the data is fetched from the backend (incl. markdown text) and then react markdown takes care of that
Is this the right way to do this?

in that case i would just do something like this

async function Page() {
  const md = await getMdFromSomewhere();
  const html = await md2html(md);
  return <div dangerouslySetInnerHtml={{ __html: html }} />;
}

then it's guaranteed you only send the html to the client and not a markdown compiler (the function md2html is not included in client-side bundle)

react-markdown is more for the cases where say you have a textbox to write markdown in it and on the other side of the screen you have a preview that renders the html of that markdown, live as you type

Thank you joulev I understand this way of doing it and this was my initial plan but I've heard that dangerouslySetInnerHtml makes your site vulnerable to attacks is that true?

if the html you provide to it is unsafe, yes xss attacks are possible. but you just need to ensure your markdown compiler properly sanitises the html to remove all xss attack vectors. for example if you use the unified ecosystem (remark, rehype and others), you have https://github.com/rehypejs/rehype-sanitize

Thank you so much I'll try the approach you mentioned and see how things go once again I highly appreciate you taking the time to help me out