akili-connect

Library to implement server-side rendering for Akili framework.
It is based on jsdom.

Example

const akiliConnect = require('akili-connect');
const express = require('express');
const path = require('path');
const app = express();

const middleware = akiliConnect({
  indexFile: path.join(__dirname, 'public/templates/index.html')
});

app.get('/', middleware.route);
app.get('/home', middleware.route);
app.get('/docs/*', middleware.route);
app.get('*', middleware.index);

app.listen(3000, function () {
  console.log('Server run on 3000 port');
});

Description

All you need is to use route middleware for the necessary routing path and index middleware to get index file.

Options

• {string} [indexFile] - path to the index file. Required if you are going to use index middleware
• {string} [indexUrl] - index middleware url
• {number} [port] - application port
• {string} [protocol] - application protocol
• {string} [host] - application host
• {Object} [jsdomOptions] - jsdom options
• {function} [onDomInit] - called after DOM creation. You can change window state here before the Akili application is initialized.
• {function} [beforeSerialization] - called before the DOM serialization. You can get the window object and do anything with it last time.
• {function} [afterSerialization] - called after the DOM serialization. You can get the actual html and change it last time. You have to return a new html string.

Polyfills

You might need missing functions in jsdom or stubs for them. You can write it yourself.

const polyfill = require('akili-connect/polyfill');

polyfill.someFunction = (window) => {
  window.someFunction = () => {};
};

Client side

Don't forget to initialize your Akili application on the client side!
Server sends the part of html to replace only the root element content.

document.addEventListener('DOMContentLoaded', () => {
  Akili.init(document.body).catch((err) => console.error(err));;
});

if(window.AKILI_SSR) {
  // the server-side rendering
}
else {
  // the client-side rendering
}

If you want to remove some elements during the rendering on the server side you can add attribute no-ssr to them.

<app>
  <div no-ssr>it's useless for SEO</div>
  <div>it's necessary</div>
</app>