Mennyire SEO barát a Laravel Livewire?

Bevezető

A Laravel Livewire nagyon felkapott lett az elmúlt időben. Sok fejlesztő számára vonzó pont a választásnál, hogy ugyanazt a technológiát használhatja a frontenden és a backenden, a Laravel alkalmazásával. Emellett a Livewire segítségével dinamikus felületeket készíthetünk, csakúgy, mint a Vue.js vagy a React esetében.

Manapság minden nyilvánosan elérhető weboldal számára elengedhetetlenné vált a SEO barát kialakítás. A Vue.js, React vagy az Angular viszont nem a megfelelő választás, ha SEO optimalizációról van szó. A tartalom optimális megjelenítése egy bonyolult folyamat a JavaScript keretrendszerek esetében, így a fejlesztők nagy kihívás előtt állnak, ha azt szeretnék, hogy a web crawlerek minél hatékonyabban tanulmányozzák az adott weboldal HTML tartalmát. (Igen, szerveroldali megjelenítésről van szó.)

A Livewire ígérete pontosan az, hogy teljes mértékig SEO barát marad, mivel az oldal betöltése a Laravel Blade template megjelenítésével ér véget.

Vizsgáljuk meg, hogy hatékonyabb-e SEO optimalizáció szempontjából, mint a már említett SPA keretrendszerek.

De mit is jelent pontosan az, hogy valami SEO barát?

A keresőmotorok, mint például a Google vagy a Bing, botok használatával járják be a webet. Ezeknek a botoknak a célja az, hogy megtudják miről szól a weben található (szinte) összes weboldal. Az oldal betöltése után ezek a botok eltárolják az általuk talált információkat, hogy később bármikor újra elérhetőek legyenek, ha éppen szükséges. Ezekről az információkról kártyák készülnek, ami a címből, leírásból és az oldal tartalmából áll. Amikor a felhasználó megpróbál megtalálni valamit a világhálón, ezeket a kártyákat használva fogják a keresőmotorok a legodaillőbb információt mutatni a keresési találatok közt.

A nagy probléma viszont az, hogy a crawler botok nem futtatnak JavaScript kódot. Csak azt a tartalmat látják, ami az oldal betöltésekor közvetlenül elérhető. Ha az általunk használt keretrendszer (pl. Next, Nuxt stb.) nem képes arra, hogy a reaktív felületeket előre lerenderelt HTML oldalakká változtassa, akkor SEO problémába fogunk ütközni.

Ezeknek a keretrendszereknek a készítői észrevették, hogy ez gondot jelent, és idővel kialakították a szerveroldali megjelenítésen (SSR) alapuló megoldásokat. A Next.js esetében ez beépült a könyvtárba, míg a Nuxt.js esetében viszont opcionális. Nagyon fontos, hogy ahhoz, hogy SSR alapú megoldásokhoz nyúljunk, először ismernünk kell az ügyfél igényeit, majd ezzel párhuzamban előre kell tudnunk tervezni architektúra szempontjából is. Sajnos elég ritkán fordul elő, hogy kellő mennyiségű információ áll ehhez a fejlesztők rendelkezésére a projekt indulásakor, hiszen az ügyfeleknek gyakran változnak az igényeik. Így az idő haladtával az egész projekt átírása nagyon költségessé válhat.

A Vue.js keretrendszer SSR útmutatója például az alábbi pontokat említi problémaként a tervezés során:

• Néhány külső könyvtár különös figyelmet igényel a megfelelő működés érdekében, szerveroldali megjelenítés esetén.
• Részletesebbé válik az alkalmazás telepítése és élesítése. A statikus SPA oldalakkal ellentétben, a szerveroldali megjelenítés egy specifikus környezetet igényel.
• Nagyobb szerveroldali terhelés. Mivel az egész alkalmazást a Node.js fogja kiszolgálni, így nagyobb lesz a CPU terhelés, mintha statikus fájlokat szolgálnánk ki a webszerverrel. Magas látogatottság esetén érdemes elgondolkozni terheléselosztási és gyorsítótárazási módszereken.

Érdemes megemlíteni, hogy az SSR nehézségeiből fakadóan, az utóbbi időben szintén népszerűvé váltak a statikus oldal generátorok. Ezek használatával a statikus oldalak a backenden készülnek el, megadott templatek és adatok alapján. Tehát, a ritkán változó tartalmú oldalaknál inkább a statikus oldal generátorokat (SSG) javasuljuk, mintsem a szerveroldali megjelenítést (SSR). Egy, a sok erre alkalmas keretrendszer közül a VitePress.

Hogyan generál HTML oldalakat a Livewire?

A Livewire komponensek teljesen state-mentesek. A színfalak mögötti működés következtében mégis úgy tűnhet, hogy rendelkeznek valamilyen state-tel. Leegyszerűsítve, minden egyes user-interakció egy AJAX kérelmet indít el a szerver felé, majd a Livewire automatikusan frissíti a DOM-ot a szervertől kapott state alapján.

A komponensekben történő interakciókat Livewire attribútumokkal adhatjuk meg a DOM-ban. A Laravel innen tudja, hogy a Livewire-nek kell lekezelnie az adott eseményt.

A crawlerek csak a komponensek kezdetleges állapotát fogják látni. Ebből fakadóan a Livewire komponensek SEO barátak, de csak a kezdeti állapotuknál.

Ha többet szeretnél megtudni arról, hogy a Livewire miben különbözik az Inertia.js-től, olvasd el az alábbi cikkünket az Inertia.js vs Livewire kapcsán.

Szükséges a SEO optimalizáció a kezdetleges betöltéshez?

A Livewire szorosan integrálódik a Laravel keretrendszerrel. Ez azt jelenti, hogy a Livewire a háttérben a Laravel rendermotorját használja a HTML oldalak kezdetleges megjelenítéséhez.

A komponensek gyorsítótárazása szintén a Laravel gyorsítótárazásával történik. Tehát az oldalbetöltési idő javítása érdekében alkalmazhatjuk a Laravel gyorsítótárazását.

A Livewire a frontenden rengeteg JavaScript kódot használ a backendel való kommunikációra. A plugin timestampek használatával erősít meg minden state manipulációs próbálkozást.Elméletileg emiatt a Livewire frontend pluginja lassabb oldalbetöltési időt eredményezhet,de mivel a kódunk nagy része a backenden van, ez jelentős csökkenést jelent a kézzel írt JavaScript kód méreténél. Viszont még így is fontos lekicsinyíteni ("minify") az asset fájlokat a gyorsabb betöltődés érdekében.

Valamint, ne feledkezzünk meg arról sem, hogy a Livewire a munka oroszlánrészét átadja a szervernek. Ez azt jelenti, hogy az üzleti logika teljes egészét a backend fogja kezelni. Ez magával vonhat némi optimalizációt, különösképp magas terhelés esetén.

Összefoglalva tehát mindenképp jó dolog, ha a backendre bízzuk a logika kezelésének teljes egészét. A legtöbb esetben elmondhatjuk, hogy a Livewire használata nem fogja negatívan befolyásolni a nyers Blade templatek SEO előnyeit.

A Livewire előnyeit érdemes megvizsgálni HR szempontból is. Először is a tanulási folyamat sokkal gyorsabbá válik. A programozók többsége, főleg az újoncok, szeretnek csak a backenden dolgozni, viszont a kisebb cégek nem engedhetik meg maguknak, hogy külön frontend és külön backend pozíciókat hirdessenek. Laravel és Livewire használatával sokkal egyszerűbb és élvezetesebbé válik a webfejlesztés elsajátítása. Valamint, ne feledjük, hogy a Vue.js és a JavaScript megtanulása sokak számára nehézkesnek tűnik a PHP procedurális illetve objektumorientált természete után.

Ennyit röviden a Livewire SEO vonatkozásában, viszont mindenképpen szeretnénk tudni, milyen tapasztalataid vannak, használod-e napi szinten, futottál bele komolyabb problémákba, melyik keretrendszer tetszik jobban, az Inertia vagy a Livewire? Oszd meg velünk a véleményedet!