https://github.com/foxbunny/vanilla-ssr
Production-ready example of a self-contained SSR server
https://github.com/foxbunny/vanilla-ssr
html javascript nodejs nodejs-server ssr
Last synced: 3 months ago
JSON representation
Production-ready example of a self-contained SSR server
- Host: GitHub
- URL: https://github.com/foxbunny/vanilla-ssr
- Owner: foxbunny
- Created: 2022-12-01T15:39:24.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T20:11:46.000Z (over 2 years ago)
- Last Synced: 2025-01-26T01:32:44.765Z (5 months ago)
- Topics: html, javascript, nodejs, nodejs-server, ssr
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vanilla SSR example (NodeJS)
This repository contains the example of a completely self-contained vanilla SSR
implementation using NodeJS. This is production-ready code and it can be used
as the starting point for your SSR-enabled projects.
## Running the example
The example can be executed using most recent versions of NodeJS, but was
specifically tested using version 18 LTS.
To run the example, use the `node server.js` command.
## Environment variables
The `PORT` and `HOST` environment variables can be used to specify the port
and host address respectively. The defaults are `8080` and `127.0.0.1`
(localhost).
## Static files
The SSR server in this example is completely self-contained and does not
rely on additional services such as static file server or CDN to serve the
static files. The static files are found in the `public` directory, and are
cached completely in-memory when the server starts.
## Dynamic HTML
The HTML generated by this server is dynamic, meaning it has data embedded
inside of the markup that changes on each request. To simplify things, this data
is a simple timestamp. In real-world applications, the data might come from some
API or a database.
## Progressive enhancement
This simple application uses
[progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
This means that the basic features of the page will work without any
client-side JavaScript or even without CSS. The client-side code, when
available, will enhance the user experience, but it is never used for essential
functionality.
## Additional reading
- [NodeJS http module](https://nodejs.org/docs/latest-v18.x/api/http.html)
- [NodeJS fs module](https://nodejs.org/docs/latest-v18.x/api/fs.html)
- [NodeJS path module](https://nodejs.org/docs/latest-v18.x/api/path.html)
- [NodeJS zlib module](https://nodejs.org/docs/latest-v18.x/api/zlib.html)
- [NodeJS crypto module](https://nodejs.org/docs/latest-v18.x/api/crypto.html)
- [MIME (media) types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)
- [Content-Type header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type)
- [Content-Length header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Length)
- [Content-Encoding header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding)
- [Etag header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag)
- [Accept-Encoding header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding)
- [Brotli compression](https://en.wikipedia.org/wiki/Brotli)