Skip to content
Server side rendering for Mavo (WIP)
Branch: master
Clone or download
betaveros lock Mavo existence on first evaluateOnNewDocument
For some reason, a script is causing evaluateOnNewDocument to fire twice
and the second time there's no Mavo, so let's make the first time lock
it in.

Fixes #4.
Latest commit 9016bdb May 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gulp-example restructure gulp to be more modular May 20, 2019
.gitignore setup Feb 19, 2019
README.md update README May 10, 2019
package-lock.json Add args parsing, dependencies, version Apr 21, 2019
package.json Add args parsing, dependencies, version Apr 21, 2019
server.js file split May 19, 2019
ssr.js lock Mavo existence on first evaluateOnNewDocument May 20, 2019

README.md

mavo-ssr

Server-side rendering/prerendering for Mavo apps, using Google's puppeteer, following their SSR guide, which also motivates why we want to do server-side rendering quite well.

In brief: typical Mavo apps are served with no content; the content is rendered entirely in JavaScript in the client's browser. This may prevent search engines from indexing Mavo apps (although Google does successfully index many Mavo apps). It may also stop many sites' preview features from working on Mavo apps, or users with slower browsers from viewing the app. Server-side rendering does exactly what it sounds like; initial rendering happens on the server, before search engines and users see it, so that the initial content will be visible to them. The Mavo app will still be interactive (after roughly the same amount of time loading in the browsers, and assuming this doesn't have any bugs).

This implementation is still fairly experimental, but we hope it is useful!

Usage

Install Node (at least version 8) and npm. Run

$ npm install

to install dependencies. Then, if your Mavo site is in the folder /path/to/your/site, you can run the simplest server like this:

$ node server.js serve /path/to/your/site

Then visit the SSR server that's printed in your browser. This server will render every page in headless Chrome before serving it.

You can pass in a directory where the server will cache rendered versions of any requested pages in with the option --cache:

$ node server.js serve /path/to/your/site --cache mycache

Then, as requests come in, mavo-ssr will cache any responses it serves as plain HTML files in the mycache directory, and will serve files from the cache instead of rerendering them. (The cache is currently never invalidated, but we hope to add this feature some day.)

If you want, you can serve your website primarily through mavo-ssr just by running server.js as described above and specifying a port number with --port, although this is not recommended for production use since it's just running an extremely simple express.js server. You can also use mavo-ssr as a prerendering tool by serving with a cache, then just manually visiting each page in your site and statically serving the files that were output into the cache directory instead.

Other settings are described if you run node server.js or node server.js serve --help.

You can’t perform that action at this time.