@bitovi/velocirender
Accelerated server-side rendering.
Install
Install from npm:
npm install @bitovi/velocirenderOr Yarn:
yarn add @bitovi/velocirenderGetting Started
The Getting Started guide goes over everything in much more depth but here is a primer.
Once you've installed Velocirender you can use the CLI to start a server and point at an HTTP(S) endpoint like so:
node_modules/.bin/velocirender https://bitovi.github.io/dog-things-react/This will tell you to visit http://localhost:8080 where you see the sight load incrementally. Continue on with the guide which walks you through what is happening and how to integrate this into your workflow.
Usage
Velocirender comes with CLI and JavaScript APIs.
CLI
The command-line interface is the easiest way to use Velocirender. Provide a path to your production HTML file and a few options, if needed. The HTML file can be a local path or a remote HTTP(S) address:
Locally
node_modules/.bin/velocirender build/index.htmlRemote
node_modules/.bin/velocirender https://bitovi.github.io/dog-things-react/Flags
The following CLI flags are available for use:
- --port: Specify the port to use, otherwise 8080 will be used.
- --key: An SSL key. This should match what is provided to Node https.
- --cert: The SSL certificate. This should match what is provided to Node https.
- --no-cache-html: By default Velocirender caches the HTML skeleton (everything that occurs before API requests are made). For the vast majority of apps this is fine, but if you do something weird like write a
Math.random()into your output you might need this (file an issue to discuss first, you almost definitely don't need it).
Cache considerations
When running from a remote HTTP(S) address, Velocirender will download static assets and serve them from a local cache. That cache will be used until the next time the server starts, at which time they'll be re-downloaded.
This means that a deployed Velocirender server doesn't need to be redeployed when you release a new version of your front-end app; but you will need to restart the server.
See this issue for discussion on more advanced caching coming in the future.
JavaScript API
Velocirender takes a function that is given a rendering context. This includes a document, the request and response objects. A function is returned with a signature of (request, response) and can be used as Express middleware, directly with require('http'), etc.
Here's an example that uses http module directly:
const velocirender = require('@bitovi/velocirender');
const { ReactDOM, App } = require('./dist/webpack-build-whatever.js');
const handler = velocirender(({ document, request }) => {
let root = document.createElement('div');
root.setAttribute("id", "root");
document.body.appendChild(root);
ReactDOM.render(React.createComponent(App), root);
});
require('http').createServer(handler).listen(8080);Note the above doesn't handle serving static assets. If you are using the http module directly you probably already know how to handle this, but most will likely want to use a framework like Express. Here's an example that does so:
const velocirender = require('@bitovi/velocirender');
const { ReactDOM, App } = require('./dist/webpack-build-whatever.js');
const express = require('express');
const app = express();
// Add any normal Express middlware you use here.
app.use(express.static(__dirname + '/build', { index: false }));
// Add this last.
app.use(velocirender(({ document, request }) => {
let root = document.createElement('div');
root.setAttribute("id", "root");
document.body.appendChild(root);
ReactDOM.render(React.createElement(App), root);
}));
app.listen(8080);Note that
{ index: false }is provided toexpress.static. This disables serving the index.html file for routes like/. This is disabled in this example because Velocirender will handle those routes.
Callback argument
Velocirender takes a handler function as its only argument. That function receives a context object that contains the following properties:
- request: The request object from the HTTP request.
- response: The response object from the request. Note that can set headers on this response, but you won't want to call
.write()or.end()as Velocirender calls those itself. - document: A document that is scoped to this request. You can modify this document just as you would in a browser. Typically you'll want to create a root element to render your application onto. This document is backed by jsdom.
- window: A window object. This contains many (but not all) of the properties that are seen in a browser window.
velocirender.serve()
A second API works like the CLI. Give it a path or URL and options that match the CLI's options. It will create a server for the app.
const velocirender = require('@bitovi/velocirender');
const server = velocirender.serve('https://bitovi.github.io/dog-things-react/', {
port: 8089
});The second argument options should match the available CLI flags.
Browser Compatibility
Velocirender utilizes recent additions to the browser specs such as preload, fetch, and ReadableStream.
As of today Velocirender rendering is possible in Chrome and Safari >=12.
In browsers that don't support these technology Velocirender will fallback to the traditional SSR method of waiting for a fully rendered page. We call these separate strategies:
- incremental strategy is for modern browsers with streaming capabilities.
- legacy strategy is for older browsers.
Changelog
See the latest releases on GitHub.