Ha évek óta foglalkozik a SEO-val, akkor lehet, hogy már találkozott a kiszolgálóoldali renderinggel (SSR), mint az egyik fogalommal. Miért válassza a szerveroldali renderelést (SSR) a kliensoldali renderelés helyett?
Ebben az útmutatóban bemutatom a Server Side Rendering (SSR) fogalmát, jelentőségét a modern webfejlesztésben, valamint különbséget teszek a szerveroldali rendering és a kliensoldali renderelés között. Bemutatjuk továbbá azokat a keretrendszereket és könyvtárakat, amelyek támogatják a szerveroldali renderelést, és hogyan teszik ezt.
Tartalomjegyzék
Mi az a szerveroldali renderelés (SSR)?
A Server Side Rendering (SSR) egy webfejlesztési technika, amelynek során a weboldal tartalma a szerveren jelenik meg az ügyfél böngészője helyett.
Ahhoz, hogy ez megtörténjen, a szerver létrehoz egy teljesen renderelt HTML oldalt, amelyet elküld a kliens böngészőjének, ami azt jelenti, hogy a kiszolgáló végzi el a nehéz munkát. A böngésző egy megjelenítésre kész oldalt kap, ami felgyorsítja a kezdeti betöltési időt.
Hogyan működik a szerveroldali renderelés?
Amikor egy felhasználó weboldalt kér, a szerver összeállítja az összes szükséges JavaScript-, HTML- és CSS-kódot, majd elküldi a teljes formájú oldalt a felhasználó böngészőjének.
Mint ilyen, a böngészőnek nem kell a semmiből létrehoznia egy oldalt, ahogyan az ügyféloldali megjelenítésnél történik. Az SSR gyors kezdeti betöltési oldalhoz vezet, és jó a SEO számára is.
A szerveroldali megjelenítés olyan webes keretrendszereket használ, mint a Vue.js és a Gatsby.js a színfalak mögött, hogy dinamikusan hozzon létre egy teljesen működőképes HTML-oldalt.
Ezek a keretrendszerek adatokat gyűjtenek be API-kból vagy adatbázisokból, majd összetevőket vagy sablonokat használnak funkcionális HTML-dokumentumok létrehozásához. Miután a szerver végzett az oldal létrehozásával, minden további feldolgozás nélkül elküldi azt a kliens böngészőjének.
Kép jóváírása: reactpwa
A szerveroldali megjelenítés így működik:
- A kliens HTTP kérést küld: A felhasználó beír egy címet a böngésző címsorába. A böngésző HTTP kapcsolatot létesít, és kérést küld a szervernek.
- Adatlekérés: A szerver adatokat kér le az API-kból vagy az adatbázisból.
- Előmegjelenítés: A szerver az összes szükséges JavaScript-összetevőt statikus HTML-be fordítja, és elküldi ezt a HTML-t a kliens böngészőjének.
- Oldal betöltése és megjelenítése: Az ügyfél letölti és megjeleníti a HTML-t a szerverről.
- Hidratálás: Az ügyfél végül letölti az összes JavaScript-kódot, hogy interaktivitást adjon a HTML-oldalhoz.
Szerveroldali renderelés vs kliensoldali rendering
A kliensoldali renderelés a szerveroldali renderelés ellentéte. Alapvetően a böngésző létrehoz egy HTML-dokumentumot, amelyet megjelenít a felhasználóknak. Ezek a különbségek a két megközelítés között:
Szolgáltatás Szerveroldali renderelés (SSR) Kliensoldali renderelés (CSR) Kezdeti betöltési időGyors kezdeti betöltési idő Lassú lehet, mivel a kliensoldali betöltésre támaszkodik.Felhasználói élmény Továbbfejlesztett és jobb felhasználói élmény az első látogatáskor Időnként lassabb működést eredményezhet felhasználói élmény az első interakció során, de a későbbi látogatások során növekszik. Hozzáférhetőség Az összes lényeges tartalom betöltődik a kiszolgálón megjelenített kezdeti HTML-dokumentummal A hozzáférhetőség problémát jelenthet, különösen akkor, ha a felhasználók letiltották a JavaScriptetSEO teljesítménye AzSSR bejelöli a megfelelő négyzetet a SEO számára Egyes keresőmotorok megtalálhatják nehéz indexelni néhány dinamikusan generált oldalt a kliens oldalon. Skálázhatóság Könnyen méretezhető a nagy forgalmú, szerveroldali megjelenítést alkalmazó webhelyek A fejlesztőknek egy jól átgondolt megközelítést kell kidolgozniuk a kliensoldali megjelenítést gyakorló webhelyek méretezésére. Biztonság Könnyen csökkenthető a szerver -oldali sebezhetőségek, amikor az oldalak betöltődnek a kiszolgálóra. Hajlamos olyan támadásokra, mint például a cross-site scripting (XSS) és egyéb, az ügyféloldali megjelenítéssel kapcsolatos sebezhetőségek.
A szerveroldali renderelés előnyei a SEO számára
- Gyors kezdeti betöltési idő: Az egyik olyan tényező, amelyet webhelyének látogatói figyelembe vesznek, hogy mennyi ideig tart az oldal betöltése. Az SSR lehetővé teszi, hogy a felhasználók szinte azonnal láthassák a teljesen betöltött HTML-oldalt. Az azonnali betöltés csökkenti a várakozási időt, mielőtt interakcióba lépne egy weboldallal.
- Gyors teljesítmény lassú eszközökön/hálózatokon: Előfordulhat, hogy a felhasználók által a weboldalak eléréséhez használt hálózat lassú, vagy nem túl gyors operációs rendszereken futó eszközöket használnak. A szerveroldali renderelés azt jelenti, hogy a felhasználói eszközökön nem kell annyi JavaScriptet futtatniuk, ami növeli a teljesítményüket. Az ilyen hálózatoknak vagy eszközöknek már nincs szükségük nagy sávszélességre vagy feldolgozási teljesítményre a betöltött HTML-oldalak megjelenítéséhez.
- Következetes felhasználói élmény: Az SSR lehetővé teszi, hogy jó első benyomást keltsen a Time to First Paint (TTFP) segítségével. Az ilyen felhasználók az Ön webhelyét elsőként fogják fel, amikor a HTML-oldalak gyorsan betöltődnek a szerveroldali megjelenítésnek köszönhetően.
- Továbbfejlesztett SEO: Az olyan keresőmotorok, mint a Google, a Bing és a YouTube, sok mindent figyelembe vesznek a weboldalak rangsorolásakor. Ellenőrzik például a felhasználói élményt, azt, hogy mennyi időt töltenek az emberek az oldalain, és a betöltési sebességet. Az SSR mindezeket a területeket javítja, ami azt jelenti, hogy alkalmazása valószínűleg magasabb rangot kap a keresőmotorokban.
- Könnyen kezelhető dinamikus tartalom: A keresőmotorok szeretik a dinamikus tartalmat. Az SSR segítségével a fejlesztők mostantól egyszerűen kezelhetik a dinamikus tartalmat, és személyre szabhatják/szabhatják a tartalmat a felhasználói bemenetek és preferenciák alapján.
- Skálázhatóság és gyorsítótárazás: Az SSR-ben a kiszolgáló végzi el a kezdeti betöltést, ami csökkenti a kliens által kezelt feldolgozás mennyiségét, és jobban méretezhetővé teszi. Az SSR szerverszintű és tartalomszolgáltatói hálózat (CDN) gyorsítótárat is használhat a szerver terhelésének csökkentése és a teljesítmény javítása érdekében.
Néhány különféle eszköz és keretrendszer valósítja meg az SSR-t. Néhányat csak a szerveroldali megjelenítés támogatására terveztek, míg mások a kliensoldali és a szerveroldali megjelenítést támogatják. Íme néhány azok közül, amelyekkel valószínűleg kapcsolatba kerül a webfejlesztő világban:
Vue.js
Vue.js egy JavaScript-keretrendszer felhasználói felületek építésére, és szabványos JavaScript-re, HTML-re és CSS-re épül. Ezzel a keretrendszerrel egyszerű és összetett felhasználói felületeket hozhat létre a komponens alapú és deklaratív programozási modell használatával.
A Vue összetevői alapértelmezés szerint a dokumentumobjektum-modellt (DOM) állítják elő és kezelik a böngészőben kimenetként. Ez a keretrendszer azonban SSR-t is használ az ilyen komponensek HTML-karakterláncokká történő megjelenítésére a szerveren, és közvetlenül a böngészőbe küldésére. A szerver által előállított Vue-alkalmazások „univerzálisnak” minősülnek, mivel a kód nagy része a szerveren és az ügyfélen fut.
React.js
Reagál egy JavaScript könyvtár felhasználói felületek építésére. Ez a könyvtár komponens alapú programozási modellt használ, ahol az alkalmazást kis, újrafelhasználható komponensekre oszthatja fel. A React deklaratív is, így a kód könnyen megjósolható és hibakereshető.
A React alapértelmezés szerint mind a kliens-, mind a szerveroldali megjelenítést megvalósítja. Ha kiszolgálóoldali megjelenítést kell megvalósítania egy React alkalmazásban, akkor azt egy Node.js alkalmazáskeretrendszerrel, például Express.js-sel kell beállítania. Frissítenie kell a package.json fájlban található szkripteket is, hogy biztosítsa, hogy az alkalmazás „elinduljon” az Express szerverről.
Gatsby
Gatsby egy React alapú keretrendszer weboldalak készítéséhez. Ez a nyílt forráskódú keretrendszer célja, hogy segítse a fejlesztőket gyors webalkalmazások készítésében. A Gatsby integrálható különféle tartalomkezelő rendszerekkel, mint például a Drupal és a WordPress, így egyszerűvé téve az adatok lekérését.
A beállításhoz egy Node.js szerverre van szükség szerveroldali renderelés a Gatsby-n. Az SSR a Gatsby Cloudon fut, ahol minden kérés elküldésre kerül a getServerData függvény dolgozói folyamatának. A munkafolyamat összes adata átkerül a React összetevőhöz, amely egy HTML-dokumentumot ad vissza.
Szögletes
Szögletes egy TypeScript használatával épített fejlesztői platform. Ez a platform komponens alapú keretrendszerrel rendelkezik, amelyet webalkalmazások készítésére használhat. Az Angular segítségével kis és vállalati szintű alkalmazásokat készíthet.
A Reacthoz hasonlóan az Angular alapértelmezés szerint nem valósítja meg az SSR-t. Az Angular-alkalmazást azonban beállíthatja úgy, hogy a kiszolgálóoldali renderelést megvalósítsa az Express.js-szal, egy node.js háttérrendszerrel kombinálva. Az Angular Universal lehetővé teszi az Angular összetevők megjelenítését a szerveren, és csökkenti a kezdeti betöltési időt.
Hogyan ellenőrizhető, hogy egy webhely SSR-t vagy CSR-t használ-e
Ha Ön fejlesztő vagy marketingszakember, nehéz megállapítani, hogy egy webhely szerver- vagy kliensoldali megjelenítést használ-e, amikor meglátogatja. Szerencsére megvizsgálhatja a webhelyet, hogy meghatározza az általa használt megjelenítési megközelítést. Megvizsgálhatjuk a etoppc.com weboldalunkat, hogy bemutassuk. Jobb gombbal bármelyik oldalra kattintok, majd kiválasztom az „Oldal forrásának megtekintése” lehetőséget.
Ha olyan címkéket lát, mint az ,
- , akkor biztos lehet benne, hogy futnak a szerver oldalon.
- Megnövekedett kód összetettsége: A szerveroldali renderelés megvalósítása további konfigurációt igényelhet a szerver oldalon. Egy ilyen megközelítés megnövekedett kódbázishoz vezethet a szerver oldalon, ami megnehezíti a karbantartást.
- Megnövekedett szerverterhelés: Annak ellenére, hogy kiemeltük, hogy az SSR javíthatja a betöltési időt, a nagy forgalom idején a teljesítmény szűk keresztmetszete is lehet. A szerver felelős a HTML-tartalom megjelenítéséért, ami időnként túlterhelheti a szervert, vagy akár összeomláshoz is vezethet.
A szerveroldali renderelés korlátai
A szerveroldali renderelés ugyanaz, mint a szerveroldali címkézés?
Nem. A szerveroldali megjelenítés egy webfejlesztési megközelítés, ahol a szerver egy teljesen betöltött HTML oldalt küld a böngészőnek. Az SSR célja a gyors kezdeti betöltési idő növelése és a SEO javítása.
Az ügyféloldali címkézés az, ahol az összes elemzés és nyomon követés a szerver oldalon történik. Amikor a címkéket a szerveren kezelik, a kliens böngészőjének már nem kell ilyen folyamatokkal foglalkoznia, ami növeli a biztonságot és a teljesítményt. Ismerje meg a szerveroldali címkézést, hogy jobban megértse.
Következtetés
A szerveroldali megjelenítés jó választás minden webfejlesztő számára, aki növelni szeretné alkalmazása teljesítményét a megnövekedett betöltési idők és a jobb felhasználói élmény révén.
Másrészt, ha nincs megfelelően implementálva, az SSR kihívást jelenthet, mivel nehézkessé válik a kód karbantartása. Az SSR előnyei azonban messze meghaladják a kihívásokat, ezért sok szervezet alkalmazza azt.
Ezután olvashat arról is, hogy miért érdemes szerveroldali címkézést használni az ügyféloldali címkézés helyett.