node-data-template

Fast, SEO-friendly server-side rendering (SSR) data-template for smoother user experiences.

node-data-template is framework agnostic (with express support).

Motivation

Server-side rendering (SSR) pages with data-template into plain HTML to deliver information as soon as possible. Directly delivery content over the wire (without running any javascript and ajax on the client side) enhances user experience by presenting readable content immediately upon request, reducing wait times and potential user frustration.

The benefits of SSR extend beyond speed; it also improves Search Engine Optimization (SEO). Search engine crawlers often have lower priority to run and index JavaScript-rendered content, but they can readily understand and index server-rendered HTML. This means your website's content is more likely to appear in search results, driving more organic traffic to your site.

In summary, server-side rendering is a effective strategy for boosting both the speed and SEO performance of a website.

Installation

npm install node-data-template

You can also install it with pnpm, yarn, or slnpm

Usage Examples

A complete example can be found in example/server.ts

import express from 'express'
import { dataTemplate, scanTemplates } from 'node-data-template'

let templates = dataTemplate({
  templateDir: 'public',
  minify: true,
})

let app = express()

let articles = [
  /*...*/
]

app.get('/articles', (req, res) => res.json({ articles }))

app.get(
  '/',
  templates.handle((context, req, next) => {
    scanTemplates(context, context.document, { articles })
  }),
)

app.use(express.static('public'))

app.listen(8100, () => {
  console.log('Server started and listening at http://localhost:8100')
})

API Types

Express Middleware Creator:

function dataTemplate(options: {
  templateDir: string
  minify?: boolean
}): DataTemplateHandler

interface DataTemplateHandler {
  // to be used in express route handler
  handle: (render: RenderFn) => RequestHandler
}

type RenderFn = (
  context: DataTemplateContext,
  req: Request,
  next: NextFunction,
) => void | Promise<void>

Core Functions:

type DataTemplateContext = {
  document: Document
  templateDir: string
}
function loadDocument(templateDir: string, filename: string): Document
function renderTemplate(
  context: DataTemplateContext,
  host: HTMLElement,
  binds?: {},
): void
function scanTemplates(
  context: DataTemplateContext,
  root?: Document,
  binds?: {},
): void
function fillForm(form: HTMLElement, o: object): void
function d2(x: number): string | number
function toInputDate(date: string | number | Date): string
function toInputTime(date: string | number | Date): string
function renderData(container: Node, values: object): void

Where the Document is a shim from the lightweight library html-parser.ts with outerHTML and minifiedOuterHTML.

License

This project is licensed with BSD-2-Clause

This is free, libre, and open-source software. It comes down to four essential freedoms [ref]:

• The freedom to run the program as you wish, for any purpose
• The freedom to study how the program works, and change it so it does your computing as you wish
• The freedom to redistribute copies so you can help others
• The freedom to distribute copies of your modified versions to others