https://github.com/dozjs/doz-ssr

DOZ server-side rendering
https://github.com/dozjs/doz-ssr

Last synced: 3 months ago
JSON representation

DOZ server-side rendering

• Host: GitHub
• URL: https://github.com/dozjs/doz-ssr
• Owner: dozjs
• Created: 2018-06-12T14:00:25.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-01-08T11:39:11.000Z (almost 4 years ago)
• Last Synced: 2024-07-05T17:01:56.017Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 989 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.hbs
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-github-star - doz-ssr - side rendering | dozjs | 4 | (JavaScript)

README

        
# doz-ssr

DOZ server-side rendering





## Installation

```

npm install doz-ssr

```

## Example with Koa

#### server.js

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

```js

new Doz({

    root: '#app',

    template(h) {

        return h`

            


        `

    },

    onMount() {

        if (window.SSR)

            window.SSR.ready();

    }

});

```


#### index.html

```html

    MyApp

    


    


```

## API

{{>main}}

## PLUGIN

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

```js

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`

        
is server? ${this.isSSR()}

    `

})


// 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`

        


            hello my friend

            

            
wow!

        

    `

})

```


## Changelog

You can view the changelog here

## License

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

## Author

Fabio Ricali