node-data-template

Fast, SEO-friendly server-side rendering 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

import express from 'express'
import { print } from 'listening-on'
import dataTemplate from 'node-data-template'

let app = express()

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

app.get('/articles', (req, res) => res.json({ articles }))
app.get(
  '/',
  dataTemplate.static('public', 'index.html', () => ({ articles })),
)

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

let port = 8100
app.listen(port, () => {
  print(port)
})

API Types

import { Request, Response, RequestHandler } from 'express'

// namespace object for the functions
export let dataTemplate = {
  renderFile: renderDataTemplateFile,
  render: renderDataTemplate,
  static: staticDataTemplateHandler,
  dynamic: dynamicDataTemplateHandler,
  responseFile: responseDataTemplateFile,
}

// you can use dataTemplate.static() similar to express.static()
export default dataTemplate

// you can also access the functions with named imports

// framework agnostic render function
export function renderDataTemplateFile(
  public_dir: string,
  filename: string,
  bindings: object,
): Promise<string>

// framework agnostic render function
export function renderDataTemplate(
  public_dir: string,
  html: string,
  bindings: object,
): Promise<string>

// create express middleware with error handling
export function staticDataTemplateHandler(
  public_dir: string,
  filename: string,
  resolveBindings: (req: Request) => object | Promise<object>,
): RequestHandler

// create express middleware with error handling
export declare function dynamicDataTemplateHandler(
  resolve: (
    req: Request,
  ) =>
    | DynamicDataTemplateHandlerResult
    | Promise<DynamicDataTemplateHandlerResult>,
): RequestHandler

export type DynamicDataTemplateHandlerResult = {
  dir: string
  filename: string
  bindings: object
}

// helper function to be used by express route handler (no error handling)
export function responseDataTemplateFile(
  res: Response,
  public_dir: string,
  filename: string,
  bindings: object,
): Promise<void>

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