Server-side rendering docs#

(client list at bottom of this page, or see pre-render API reference)

This page describes our server-side rendering feature. Sometimes referred to as pre-rendering or dynamic rendering, the goal is to make your website more SEO friendly by serving HTML to search engines and social media crawlers.

We have separate documentation for our simpler features: screenshots, PDFs, and scraping.

Pre-rendering quick start

1. Skim this page
2. Skim how it works page
3. See client list at bottom of this page
4. Test client integration on your dev machine
5. Go through the checklist

Requirements for server-side rendering

1. you have a "single page app" with push state URLs (React, Angular, Ember, Vue, Preact etc...)
   • (the only true requirement is a JavaScript app that rewrites a container div as opposed to appending)
2. a build or dist directory with your index.html and JavaScript files

Use our pre-configured pushstate server

Can be run from Node.js or Docker. Our prerendercloud-server works for both dev/test and production use of Headless-Render-API.

npm install -g prerendercloud-server
prerendercloud-server ~/path/to/build
# or
cd build && npx prerendercloud-server

If testing from your dev machine: you will need a public IP or SSH remote port forwarding (we'll prompt you for this). Use ngrok if you don't have a public IP and/or don't want to configure SSH port forwarding.

Terminology

1. "prerendercloud" npm package is our node.js express/connect middleware.
2. "prerendercloud-server" is our pushstate node.js server that uses the prerendercloud middleware. Available as NPM package or Docker image and capable of reading files locally or from S3.
3. Prerender.cloud was our brand name from 2016 until 2022-05-01, so please excuse packages and docs using our old brand "prerendercloud"
4. In the context of these docs: "pre-rendering" is interpreted the same as server-side rendering, dynamic rendering, isomorphic rendering, and universal rendering, etc.

Server-side rendering on Fly.io

See example code here: Server-side rendering on Fly.io (this Fly.io integration is how Headless-Render-API.com is hosted)

Server-Side Rendering Docker

Read more about pre-rendering using our Docker image here

# run prerendercloud-server for the current directory
docker run \
  -e PRERENDER_TOKEN="my-secret-token" \
  -e DEBUG=prerendercloud \
  -p 9000:9000 \
  -v $(pwd):/wwwroot \
  prerendercloud/webserver

# run prerendercloud-server for an s3 bucket
docker run \
  -e AWS_ACCESS_KEY="my-aws-key" \
  -e AWS_SECRET_KEY="my-aws-secret" \
  -e PRERENDER_TOKEN="my-secret-token" \
  -e DEBUG=prerendercloud \
  -p 9000:9000 \
  prerendercloud/webserver s3://my-s3-bucket

Full client list

• Well maintained and tested:
  • Node.js express/connect middleware - prerendercloud-nodejs
    • Node.js pushstate server for pre-rendering - prerendercloud-server
      • Docker - github repo: pre-render docker or dockerhub
        • Fly.io (this is what we use for headless-render-api) - pre-render Fly.io
    • Next.js - prerendercloud-nextjs
    • AWS Lambda@Edge (CloudFront edge workers) - pre-render cloudfront
• The following work, but should be considered examples/inspiration since they are not as well maintained:
  • nginx (proxy_pass) - pre-render nginx
  • Apache (mod_rewrite, mod_proxy) - prerender apache
  • Ruby (Rack) - pre-render ruby
  • Golang (negroni and fasthttp) - pre-render golang
  • Windows IIS - pre-render iis
• other languages/libraries available on request, email us: support@headless-render-api.com