Desde los albores de los tiempos, el método convencional para subir su HTML a una pantalla era utilizar la representación del lado del servidor. Era la única manera. Cargó sus páginas .html en su servidor, luego su servidor las convirtió en documentos útiles en los navegadores de sus usuarios.
La representación del lado del servidor también funcionó muy bien en ese momento, ya que la mayoría de las páginas web eran principalmente para mostrar imágenes y texto estáticos, con poca interactividad.
Avance rápido hasta hoy y ese ya no es el caso. Se podría argumentar que los sitios web en estos días se parecen más a aplicaciones que fingen ser sitios web. Puede usarlos para enviar mensajes, actualizar información en línea, comprar y mucho más. La web es mucho más avanzada de lo que solía ser.
Por lo tanto, tiene sentido que la representación del lado del servidor esté comenzando a pasar lentamente a un segundo plano frente al método cada vez mayor de representar páginas web en el lado del cliente.
Entonces, ¿qué método es la mejor opción? Como ocurre con la mayoría de las cosas en desarrollo, realmente depende de lo que planees hacer con tu sitio web. Debe comprender los pros y los contras y luego decidir por sí mismo cuál es la mejor ruta para usted.
Cómo funciona la representación del lado del servidor
La representación del lado del servidor es el método más común para mostrar información en la pantalla. Funciona convirtiendo archivos HTML en el servidor en información utilizable para el navegador.
Siempre que visita un sitio web, su navegador realiza una solicitud al servidor que contiene los contenidos del sitio web. La solicitud generalmente solo toma unos pocos milisegundos, pero eso, en última instancia, depende de una multitud de factores:
- Tu velocidad de internet
- la ubicación del servidor
- cuántos usuarios están intentando acceder al sitio
- y qué tan optimizado está el sitio web, por nombrar algunos
Una vez que se procesa la solicitud, su navegador recupera el HTML completamente renderizado y lo muestra en la pantalla. Si luego decide visitar una página diferente en el sitio web, su navegador volverá a solicitar la nueva información. Esto ocurrirá cada vez que visite una página de la que su navegador no tiene una versión en caché.
No importa si la nueva página solo tiene algunos elementos que son diferentes a la página actual, el navegador pedirá la nueva página completa y volverá a renderizar todo desde cero.
Tomemos, por ejemplo, este documento HTML que se ha colocado en un servidor imaginario con una dirección HTTP de example.testsite.com.
Example Website My Website
This is an example of my new website
Link Si tuviera que escribir la dirección del sitio web de ejemplo en la URL de su navegador imaginario, su navegador imaginario haría una solicitud al servidor que está utilizando esa URL y esperaría una respuesta de texto para representar en el navegador. En este caso, lo que vería visualmente sería el título, el contenido del párrafo y el enlace.
Ahora, suponga que desea hacer clic en el enlace de la página renderizada que contiene el siguiente código.
Example Website My Website
This is an example of my new website
This is some more content from the other.html
La única diferencia entre la página anterior y esta es que esta página no tiene un enlace y en su lugar tiene otro párrafo. La lógica dictaría que solo se debe renderizar el nuevo contenido y dejar el resto solo. Por desgracia, no es así como funciona la representación del lado del servidor. Lo que realmente sucedería sería que se renderizaría toda la página nueva, y no solo el nuevo contenido.
Si bien puede que no parezca un gran problema para estos dos ejemplos, la mayoría de los sitios web no son tan simples. Los sitios web modernos tienen cientos de líneas de código y son mucho más complejos. Ahora imagine navegar por una página web y tener que esperar a que se muestren todas y cada una de las páginas al navegar por el sitio. Si alguna vez ha visitado un sitio de WordPress, ha visto lo lentos que pueden ser. Esta es una de las razones del porque.
En el lado positivo, la representación del lado del servidor es excelente para SEO. Su contenido está presente antes de que lo obtenga, por lo que los motores de búsqueda pueden indexarlo y rastrearlo sin problemas. Algo que no ocurre con el renderizado del lado del cliente. Al menos no simplemente.
Cómo funciona la representación del lado del cliente
Cuando los desarrolladores hablan de renderizado del lado del cliente, están hablando de renderizar contenido en el navegador usando JavaScript. Entonces, en lugar de obtener todo el contenido del documento HTML en sí, está obteniendo un documento HTML básico con un archivo JavaScript que procesará el resto del sitio usando el navegador.
Este es un enfoque relativamente nuevo para renderizar sitios web, y realmente no se hizo popular hasta que las bibliotecas de JavaScript comenzaron a incorporarlo en su estilo de desarrollo. Algunos ejemplos notables son Vue.js y React.js, sobre los que he escrito más aquí.
Volviendo al sitio web anterior example.testsite.com, suponga que ahora tiene un archivo index.html con las siguientes líneas de código.
Example Website Puede ver de inmediato que hay algunos cambios importantes en la forma en que index.hmtl funciona cuando se renderiza usando el cliente.
Para empezar, en lugar de tener el contenido dentro del archivo HTML, tiene un div contenedor con un id de root. También tiene dos elementos de secuencia de comandos justo encima de la etiqueta del cuerpo de cierre. Uno que cargará la biblioteca de JavaScript Vue.js y otro que cargará un archivo llamado app.js.
Esto es radicalmente diferente al uso de la representación del lado del servidor porque el servidor ahora solo es responsable de cargar los puntos negativos del sitio web. La caldera principal. Todo lo demás lo maneja una biblioteca de JavaScript del lado del cliente, en este caso, Vue.js y código JavaScript personalizado.
Si realizara una solicitud a la URL con solo el código anterior, obtendría una pantalla en blanco. No hay nada que cargar, ya que el contenido real debe procesarse con JavaScript.
Para solucionarlo, colocaría las siguientes líneas de código en el archivo app.js.
var data = { title:"My Website", message:"This is an example of my new website" } Vue.component('app', { template: ` {{title}}
{{message}}
Link `, data: function() { return data; }, methods:{ newContent: function(){ var node = document.createElement('p'); var textNode = document.createTextNode('This is some more content from the other.html'); node.appendChild(textNode); document.getElementById('moreContent').appendChild(node); } } }) new Vue({ el: '#root', });Ahora, si visita la URL, verá el mismo contenido que en el ejemplo del lado del servidor. La diferencia clave es que si hiciera clic en el enlace de la página para cargar más contenido, el navegador no hará otra solicitud al servidor. Está renderizando elementos con el navegador, por lo que en su lugar utilizará JavaScript para cargar el nuevo contenido y Vue.js se asegurará de que solo se renderice el nuevo contenido. Todo lo demás quedará solo.
Esto es mucho más rápido ya que solo está cargando una sección muy pequeña de la página para buscar el nuevo contenido, en lugar de cargar la página completa.
Sin embargo, existen algunas compensaciones con el uso de la representación del lado del cliente. Dado que el contenido no se procesa hasta que la página se carga en el navegador, el SEO para el sitio web se verá afectado. Hay formas de evitar esto, pero no es tan fácil como lo es con la representación del lado del servidor.
Otra cosa a tener en cuenta es que su sitio web / aplicación no podrá cargarse hasta que TODO el JavaScript se descargue en el navegador. Lo cual tiene sentido, ya que contiene todo el contenido que se necesitará. Si sus usuarios utilizan una conexión lenta a Internet, su tiempo de carga inicial podría ser un poco largo.
Los pros y los contras de cada enfoque
Así que ahí lo tienes. Esas son las principales diferencias entre la representación del lado del servidor y del lado del cliente. Solo usted, el desarrollador, puede decidir qué opción es mejor para su sitio web o aplicación.
A continuación se muestra un desglose rápido de los pros y los contras de cada enfoque:
Pros del lado del servidor:
- Los motores de búsqueda pueden rastrear el sitio para un mejor SEO.
- La carga de la página inicial es más rápida.
- Excelente para sitios estáticos.
Contras del lado del servidor:
- Solicitudes frecuentes del servidor.
- Una representación de página lenta en general.
- Recargas de página completa.
- Interacciones de sitios no enriquecidos.
Client-side pros:
- Rich site interactions
- Fast website rendering after the initial load.
- Great for web applications.
- Robust selection of JavaScript libraries.
Client-side cons:
- Low SEO if not implemented correctly.
- Initial load might require more time.
- In most cases, requires an external library.
If you want to learn more about Vue.js, check out my website at juanmvega.com for videos and articles!