Skip to content

dozjs/doz-ssr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

92 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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