Our courses website is live at jsmates.com
BlogVideos
#react
#css
#javascript
#mongodb
#tech talks
#codepen
#Logrocket Blog

React as templates for your server side applications

May 16, 2019 • 🍿 2 min read • Edit this post on Github
Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

You might have used several template engine along with your web frameworks. Common template engines used for websites are,

  • ejs
  • jade
  • jinja2

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

ReactDomServer has methods to help compile your react components as string or static HTML markup. The methods are,

  • renderToString
  • renderToStaticMarkup

renderToString

  • renderToString creates and return HTML string out of your component passed to it.
  • renderToStaticMarkup creates static Markup out of your component passed to it.

whats the difference 😅

Yes both does the same, there are few differences.

  • Use renderToStaticMarkup to 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.
  • Use renderToString creates 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.

Example code

/*
    - 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. 😎

Get Weekly Developer Tips

I send out a short email each friday with code snippets, tools, techniques, and interesting stuff from around the web. Join 2,600+ subscribers.

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile