Lightning fast server-side rendering with tagged template literals

  • pelo

Downloads in past


0.1.06 years ago6 years agoMinified + gzip package size for pelo in KB


pelo (work in progress)
Lightning fast server-side rendering with tagged template literals
A tiny library that enables lightning fast server-side rendering with hyperx-like libraries such as bel, yo-yo and choo/html. It replaces the tag function of those libraries and just renders string without creating intermediate objects.


npm install pelo


ssr.js: Call pelo.replace(moduleId) before you require any view module, bel in this case.
const pelo = require('pelo')
const view = require('./view')

const renderedString = view('pelo').toString()

view.js: You don't need to change your view files at all. You can use them for client-side rendering and server-side rendering.
const html = require('bel')

module.exports = function helloView(name) {
  return html`<p>Hello, ${name}</p>`


Rendering a simple view 10,000 times:
node benchmark.js

| tag | time (ms) | | ---- | --------- | | pelo | 219.093 | | bel | 1982.610 |


Server-side rendering with modern JavaScript frameworks is slow. In general, they focus on the client-side, and generate virtual/real DOMs for efficient DOM updates from templates. However, this approach is a bit overkill when we focus on server-side rendering. Because the templates already look like HTML, it should be faster if they directly render HTML strings without creating intermediate object representations.
With bel, we can write HTML with tagged template literals and use them to create declarative views on browser. If we can use the same template also for directly generating HTML string on server-side, it will be a huge win.


Thanks @yoshuawuyts for lots of advice!