React server side rendering as a react based template engine

isomorphic javascript is a technology used to speedup rendering on browser, it can be used a pure version that is server-side-rendering (ssr) to generate template from a react app

Motivation: Create a presentation template to be converted to pdf and configurable with data: produce formatted documents.


This is the way the piece of server generated code and client app can work together, using renderToString from:

import { renderToString } from ‘react-dom/server’;

the rendered html contains references to the window.STATE, hydrate is used to “undry” the app (sort of bring it to life).

But by using renderToStaticMarkup from:

import { renderToStaticMarkup } from ‘react-dom/server’;

it is possible to render directly to html markup, without any additional information: pure html.


The trick is on the use of:


for transpilling the jsx to javascript transparently.

Here is a src/template.js code:

let fs = require('fs');

const decoratedStyle = (content) => {
    return '<style type="text/css">\n' + content + '\n</style>\n';

const nodulespath = __dirname.replace(/\/[a-zA-Z]+$/,'')+"/node_modules/";

const importCss = (moduleref) => {
    const solvedPath = moduleref.replace("~",nodulespath).replace("\./",__dirname+'/');
    //console.log('solvedpath', moduleref, solvedPath);
    let styledef = fs.readFileSync(solvedPath);
    return decoratedStyle(styledef);

let render = require('./server');

const template = (state) => {
    let s = {...state};
    delete s.title;
    let content = render(s);
    let page = `<!DOCTYPE html>
              <html lang="en">
                <meta charset="utf-8">
                <title> ${state.title} </title>
              <div id="root">

  return page;

module.exports = template;

and here a rendering script that is called by a nodejs service that generate static documents:

const fs = require('fs');
const inlineCss = require('inline-css');

let template = require('./template');
let getState = require('./state/get-state');

let data = process.argv[2];
let currentselection = {
    tariff_id: 5,
    selected_opt: {"3101":66,"3102":79,"3108":166,"3109":34,"3112":155,"3114":85,"3115":157,"3208":161,"4005":180,"4102":151,"4105":170,"4107":67,"4202":159,"4207":105}

let state = getState(JSON.parse(data));
let html = template(state);

const output_fn_inlined = __dirname + '/../dist/output.inlined.html';

inlineCss(html, {url: ''})
.then(html => {
    //fs.writeFileSync(output_fn_inlined, html);
    let buf = Buffer.from(html);
    let res = {"html":buf.toString('base64')};
}).catch(err=> {
    console.log('error', err);

If you want to know more, you can consider working with us, drop me an email: dc @ xwave . de ( r e m o v e s p a c e s ! )