Dynamisk rendering af Javascript til din PWA

Udfordringen med PWA

Mange af vores kunder lancerer PWA (Vuestorefront, Scandipwa, PWA Studio mfl.) i disse måneder, og for kunderne som kommer forbi den nye PWA-baserede webshop er det ofte en god oplevelse. Anderledes er det dog for søgemaskiners crawlers som ofte ved PWA løsninger ikke renderer siden korrekt pga. javascript, hvilket kan betyde at f.eks. Googlebot ikke får noget eller det meste indhold fra en given side med.

Når en bruger besøger et site der benytter Javascript, er det oftest browseren som eksekverer javascript og derefter downloader de elementer som siden består af. Det kalder man “Client side rendering”.  Det er fint for almindelige brugere, men for bots (googlebot, bingbot osv) er det slet ikke optimalt da de ofte ender med en tom side eller meget mindre indhold end ønsket. I stedet kan Javascript renderes på serveren, også kaldet “server side rendering”. Det kræver mange ressourcer og det giver ikke på samme måde mening at levere et allerede renderet resultatet til en browser.

Dynamisk rendering

Det er her dynamisk rendering kommer ind i billedet. Serveren kan sættes op til at skelne mellem Bots og alm. brugere, hvor bots får leveret en statisk HTML og brugerene får hele siden inkl. javascript. Dynamisk foretrækkes af søgemaskiner. Google henviser til 3 tools, og vi har god erfaring med én af dem:

Prerender.io

Prerender.io giver dig mulighed for at rendere Javascript korrekt for derefter at generere en statisk HTML som sendes retur til f.eks. Googlebot og andre crawlers og bots. Det kræver blot en lille snippet i server konfigurationen, som kigger på User Agent og sender bots forbi prerender (enten lokalt eller en betalt løsning host prerender.io) som returnerer resultatet som sendes til crawleren.

Implementering

Implementering af prerender er ganske simpelt. Du har brug for to komponenter. 

  1. Prerender – enten hosted ved prerender.io el. f.eks. en lokal Open Source instans installeret på din dedikerede server
  2. Middleware som sørger for at sende forespørgsler til enten prerender eller din applikation.

Hvis du ønsker en lokal installation af prerender skal du kontakte os for nærmere info. Hvis du ønsker at benytte den hostede løsning signer du bare op på https://prerender.io

Ift. middleware er den nemmeste løsning at benytte nedenstående snippet til apache. Token skal du kun benytte ved den hostede løsning og så skal du ændre <prerender-host> til enten localhost:3000 (lokal instans) eller service.prerender.io (hosted prerender)

#### Prerender start #####

RequestHeader set X-Prerender-Token "<Insert token here>"
RequestHeader set X-Prerender-Version "prerender-apache@2.0.0"

RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_
RewriteCond %{REQUEST_URI} ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff|\.svg))
RewriteRule ^(index\.html|index\.php)?(.*) http://<prerender-host>/https://%{HTTP_HOST}/$2 [P,END]
### Prerender slut ####

Om forfatter

Dennis Højgaard
Også kendt som "nye Dennis".

Relaterede artikler

Nyhedsbrev... Privat, sikkert og spam-fri.