¿Qué es la representación del lado del cliente y del servidor y cómo se relaciona con las aplicaciones de una sola página?

Vaya a http://quora.com y observe el contenido de la página. Las preguntas y el contenido de la página que ve están diseñados para usted según su comportamiento en el sitio. Todos tienen su propia versión de la página de inicio de Quora personalizada solo para ellos. La página se construye mediante el marcado de ajuste estático correspondiente al contenido constante (no personalizado) alrededor del contenido dinámico (personalizado), también conocido como plantilla. Para usar otro ejemplo, si quisieras escribir el mismo correo electrónico a 100 personas, probablemente comenzarías con “Hola, {nombre}”. El {nombre} es un marcador de posición que se debe completar dinámicamente con el nombre de cada destinatario. Completar la plantilla se conoce como renderizado.

Esto nos lleva a las dos formas de representar una página: servidor y cliente. La representación del lado del servidor es la forma tradicional, utilizando algo como PHP. Si desea escribir el mismo correo electrónico con PHP, puede usar variables PHP como marcador de posición:

Hola,

El servidor conoce el nombre $ del usuario en particular y completa el espacio en blanco. Cuando el correo electrónico llega al destinatario, parece que dice “Hola, Rick” como si estuviera escrito solo para mí.

Por otro lado, la representación del lado del cliente pasa la responsabilidad de resolver estos marcadores de posición al cliente. El HTML podría verse así:

Hola,

Eso es porque la aplicación aún no conoce el nombre de la persona. Sin embargo, tiene un mecanismo para averiguarlo lo antes posible y completar el espacio en blanco. Ese mecanismo podría ser una llamada a la API, cuya respuesta se analiza con JS y el nombre finalmente se inserta en el DOM. Los clientes de correo electrónico no pueden darse el lujo de usar JS, por lo que se presentan de forma restrictiva en el servidor. Las aplicaciones web, por supuesto, son diferentes.

¿Cómo se relaciona todo esto con las aplicaciones de una sola página? Bueno, en realidad no. Un SPA es una aplicación web que no se basa en transiciones de página duras para usar sus funciones. El contenido anterior simplemente se elimina y se reemplaza por el nuevo contenido. Esto es algo así como la representación del lado del cliente porque está obteniendo la respuesta de alguna llamada API y actualizando la página con su contenido. Pero en general no es necesariamente una forma de renderizar u otra.

Un SPA podría funcionar con la representación del lado del servidor, como se creó la biblioteca youtube / spfjs. Lo usamos en YouTube para hacer que el sitio se comporte como un SPA, mientras aún utilizamos contenido prestado por el servidor. Sin embargo, YouTube Gaming utiliza Polymer para la representación del lado del cliente, así como SPF para las transiciones de página, por lo que definitivamente puede tenerlo en ambos sentidos.