You might have used several template engine along with your web frameworks. Common template engines used for websites are,
For last few years, React has caught a lot of attention among developers through various framework.
In this article, we are going to discuss how react can be used as template engine.
ReactDomServer has methods to help compile your react components as string or static HTML markup.
The methods are,
renderToStringcreates and return HTML string out of your component passed to it.
renderToStaticMarkupcreates static Markup out of your component passed to it.
whats the difference 😅
Yes both does the same, there are few differences.
renderToStaticMarkupto create static HTML without any react based markup added to it. It can be used as React to HTML conversion, static page generation from react etc.
renderToStringcreates extra DOM attributes related to react and help the client side react to make use of it. It is widely used for Universal rendering. The first load happens from server through renderToString and then client side react make use of the attributes it generate and take over the control.
What to use for template rendering 🤔
Depends on the need of your website, generally
renderToStaticMarkup is faster and without any overload if you didn’t want to use react in browser.
/* - options are props from server to your react templates - component is your root component (eg., Layout of the page) */ let component = component.default || component; let markup = ReactDOMServer.renderToStaticMarkup( React.createElement(component, options) ); // whatever way you return HTML in your framework return markup;
Hope this helps. Next time, you can choose react as your template engine for your server side rendered projects. 😎