How to Install Rendertron for Magento PWA Studio to Use SSR

Table of contents

SSR (Server-side Rendering) is a solution for Magento PWA Studio to avoid Javascript handling problems, especially for search engine bots like Googlebot. Furthermore, SSR generally produces a fast FCP (First Contentful Paint) and TTI (Time to Interactive), which are two important factors in Core Web Vitals.

Rendertron is an open source solution based on headless Chromium, which has mechanisms to determine when a website has completed rendering. It waits until all network requests have finished and there is no outstanding work.

This tutorial will walk you through the steps of implementing Rendertron for your Magento PWA Studio project.

Step 1: Install rendertron-middleware

Run this command in your root directory:

yarn add rendertron-middleware

Step 2: require Rendertron add create pattern

Go to @magento/pwa-buildpack/lib/Utilities/serve.js

Add this below code to require Rendertron and create pattern:

const rendertron = require('rendertron-middleware');
const botPattern = "(googlebot|Googlebot|Googlebot-Mobile|Googlebot-Image|Google favicon|Mediapartners-Google|bingbot|slurp|java|wget|curl|Commons-HttpClient|Python-urllib|libwww|httpunit|nutch|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|biglotron|teoma|convera|seekbot|gigablast|exabot|ngbot|ia_archiver|GingerCrawler|webmon |httrack|webcrawler|grub.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|bibnum.bnf|findlink|msrbot|panscient|yacybot|AISearchBot|IOI|ips-agent|tagoobot|MJ12bot|dotbot|woriobot|yanga|buzzbot|mlbot|yandexbot|purebot|Linguee Bot|Voyager|CyberPatrol|voilabot|baiduspider|citeseerxbot|spbot|twengabot|postrank|turnitinbot|scribdbot|page2rss|sitebot|linkdex|Adidxbot|blekkobot|ezooms|dotbot|Mail.RU_Bot|discobot|heritrix|findthatfile|europarchive.org|NerdByNature.Bot|sistrix crawler|ahrefsbot|Aboundex|domaincrawler|wbsearchbot|summify|ccbot|edisterbot|seznambot|ec2linkfinder|gslfbot|aihitbot|intelium_bot|facebookexternalhit|yeti|RetrevoPageAnalyzer|lb-spider|sogou|lssbot|careerbot|wotbox|wocbot|ichiro|DuckDuckBot|lssrocketcrawler|drupact|webcompanycrawler|acoonbot|openindexspider|gnam gnam spider|web-archive-net.com.bot|backlinkcrawler|coccoc|integromedb|content crawler spider|toplistbot|seokicks-robot|it2media-domain-crawler|ip-web-crawler.com|siteexplorer.info|elisabot|proximic|changedetection|blexbot|arabot|WeSEE:Search|niki-bot|CrystalSemanticsBot|rogerbot|360Spider|psbot|InterfaxScanBot|Lipperhey SEO Service|CC Metadata Scaper|g00g1e.net|GrapeshotCrawler|urlappendbot|brainobot|fr-crawler|binlar|SimpleCrawler|Livelapbot|Twitterbot|cXensebot|smtbot|bnf.fr_bot|A6-Indexer|ADmantX|Facebot|Twitterbot|OrangeBot|memorybot|AdvBot|MegaIndex|SemanticScholarBot|ltx71|nerdybot|xovibot|BUbiNG|Qwantify|archive.org_bot|Applebot|TweetmemeBot|crawler4j|findxbot|SemrushBot|yoozBot|lipperhey|y!j-asr|Domain Re-Animator Bot|AddThis)";
const BOT_UA_PATTERN = new RegExp(botPattern);

Step 3: Add middleware

Inside serve.js, add this code before or after your image middleware:

app.use(rendertron.makeMiddleware({
    allowedForwardedHosts: [],
    timeout: 20000,
    proxyUrl: 'https://render-tron.appspot.com/render',
    userAgentPattern: BOT_UA_PATTERN
}));

Step 4: Apply and test your deployment

Run this command:

yarn install && yarn run build

Afterwards, try using Postman to send a GET request to your Magento PWA. If it returns a full HTML response then you know your Rendertron deployment is working!