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!
