Headless-Render-API.com

a React app on a fast network can download in as little as 100ms, but then take another 600ms to render... unless it's server-side rendered (then <= 250ms)

Our experiments demonstrate that slowing down the search results page by 100 to 400 milliseconds has a measurable impact on the number of searches per user

• from Google Research blog post "Speed Matters"

Google saw a 20% drop in revenue from an accidentally introduced 500ms delay.

• Greg Linden paraphrasing Marissa Mayer, Nov 2009

When you load a server-side rendered JavaScript app, you see the content immediately, before the JavaScript is even downloaded - it's what makes pages feel as if they are instantly loading.

Using XHR/AJAX? We automatically cache and preload AJAX calls so the "initial state" just works. If you have a more complicated setup, you can preload your state by saving to a special variable we serialize into the DOM called window.__PRELOADED_STATE__

Using React? We include your server-side rendered checksums for best possible client render performance. (version 0.14 and above)

Headless-Render-API prerenders (server-side renders) JavaScript apps (React, Angular, etc.) using Headless Chrome. It aims to address 3 weaknesses of the now ever-popular single-page JavaScript app revolution:

1. improved rendering performance (up to 2.5x speed boost)
2. fixed link previews (open graph and meta tags)
3. and improved SEO (especially for pages/apps that make XHR/Websocket requests)

Addressing these 3 weaknesses of JavaScript apps without Headless-Render-API.com means manual implementation of custom, server-side rendering solutions. Headless-Render-API is a generalized solution that "just works" for all JavaScript apps and various hosting technologies (Node.js, Nginx, Apache, Golang, etc.) and strategies (proxy all requests, or just bots, or use local cache or some combination of the above).

We've tested hundreds of apps and addressed many requirements:

• infrastrucure
  • uptime, scalability, burst/batch API requests
  • up to 10x cheaper than competing services
• features
  • caching your app's state during the server-side render and serializing it into the HTML payload
  • intelligently waiting for all XHR and Websockets to finish
  • protection for pages that never stop making XHR/Websockets requests (ad networks)
  • special integration for React: react-data-checksums included (version 0.13 and above)
  • special support for Webpack code splitting

Test Headless-Render-API.com in seconds with our server and let us know if you need a particular feature or guidance.

It's easy, just add middleware or a snippet to your web server that forwards requests to service.prerender.cloud

We've already written and tested integrations with Node.js, nginx, CloudFront via Lambda@Edge, Apache, Golang, Ruby, IIS and can quickly add more. Just email us: support@headless-render-api.com

You can also use it for crawling/scraping JavaScript apps

This is a static, pushstate, Node.js server with the official Headless-Render-API.com middleware already configured. If you have a built/compiled/transpiled directory with your index.html and JavaScript files, this should "just work".

npm install -g prerendercloud-server
prerendercloud-server --help
prerendercloud-server ~/path/to/build