React är ett JavaScript baserat front end ramverk som släpptes av Facebook för några år sedan. En webbplats byggd med React som front end ramverk har många fördelar jämfört med traditionella front end lösningar men kan också ha många nackdelar. En nackdel med en React baserad webbplats är att webbplatsen kan få låg synbarhet på sökmotorer. Detta kan bero på att sidor renderas i webbläsaren med CSR och att Google behöver jobba extra mycket för att komma åt innehållet och förstå sidorna. En lösning är att köra SSR så att förrenderade sidor visas till användare och robotar.
Fördelarna med React
Fördelarna med React förstår man när man tänker på att det är Facebook som skapade ramverket. Facebook kan nuförtiden liknas vid en webbaserad app mer än en traditionell hemsida byggd av massor med sidor i en logisk hierarki.
DOM trädet på en React webbplats
I en app föredrar man snabba laddningstider. Det vill säga, klickar man på en knapp så ska innehållet snabbt uppdateras eller laddas in. Detta kan åstadkommas genom att besökare vid det inledande besöket på webbplatsen laddar ner omfattande JavaScript kod som därefter exekveras i användarens webbläsare. JavaScript koden bygger upp DOM trädet som är själva HTML koden för webbplatsen. När DOM trädet är satt kan delar av DOM trädet uppdateras, såsom en lista med nyheter eller de senaste besökarna på din profilsida. Observera att vi nämnde att vi laddar ner JavaScript och att JS koden exekveras i besökarens webbläsare (klienten). Webbplatsens front end del byggs helt och hållet ihop i användarens webbläsare innan något visas för användaren.
DOM trädet på en traditionell webbplats
På en traditionell webbplats så byggs allt innehåll upp varje gång man går till en ny sida. Det tar lång tid att bygga en sida varje gång sidan ska visas. Detta eftersom en sida på en webbplats består av massor av komponenter. Webbserver behöver göra anrop till databaser för att inhämta innehåll, HTML kod behöver parsas, bilder behöver laddas in och hela DOM trädet ska byggas. På en traditionell webbplats så byggs webbplatsen upp på servern (exekveras) sedan visas den på klienten.
En React webbplats är snabb
I en webbapplikation som bygger på React så är det enda som uppdateras det som faktiskt ändras. Det betyder att om det enda som ändrar sig är en lista på nyheter när man klickar på hem-knappen så är det faktiskt bara det som uppdateras på webbplatsen. Eftersom man bara behöver uppdatera det som faktiskt ändras mellan olika vyer/sidor så går det mycket snabbt, det blir som att man använder en riktig app fastän man interagerar med en webbplats. Detta är precis det man vill ha när man bygger en webbplats med app liknande funktionalitet. Det är också något som är lockande när man vill bygga en ny modern webbplats.
Nackdelar med React
En av de större nackdelarna är att en webbplats byggd med React inte i standardutförande är lika sökmotorvänlig som en vanlig webbplats. Facebook strävar inte efter att allt innehåll ska vara sökmotorvänligt och indexeringsbart. Detta avspeglar sig i React som ju är perfekt om man vill bygga en app liknande webbapplikation med tillgänglighet i en webbläsare. Det är inte helt optimalt om man vill bygga en traditionell webbplats – Det finns dock lösningar i att bygga en sökmotorvänlig React baserad webbplats.
Andra nackdelar med React som jag inte nämner här är att React har djupa rötter i SPA världen. Detta indikeras av att man behöver konfigurera upp ramverket ifall man vill ha stöd för separata URLer för olika sidor. Det är också 100% JavaScript och sökmotorer har traditionellt alltid haft något problem med JS – Även om Google blir starkare här hela tiden.
Hur renderas en React baserad webbplats i en webbläsare
Ett av problemen med React är hur webbplatsen renderas i en webbläsare som standard. Man pratar främst om CSR, Client Side Rendering och SSR, Server Side Rendering i hur renderingen sker. Vi börjar att titta på Client Side Rendering eftersom det tydligt visar problematiken med en React baserad webbplats.
Client Side Rendering – CSR
Så här ser flödet ut på en React baserad webbplats med Client Side Rendering – CSR
- Användare/robot går till en webbadress i en webbläsare
- En tom html-fil laddas in vars syfte är att ladda in JS filer i nästa steg
- JS filer laddas ner till webbläsaren
- React laddas
- DOM trädet byggs upp i webbläsaren – Först nu blir innehåll synligt i webbläsaren och synligt för sökrobotar
- Användaren kan nu interagera med webbplatsen
- Klickar användaren på en länk så renderar React om innehållet genom att uppdatera relevant del i DOM trädet. React behöver inte laddas ner igen.
Problematiken ovan är att ingenting renderas innan React har laddats ned till användarens webbläsare och exekverats i webbläsaren. Det är inte ett problem för en besökare, men för Google är det problematiskt.
Hur crawlar Google JavaScript baserade webbsidor
Googles robotar spindlar webbplatser i syfte att indexera samt förstå innehållet på en webbplats och innehållet på enskilda sidor. Googles robotar förstår inte JS som standard. Därför hamnar sidorna i en speciell kö för att renderas. Se flöde nedan
- URL hittas av GoogleBot och hamnar i en Crawl kö
- GoogleBot besöker URL
- GoogleBot placerar URL i en andra Crawl kö för JS baserade webbsidor
- Google renderar JS sidan
- Google går igenom innehållet på sidan som nu är tillgängligt då det är renderat
- Sidan hamnar i Googles index
Denna kö är till för sidor som ska gå igenom en JavaScript renderare i syfte att Google ska kunna komma åt innehållet på sidan. Nackdelen är att Google behöver göra mycket arbete själv för att komma åt innehållet på webbplatsen. Istället för att crawla sidan en gång behöver Google alltså göra dubbelt så mycket arbete för att komma åt innehållet. Problemet exemplifieras ytterligare när vi tänker oss att det finns miljarder med webbplatser på nätet som Google behöver indexera.
Man vill i princip alltid göra det så lätt och smidigt som möjligt för Google att förstå innehållet på en webbplats ifall man vill att webbplatsen ska ha optimala förutsättningar för att ha en god synbarhet på Google.
En webbplats med CSR får inte optimala förutsättningar till en god synbarhet på Google i dagsläget. Man får dock en mycket snabbladdad sida (när React väl är nedladdat), detta kan mycket väl vara ett viktigare mål än organisk synbarhet. Speciellt om vi tänker oss React baserade webbapplikationer såsom Facebook.
Server Side Rendering
Så här ser flödet ut på en React baserad webbplats med Server Side Rendering – SSR
- Användare/robot går till en webbadress
- Innehåll visas i webbläsaren eftersom det finns förrenderade HTML-sidor lagrade på servern
- JS filer laddas ner till webbläsaren
- React laddas
- Användaren kan nu interagera med webbplatsen
- Klickar användaren på en länk så renderar React om innehållet genom att uppdatera relevant del i DOM trädet. React behöver inte laddas ner igen.
Med en React baserad webbplats som kör Server Side Rendering så för renderas sidor på servern. Det finns en HTML-version av en sida redan färdig, redo att visas i en webbläsare ifall en användare eller sökrobot begär den. Med SSR så behöver man alltså inte vänta på att något skall laddas ned och renderas hos klienten.
En intressant observation gällande SSR är att den inledande inladdningen är den förrenderade HTML-sidan. Den förrenderade HTML-sidan är icke interaktiv, det vill säga, inget händer om besökare klickar någonstans på den. Först när React laddats blir sidan interaktiv. Nästkommande anrop till webbplatsen går till React. Detta har stora fördelar då webbplatsen kan leverera sidor snabbt som redan är populerade med innehåll. Det innebär också att man har en snabb webbplats -utifrån användares synvinkel- då React aktiveras efter att den initiala förrenderade HTML-sidan har visats.
Prerender – dynamic rendering
Ett tredje alternativ är att nyttja en prerender som för-renderar sidor på en React webbplats till statiska HTML-sidor.
När Google besöker en webbadress på en webbplats med prerendering så visas den prerenderade sidan. Däremot, besöker en användare sidan så känner systemet av detta och laddar in innehållet med Client Side Rendering. Detta är inte cloaking ifall det konfigureras korrekt och alla vyer har samma innehåll.
Nackdelen med en prerender lösning är att det inte fungerar optimalt med dynamiskt innehåll. Detta då en crawler behöver gå igenom hela webbplatsen och bygga statiska HTML filer. Att köra prerender på en mycket dynamisk webbplats såsom Twitter skulle innebära enorma prestandakrav på crawlern i syfte att kunna bygga statiska HTML-sidor i stor volym snabbt.
Slutsats
- Har man en webbplats byggd i ett modernt JavaScript ramverk såsom React och vill ha en webbplats med hög organisk synbarhet behöver man göra så att Google enkelt kommer åt innehållet.
- Sökmotorer har i stort sett alltid haft “problem” med JavaScript baserade webbplatser.
- En React baserad webbplats med bara CSR kommer leda till en mycket låg organisk synbarhet eftersom sökmotorer måste jobba hårt för att förstå innehållet.
- En React baserad webbplats med SSR kommer leda till en webbplats med goda förutsättningar till bra organisk synbarhet.
- En React baserad webbplats med prerender kommer leda till en webbplats med goda förutsättningar till organisk synbarhet. Dock är det inte en optimal lösning på en webbplats med mycket dynamiskt innehåll. Detta då man behöver generera statiska sidor med hög frekvens.