kriasoft / pre-render

Convert a single-page app (SPA) into a fully pre-rendered functional website before deploying it to a CDN

pre-render  

Instead of building an isomoprhic app (with SSR - server-side rendering), it's sometimes easier to create a normal single-page web application (SPA) by using a modern front-end library such as React, Vue.js etc (see example). But what about SEO, initial page load time, and other optimizations?

The goal of this project is to generate static .html pages for your single-page app at build time, before you deploy it to a CDN hosting. You just build your project as normal, assuming that it compiles into the /build (or /dist) folder, then prepare the list of relative URL paths that need to be pre-rendred and pass that info to pre-render, it will load /build/index.html in a headless Chrome browser, iterate over the list of provided relative URLs and save each page to a corresponding .html file.

How to Use

You need to tweak your app, to expose window.prerender handler, that may look something like this:

window.preprender = async path => {
  history.push(path);
  /* make sure that the client-side rendering is complete, then */
  return document.documentElement.outerHTML;
};

Then build your project (npm run build) and run the following script:

const prerender = require('pre-render');

prerender('./build', [
  '/',
  '/about',
  /* ... */
]);

Now, you can deploy the contents of the /build folder to GitHub Pages, Firebase, or some other CDN hosting, yet search engines will still be able to crawl your site.

License

Copyright © 2017-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE.txt file.

---

Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors

pre-render's Issues

Fix CI build

https://circleci.com/gh/kriasoft/pre-render/tree/master

output is undefined

Can you provide a simple example?

Instead of rendering each page under a folder, can be without?

I get all rendered like this mypage.html/index.html. Then some url start looking weird and I get sometimes on the live site with www.xxx.com/mypage.html/ and www.xxx.com/mypage.html. They are the same page but one has a slash at the end the other not.

I wonder if I can make them all without slash at the end.

Thanks