Client-Side Rendering (CSR) eli selainpuolen renderöinti tarkoittaa tekniikkaa, jossa verkkosivun sisältö rakennetaan käyttäjän selaimessa JavaScriptin avulla. Palvelin lähettää lähes tyhjän HTML-pohjan ja JavaScript-koodin, joka muodostaa varsinaisen sisällön.
Miten CSR toimii?
CSR-sivuston latautuessa tapahtuu seuraava prosessi:
- Selain pyytää sivua palvelimelta
- Palvelin lähettää minimaalisen HTML:n — tyypillisesti vain
<div id="app"></div>ja JavaScript-tiedostot - Selain lataa ja suorittaa JavaScriptin — React, Vue tai Angular rakentaa sivun sisällön
- Sisältö ilmestyy näkyviin — käyttäjä näkee valmiin sivun vasta JavaScript-suorituksen jälkeen
Tämä tarkoittaa, että käyttäjä näkee tyhjän tai latausanimaation sisältävän sivun, kunnes JavaScript on ladattu ja suoritettu.
CSR:n edut ja käyttökohteet
CSR sopii erityisesti interaktiivisiin sovelluksiin:
- SPA-sovellukset (Single Page Applications) — saumattomat sivujen väliset siirtymät ilman uudelleenlatausta
- Dashboardit — reaaliaikaisesti päivittyvä data
- Verkkosovellukset — Gmail, Trello, Figma-tyyppiset sovellukset
- Nopeat sivunvaihdot — ensimmäisen latauksen jälkeen navigointi on välitöntä
CSR:n ongelmat yrityskäytössä
Pk-yrityksen kotisivuille CSR on harvoin hyvä valinta:
- Heikko SEO — hakurobotit eivät välttämättä suorita JavaScriptia tai tekevät sen viiveellä
- Hidas ensimmäinen lataus — suuri JavaScript-paketti ladataan ennen sisällön näkymistä
- Toimintahäiriöt — sivusto ei toimi lainkaan ilman JavaScriptia (esim. vanhemmat laitteet, yrityspalomuurit)
- Core Web Vitals -ongelmat — Largest Contentful Paint (LCP) kärsii merkittävästi
- Sosiaalisen median jakaminen — Open Graph -kuvat ja kuvaukset eivät toimi oikein
Yhteenveto
Client-Side Rendering sopii web-sovelluksiin, jotka vaativat rikasta vuorovaikutusta, mutta yritysten kotisivuille se on huono valinta. Parempia vaihtoehtoja ovat SSR (palvelinpuolen renderöinti) tai SSG (staattinen sivugenerointi), jotka tarjoavat saman visuaalisen lopputuloksen paremmalla hakukonenäkyvyydellä ja nopeudella. Staattiset sivustomme perustuvat SSG:hen, joka on nopein ja hakukoneystävällisin vaihtoehto.