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>