https://github.com/kriasoft/pre-render

Convert a single-page app (SPA) into a fully pre-rendered functional website before deploying it to a CDN
https://github.com/kriasoft/pre-render

cdn pre-rendering react reactjs rendering seo single-page-app single-page-applications ssr vue vuejs

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kriasoft/pre-render
• Owner: kriasoft
• License: mit
• Created: 2017-08-15T18:55:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-16T08:22:29.000Z (over 7 years ago)
• Last Synced: 2024-10-30T00:55:25.988Z (2 months ago)
• Topics: cdn, pre-rendering, react, reactjs, rendering, seo, single-page-app, single-page-applications, ssr, vue, vuejs
• Language: JavaScript
• Homepage:
• Size: 25.4 KB
• Stars: 25
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# `pre-render`   [![NPM Package](https://img.shields.io/npm/v/pre-render.svg?style=flat-square)](https://www.npmjs.com/package/pre-render) [![NPM Downloads](http://img.shields.io/npm/dm/pre-render.svg?style=flat-square)](https://www.npmjs.com/package/pre-render) [![NPM Dependencies](https://david-dm.org/kriasoft/pre-render.svg?style=flat-square)](https://npmjs.org/package/pre-render)

Instead of building an [isomoprhic app][rsk] (with SSR - server-side rendering), it's sometimes

easier to create a normal single-page web application ([SPA][spa]) by using a modern front-end

library such as [React][react], [Vue.js][vue] etc (see [example][rsb]). But what about [SEO][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][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:

```js

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:

```js

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](https://github.com/kriasoft/pre-render/blob/master/LICENSE.txt) file.

---

Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@tarkus)) and [contributors](https://github.com/kriasoft/pre-render/graphs/contributors)

[spa]: https://en.wikipedia.org/wiki/Single-page_application

[react]: https://facebook.github.io/react/

[vue]: https://vuejs.org/

[cdn]: https://en.wikipedia.org/wiki/Content_delivery_network

[rsk]: https://github.com/kriasoft/react-starter-kit

[rsb]: https://github.com/kriasoft/react-static-boilerplate

[seo]: https://en.wikipedia.org/wiki/Search_engine_optimization