ube-ssr
v0.1.4
Published
An SSR, islands friendly, way to render ube components
Downloads
4
Maintainers
webreflectionReadme
µbe-ssr
Original Social Media Photo by JOSE LARRAZOLO on Unsplash
An SSR, islands friendly, way to render µbe components on the page, either dynamically, or statically, producing single SPA like files that are also easy to share.
Features
- based on js-in-json
- incremental or "all at once" hydration via builtin elements (no Custom Elements, no Polyfills needed)
- can generate, or build, on the fly, or produce static HTML pages with all dependencies on demand served within it (no network requests)
- bootstraps and serve pre-cached js-in-json content in 0 to few milliseconds
How to
import http from 'http';
import ube from 'ube-ssr';
const {
// provides same ube helpers
render, html, svg,
// plus utilities to define components
// and bootstrap before serving
include, bootstrap
} = ube({
// all same options available in js-in-json
...options,
// plus optional `flush`:
// if `incremental`, will flush after each component,
// otherwise will add a <script> with all needed content
// after rendering
flush: 'incremental',
// plus optional `module`:
// if `true`, all scripts are served as inline
// non-blocking type="module"
module: true
});
// define what µbe should be included, and what
// kind of tagName it represents on the page
const Div = include('comp/div.js').as('div');
const Button = include('comp/clicker.js').as('button');
// if not used in the template, their content won't be
// on the page neither
// prepare the islands/sessions to use automatically
await bootstrap(
// if a cache object is passed, it'll be used.
// if a boolean `true` is passed, and the cached
// js-in-json file exists (output), it will use it.
// in all other cases, it builds the cache and,
// if the output was specified, will save it there
!!process.env.PRODUCTION
);
// http example
http
.createServer((req, res) => {
res.writeHead(200, {'content-type': 'text/html;charset=utf-8'});
render(res, html`
<!doctype html>
<${Div}>Hello SSR 👋 </${Div}>
<!-- incremental flushes example -->
<${Div}>Hello Again 👋 </${Div}>
`);
})
.listen(8080);See the test example or the produce HTML output.
Find the list of js-in-json options and remember that the root folder is the only mandatory field, and it should point at where your client-side JS files / components are.
In Details
µbe components are like custom elements, builtin or not, with a unique feature: they don't need a registry, and there's never a name clashing.
These components are the best one to hydrate, because they don't require changes in the layout, like it is for custom elements.
With µbe-ssr this potential goes beyond client-side components definition:
- layout can be served same way µhtml-ssr does already
- components can be simple (only behaviors attached on the fly) or could render themselves on the fly
- the hydration can be instantaneous (using
flush: "incremental"special option) or performed only at the end of the rendered content - the JS code is automatically split in chunks and dependencies so that only rendered components lands once, as definition, and these are incrementally hydrated on the fly, or at the end
Both babel and minify options from js-in-json makes it super easy to debug real/native code, and can be set as false only during development, with minify and output able to produce best results in terms of performance and portability.
Any static site host can work without issues, but once the js-in-json cache is produced, creating highly dynamic, or reactive, pages, is also possible and pretty damn fast.