I have a CMS and Next.js (react). My content is created using the CMS and Next.js pulls the content HTML in using SSR and then CSR. The content is put to page with the usual horrible:
<div dangerouslySetInnerHTML={{ __html: content.body }}></div>
I’ve created component called References.js
and it’s job is to go through the content, get all the links and titles and list them at the bottom of the page under <h4>References</h4>
. I do this client side using document.querySelectorAll()
then references.map
to spit the links into a list which works fine.
My question is this, can I use React with SSR to manipulate the CMS content before it gets sent to the client or am I stuck with manipulating the content client side?
can I use React with SSR to manipulate the CMS content before it gets sent to the client?
Yes, e.g. with jsdom or if you prefer manipulating a tree of React nodes, html-react-parser (in which case you won’t need dangerouslySetInnerHTML
either).
2