Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beenotung/node-data-template
Fast, SEO-friendly server-side rendering (SSR) data-template for smoother user experiences
https://github.com/beenotung/node-data-template
agnostic data-template engine express html seo server-rendering server-side-rendering ssr template typescript
Last synced: 3 days ago
JSON representation
Fast, SEO-friendly server-side rendering (SSR) data-template for smoother user experiences
- Host: GitHub
- URL: https://github.com/beenotung/node-data-template
- Owner: beenotung
- License: bsd-2-clause
- Created: 2023-08-23T01:11:20.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-06T18:47:03.000Z (about 1 year ago)
- Last Synced: 2024-04-23T18:57:44.421Z (9 months ago)
- Topics: agnostic, data-template, engine, express, html, seo, server-rendering, server-side-rendering, ssr, template, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/node-data-template
- Size: 49.8 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# node-data-template
[](https://www.npmjs.com/package/node-data-template)
Fast, SEO-friendly server-side rendering (SSR) [data-template](https://github.com/beenotung/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
```bash
npm install node-data-template
```
You can also install it with [pnpm](https://pnpm.io), [yarn](https://yarnpkg.com), or [slnpm](https://github.com/beenotung/slnpm)
## Usage Examples
A complete example can be found in [example/server.ts](./example/server.ts)
```typescript
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**:
```typescript
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
```
**Core Functions**:
```typescript
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](./LICENSE)
This is free, libre, and open-source software. It comes down to four essential freedoms [[ref]](https://seirdy.one/2021/01/27/whatsapp-and-the-domestication-of-users.html#fnref:2):
- 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