Repository files navigation

Please note that this project isdeprecated. Dynamic renderingis not a recommended approach andthere are better approaches to rendering on the web.

Rendertron will not be actively maintained at this point.

Rendertron is a headless Chrome rendering solution designed to render & serialise web pages on the fly.

Rendertron is designed to enable your Progressive Web App (PWA) to serve the correctcontent to any bot that doesn't render or execute JavaScript. Rendertron runs as astandalone HTTP server. Rendertron renders requested pages using Headless Chrome,auto-detecting when your PWA has completed loadingand serializes the response back to the original request. To use Rendertron, your applicationconfiguresmiddleware to determine whether to proxy a request to Rendertron.Rendertron is compatible with all client side technologies, includingweb components.

• Middleware
• API
  • Render
  • Screenshot
  • Invalidate cache
• FAQ
  • Query parameters
  • Page render timing
  • Rendering budget timeout
  • Web components
  • Status codes
• Installing & deploying
  • Building
  • Running locally
  • Deploying to Google Cloud Platform
  • Deploying using Docker
  • Config
  • Troubleshooting

Once you have the service up and running, you'll need to implement the differential servinglayer. This checks the user agent to determine whether prerendering is required.

This is a list of middleware available to use with the Rendertron service:

• Express.js middleware
• Firebase functions (Community maintained)
• ASP.net core middleware (Community maintained)
• Python (Django) middleware and decorator (Community maintained)

Rendertron is also compatible withprerender.io middleware.Note: the user agent lists differ there.

GET /render/<url>

Therender endpoint will render your page and serialize your page. Options arespecified as query parameters:

• mobile defaults tofalse. Enable by passing?mobile to request themobile version of your site.
• refreshCache: PassrefreshCache=true to ignore potentially cached render resultsand treat the request as if it is not cached yet.The new render result is used to replace the previous result.

GET /screenshot/<url>POST /screenshot/<url>

Thescreenshot endpoint can be used to verify that your page is renderingcorrectly.

Both endpoints support the following query parameters:

• width defaults to1000 - specifies viewport width.
• height defaults to1000 - specifies viewport height.
• mobile defaults tofalse. Enable by passing?mobile to request themobile version of your site.
• timezoneId - specifies rendering for timezone.

Additional options are available as a JSON string in thePOST body. SeePuppeteer documentationfor available options. You cannot specify thetype (defaults tojpeg) andencoding (defaults tobinary) parameters.

GET /invalidate/<url>

Theinvalidate endpoint will remove cache entried for<url> from the configured cache (in-memory, filesystem or cloud datastore).

When setting query parameters as part of your URL, ensure they are encoded correctly. In JS,this would beencodeURIComponent(myURLWithParams). For example to specifypage=home:

https://render-tron.appspot.com/render/http://my.domain/%3Fpage%3Dhome

The service attempts to detect when a page has loaded by looking at the page load event, ensuring thereare no outstanding network requests and that the page has had ample time to render.

There is a hard limit of 10 seconds for rendering. Ensure you don't hit this budget by ensuringyour application is rendered well before the budget expires.

Headless Chrome supports web components but shadow DOM is difficult to serialize effectively.As such,shady DOM (a lightweight shim for Shadow DOM)is required for web components.

If you are using web components v0 (deprecated), you will need to enable Shady DOM torender correctly. In Polymer 1.x, which uses web components v0, Shady DOM is enabled by default.If you are using Shadow DOM, override this by setting the query parameterdom=shady whendirecting requests to the Rendertron service.

If you are using web components v1 and eitherwebcomponents-lite.js orwebcomponents-loader.js,set the query parameterwc-inject-shadydom=true when directing requests to the Rendertronservice. This renderer service will force the necessary polyfills to be loaded and enabled.

Status codes from the initial requested URL are preserved. If this is a 200, or 304, you canset the HTTP status returned by the rendering service by adding a meta tag.

<metaname="render:status_code"content="404"/>

To install Rendertron and run it locally, first install Rendertron:

npm install -g rendertron

With Chrome installed on your machine run the Rendertron CLI:

rendertron

Clone and install dependencies:

git clone https://github.com/GoogleChrome/rendertron.gitcd rendertronnpm installnpm run build

With a local instance of Chrome installed, you can start the server locally:

npm run start

gcloud app deploy app.yaml --project <your-project-id>

Rendertron no longer includes a Docker file. Instead, refer toPuppeteer documentationon how to deploy run headless Chrome in Docker.

When deploying the service, set configuration variables by including aconfig.json in theroot. Available configuration options:

• timeoutdefault10000 - set the timeout used to render the target page.
• portdefault3000 - set the port to use for running and listening the rendertron service. Note if process.env.PORT is set, it will be used instead.
• hostdefault0.0.0.0 - set the hostname to use for running and listening the rendertron service. Note if process.env.HOST is set, it will be used instead.
• widthdefault1000 - set the width (resolution) to be used for rendering the page.
• heightdefault1000 - set the height (resolution) to be used for rendering the page.
• reqHeadersdefault{} - set the additional HTTP headers to be sent to the target page with every request.
• cachedefaultnull - set todatastore to enable caching on Google Cloud using datastoreonly use if deploying to google cloud,memory to enable in-memory caching orfilesystem to enable disk based caching
• cacheConfig - an object array to specify caching options
• renderOnly - restrict the endpoint to only service requests for certain domains. Specified as an array of strings. eg.['http://render.only.this.domain']. This is a strict prefix match, so ensure you specify the exact protocols that will be used (eg. http, https).
• closeBrowserdefaultfalse -true forces the browser to close and reopen between each page render, some sites might need this to prevent URLs past the first one rendered returning null responses.
• restrictedUrlPatterndefaultnull - set the restrictedUrlPattern to restrict the requests matching given regex pattern.

• cacheDurationMinutesdefault1440 - set an expiry time in minues, defaults to 24 hours. Set to -1 to disable cache Expiration
• cacheMaxEntriesdefault100 - set the maximum number of entries stored in the selected cache method. Set to-1 to allow unlimited caching. If using the datastore caching method, setting this value over1000 may lead to degraded performance as the query to determine the size of the cache may be too slow. If you want to allow a larger cache indatastore consider setting this to-1 and managing the the size of your datastore using a method like thisDeleting Entries in Bulk
• snapshotDirdefault<your os's default tmp dir>/renderton -filesystem only the directory the rendertron cache files will be stored in

An example config file specifying a memory cache, with a 2 hour expiration, and a maximum of 50 entries

{"cache":"memory","cacheConfig":{"cacheDurationMinutes":120,"cacheMaxEntries":50}}

If you're having troubles with getting Headless Chrome to run in yourenvironment, refer to thetroubleshooting guidefor Puppeteer.