DOZ server-side rendering
npm install doz-ssr
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);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();
}
});<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
</head>
<body>
<div id="app"></div>
<script id="bundle" src="/bundle.js"></script>
</body>
</html>Kind: global class
- DozSSR
- new DozSSR(entryFile, [opt])
- .getBundlePath() ⇒
string - .render(routePath, [opts]) ⇒
Promise.<*>
| Param | Type | Default | Description |
|---|---|---|---|
| entryFile | string | 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. |
Get bundle path from src attribute
Kind: instance method of DozSSR
Render app
Kind: instance method of DozSSR
| Param | Type | Default | Description |
|---|---|---|---|
| routePath | string | The route path. |
|
| [opts] | object | Rendering options |
|
| [opts.reloadBundle] | boolean | false | 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] | boolean | false | Cleaner script before to the client rendering`, |
| [opts.replacements] | object | This options is useful to replace any placeholder like this |
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>
`
})You can view the changelog here
doz-ssr is open-sourced software licensed under the MIT license