Doz-ssr NPM | npm.io

doz-ssr

DOZ server-side rendering

Installation

npm install doz-ssr

Example with Koa

server.js

const Koa = require('koa');
const serve = require('koa-static');
const body = require('koa-body');
const DozSSR = require('doz-ssr');

const dozSSR = new DozSSR('./dist/index.html');

new Koa()
    .use(serve('./public', {index: false}))
    .use(body())
    .use(async ctx => {
        const [content] = await dozSSR.render(ctx.url, {
            baseUrl: ctx.protocol + '://' + ctx.host
        });
        ctx.body = content;
    })
    .listen(3000);

bundle.js

IMPORTANT, since 2.0.0 it's necessary to call window.SSR.ready() inside your Doz app

new Doz({
    root: '#app',
    template(h) {
        return h`
            <div class="container"></div>
        `
    },
    onMount() {
        if (window.SSR)
            window.SSR.ready();
    }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MyApp</title>
</head>
<body>
    <div id="app"></div>
    <script id="bundle" src="/bundle.js"></script>
</body>
</html>

API

DozSSR

Kind: global class

DozSSR
- new DozSSR(entryFile, [opt])
- .getBundlePath() ⇒ string
- .render(routePath, [opts]) ⇒ Promise.<*>

new DozSSR(entryFile, opt)

dozSSR.getBundlePath() ⇒ string

Get bundle path from src attribute

Kind: instance method of DozSSR

dozSSR.render(routePath, opts) ⇒ Promise.<*>

Render app

Kind: instance method of DozSSR

PLUGIN

There is a plugin that adds a method and a directive:

import ssrPlugin from 'doz-ssr/plugin'

Doz.use(ssrPlugin);

// If you call isSSR() method inside your app you can check if it is in server environment
Doz.component('my-component', function(h){
    return h`
        <div>is server? ${this.isSSR()}</div>
    `
})

// If you want exclude (not visible) a component or part of html you can use the directive `d-ssr-invisible`
Doz.component('my-component', function(h){
    return h`
        <div>
            hello my friend
            <!-- on server side this will be not shown -->
            <div d-ssr-invisible>wow!</div>
        </div>
    `
})