JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q58962F
  • License MIT

DOZ server-side rendering

Package Exports

  • doz-ssr

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (doz-ssr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

new DozSSR(entryFile, [opt])

ParamTypeDefaultDescription
entryFilestring

File index.
[opt]object

Options.
[opt.bundleId]string"bundle"

Bundle id selector.
[opt.appRootId]string"app"

App id selector.
[opt.docTypeString]string"<!DOCTYPE html>"

Document type.

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

ParamTypeDefaultDescription
routePathstring

The route path.
[opts]object

Rendering options
[opts.reloadBundle]booleanfalse

If true, the bundle will be reload every render call. This operation is slow so useful only in develop mode.
[opts.baseUrl]string"http://localhost"

The base url. Really this param is very important, you must fill it with your real domain in production environment.
[opts.inject]string

This options is useful to inject code before app bundle execution.
[opts.headers]object

Accepts the headers of the request`,
[opts.cleanerScript]booleanfalse

Cleaner script before to the client rendering`,
[opts.replacements]object

This options is useful to replace any placeholder like this %MY_PLACEHOLDER%, in this case, the key will be MY_PLACEHOLDER and the value "YOUR STRING". The perfect scenario are for example the meta tags values.

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>
    `
})

Changelog

You can view the changelog here

License

doz-ssr is open-sourced software licensed under the MIT license

Author

Fabio Ricali