Server-Side Rendering (SSR) eli palvelinpuolen renderöinti tarkoittaa tekniikkaa, jossa verkkosivun HTML-sisältö rakennetaan palvelimella ja lähetetään selaimelle valmiina. Selain saa valmiin sivun eikä sen tarvitse suorittaa JavaScriptia sisällön näyttämiseksi.
Miten SSR eroaa muista renderöintitavoista?
Verkkosivun renderöintiin on kolme pääasiallista tapaa:
| Tapa | Missä renderöidään | Hakukone näkee | Ensimmäinen lataus |
|---|---|---|---|
| SSR | Palvelimella | Kaiken sisällön | Nopea |
| CSR | Selaimessa | Tyhjän HTML:n | Hidas |
| SSG | Buildausvaiheessa | Kaiken sisällön | Erittäin nopea |
SSR yhdistää dynaamisuuden ja hakukoneystävällisyyden: sisältö voi muuttua jokaisen pyynnön yhteydessä, mutta hakukoneet näkevät silti valmiin HTML-sivun.
SSR:n edut
Palvelinpuolen renderöinti tarjoaa merkittäviä etuja:
- Parempi SEO — hakukoneet saavat valmiin HTML-sivun ilman JavaScript-renderöintiä
- Nopeampi ensimmäinen näyttö — käyttäjä näkee sisällön heti, ennen JavaScriptin latautumista
- Sosiaalisen median jakaminen — Open Graph -tagit toimivat oikein, koska ne ovat HTML:ssä
- Saavutettavuus — sisältö toimii ilman JavaScriptia (ruudunlukijat, hitaat yhteydet)
SSR:n haitat
SSR ei ole kuitenkaan ongelmaton:
- Palvelinkuorma — jokainen sivu renderöidään palvelimella erikseen, mikä kuluttaa resursseja
- Hitaampi TTFB — palvelin käyttää aikaa renderöintiin ennen vastauksen lähettämistä
- Monimutkaisempi infrastruktuuri — tarvitaan palvelimen, joka pystyy suorittamaan koodia (ei pelkkä staattinen hosting)
- Kustannukset — palvelimen ylläpito maksaa enemmän kuin staattinen hosting
SSR vs. SSG pk-yritykselle
Pk-yrityksen kotisivuille SSG (Static Site Generation) on lähes aina parempi valinta kuin SSR:
- Sisältö ei muutu jokaisella sivulatauksella
- Sivusto ei tarvitse reaaliaikaista dataa
- Staattinen hosting on edullisempaa ja nopeampaa
- Sivusto toimii ilman palvelinta (CDN riittää)
SSR kannattaa valita, kun sivusto tarvitsee reaaliaikaista, käyttäjäkohtaista sisältöä (esimerkiksi kirjautuminen, ostoskori, henkilökohtaiset suositukset).
Yhteenveto
Server-Side Rendering on tehokas ratkaisu JavaScript-sovellusten hakukonenäkyvyysongelmiin. Se tarjoaa CSR:n dynaamisuuden ja SSG:n hakukoneystävällisyyden. Pk-yrityksen yksinkertaisille kotisivuille SSG on kuitenkin yleensä paras vaihtoehto — se on nopeampi, edullisempi ja yksinkertaisempi ylläpitää.