Renderització és crucial per a les operacions del vostre lloc web, ja que permet a Google recuperar les vostres pàgines web, desxifrar el codi i comprendre’n el contingut i l’estructura.
A continuació, el procés de renderització converteix aquest codi en una pàgina web amb la qual els usuaris poden interactuar.
Cada pàgina web s’ha de dissenyar tenint en compte la persona final, de manera que triar el tipus de representació més eficaç és imprescindible a l’hora de crear el vostre lloc web.
Cada tècnica de representació té avantatges i contres, de manera que a la primera de la nostra sèrie de JavaScript, tractarem la representació del costat del servidor (SSR).
Continueu llegint per descobrir què és el costat del servidor, com funciona el procés del costat del servidor i els seus avantatges i desavantatges.
Què és la representació del costat del servidor (SSR)?
La representació del costat del servidor és on el contingut del vostre lloc es representa al servidor web i no al navegador. Aquest servidor prepara un fitxer HTML amb dades específiques de l’usuari i l’envia a la màquina de l’usuari.
Aleshores, el navegador interpreta el contingut i mostra la pàgina, donant a l’usuari una pàgina HTML completament representada sense esperar que es carreguin els fitxers JavaScript o CSS.
Molts pensen que aquest mètode és favorable per al SEO en comparació amb la representació del costat del client, però primer veiem com funciona SSR.
El procés de representació del costat del servidor
Com hem comentat, la representació del costat del servidor permet que el contingut del lloc web aparegui ràpidament eliminant la necessitat de descarregar i executar codi de l’aplicació.
Però, com es representa el vostre HTML al servidor en resposta a la navegació?
- L’usuari obre el seu navegador i sol·licita obrir la pàgina web.
- El servidor crea contingut representat en un fitxer HTML visible i l’envia a l’usuari. El CSS també es mostra al navegador, però la pàgina encara no és interactiva.
- Mentrestant, el navegador descarrega el JavaScript de la pàgina, que està fàcilment disponible al servidor.
- Ara l’usuari pot interactuar amb el lloc i els diferents elements.
- El navegador implementa JavaScript (el model d’objectes de document o DOM està completament representat).
- La pàgina ara està completament carregada i pot respondre a les interaccions del viatge de l’usuari.
Molts marcs de JavaScript populars, inclosos Angular i Reaccionautilitzeu la representació del costat del servidor.
Els gegants de les xarxes socials com Facebook i Twitter també utilitzen contingut renderitzat abans que s’enviï a l’usuari.
Però, quins són els avantatges i els contres únics d’utilitzar SSR? Aquests són els avantatges i els inconvenients:
| Avantatges de la representació del costat del servidor | Desavantatges de la representació del costat del servidor |
| Contingut teòricament més fàcil de rastrejar i indexar. | Pot causar problemes de compatibilitat. |
| Temps de càrrega més ràpids. | Major càrrega del servidor per a aplicacions més grans. |
| Ideal per a llocs web estàtics. | Incorrerà en costos per a l’empresa. |
| Mètriques d’usuari més precises. | De vegades pot provocar una memòria cau ineficient. |
| Inactivitat de renderització de la pàgina lenta. |
Els avantatges de la representació del costat del servidor
Temps de càrrega més ràpid
SSR només actualitza les parts de l’HTML que necessiten actualitzar-se, de manera que genera transicions de pàgina més ràpides entre pàgines i First Contentful Paint (FCP) molt més ràpid.
Fins i tot els usuaris amb connexions a Internet lentes o dispositius obsolets poden interactuar immediatament amb les vostres pàgines web.
Recordeu, com menys temps que un usuari ha de mirar una pantalla de càrregamillor per al vostre SEO.
Fàcil d’indexar
La indexació de llocs SSR és molt més fàcil per als motors de cerca que els llocs representats al costat del client. El contingut es representa abans que es carregui la pàgina, de manera que no cal que executin JavaScript per llegir-lo i indexar-lo.
Ideal per a llocs web estàtics
SSR és excel·lent per a pàgines web estàtiques, ja que és més ràpid renderitzar prèviament una pàgina estàtica (o sense canvis) al servidor abans d’enviar-la al client.
Mètriques d’usuari més precises
SSR us permet mantenir un lloc web optimitzat i saludable mitjançant la recopilació de mètriques de manera ràpida i precisa.
A diferència de la representació del costat del client, SSR informarà el servidor a mesura que l’usuari es mou d’una pàgina a una altra.
Avaluar com naveguen pel vostre lloc i com interactuen amb el vostre contingut us ajudarà a millorar contínuament la interfície d’usuari (UI) i l’experiència de l’usuari (UX).
Excel·lent optimització de xarxes socials
SSR també optimitza les vostres pàgines per a xarxes socials.
Això vol dir que obtindreu una bona vista prèvia amb el títol de la pàgina, la descripció i la imatge sempre que compartiu el contingut de la vostra pàgina web a través de les xarxes socials.
Els desavantatges de la representació del costat del servidor
Major càrrega del servidor per a aplicacions més grans
El servidor assumeix tota la càrrega de les sol·licituds per als usuaris i els robots.
La representació d’aplicacions més grans i complexes al costat del servidor pot augmentar el temps de càrrega perquè és un únic coll d’ampolla.
Augment de les despeses
SSR pot arribar a ser complex i car quan es fa difícil de mantenir i depurar i és més propens a errors.
Haureu d’utilitzar el servidor de la vostra empresa per instal·lar una aplicació SSR, la qual cosa significa costos d’execució més elevats.
Problemes de compatibilitat
SSR pot ser incompatible amb algunes biblioteques i eines de tercers, inclòs el codi JavaScript.
Inactivitat de renderització de la pàgina lenta
Tot i que l’usuari pot veure la pàgina immediatament, ha d’esperar que es completi la descàrrega de JavaScript abans d’interaccionar amb ella.
Caching ineficient
La memòria cau eficient és important per al rendiment de la recuperació de dades, però SSR significa que l’HTML de cada pàgina és diferent.
És més difícil detectar-ho en una xarxa de lliurament de contingut (CDN), de manera que els usuaris que carreguen una pàgina que no s’ha guardat a la memòria cau a la CDN experimentaran un temps de càrrega més llarg.
Marcs de representació del costat del servidor
El lliurament de contingut renderitzat al navegador és vital perquè les interfícies de les aplicacions SSR es carreguin ràpidament.
Molts dels marcs que hem destacat admeten l’execució de la mateixa aplicació a Node.js, la representació a HTML estàtic i, finalment, la hidratació al client.
Alguns dels frameworks més populars utilitzats per donar suport a SSR per al desenvolupament web són:
- Universal angular – s’utilitza per representar una aplicació angular al costat del servidor.
- Ember.js – un marc de JavaScript centrat en aplicacions escalables d’una sola pàgina.
- Gatsby.js – un marc basat en React que és ideal per crear llocs web estàtics.
- Next.js – un marc de codi obert de JavaScript construït sobre React.
- Reacciona – un marc i una biblioteca JavaScript de codi obert per crear components d’IU reutilitzables.
- Vue.js – un marc de JavaScript que els desenvolupadors implementen principalment per crear interfícies d’usuari interactives.
És millor la representació del costat del servidor?
SSR és eficaç per augmentar el vostre rendiment de SEO perquè indexa les vostres pàgines abans que es carreguin al navegador.
Beneficia l’organització que crea l’aplicació web mitjançant el seguiment de mètriques de compromís per impulsar la millora constant per al client final.
En última instància, heu de decidir com s’acumula a la representació del costat del client o a la representació dinàmica quan escolliu el vostre marc web i l’arquitectura i el tipus de funcions que necessiteu.
Més recursos:
Imatge destacada: hanss/Shutterstock
