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])
| 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. |
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
| 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 |
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