Client Side Rendering vs
Server Side Rendering
You might have heard the terms Client Side Rendering (CSR) and
Server Side Rendering (SSR) when working with Single Page
Application (SPA) technologies like React and Angular and how
they might affect the performance of your site. Let’s try to
figure out what CSR and SSR actually are and how they change the
way your site works.
Es posible que haya escuchado los términos Representación del lado
del cliente (CSR) y Representación del lado del servidor (SSR) al
trabajar con tecnologías de aplicación de página única (SPA) como
React y Angular y cómo pueden afectar el rendimiento de su sitio.
Tratemos de descubrir qué son realmente CSR y SSR y cómo cambian
la forma en que funciona su sitio.
How SPA Client Side Rendering works
Cómo funciona la Representación del
lado del Servidor SPA
When the browser makes the initial request to the SPA server, the
server returns the HTML file which looks like this.
Cuando el navegador realizar la solicitud inicial al servidor SPA,
el servidor devuelve el archivo HTML que se ve así.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<title>Single Page Application</title>
</head>
<body>
<--The "root" div will get content from the JS later -->
<div id="root"></div>
<script src="[Link]"></script>
</body>
</html>
After the initial HTML and CSS loads the browser requests the rest
of the application which comes in a JS file. While this JS is
being loaded and parsed, the page will be blank. The content will
be viewable and intractable once the JS file has been parsed.
Después de cargar el HTML y CSS inicial, el navegador solicita el
resto de la aplicación que viene en un archivo JS. Mientras se
carga y analiza este JS, la página estará en blanco. The content
will be viewable and intractable once the JS file has been parsed.
The advantage of Client-Side Rendering (CSR) is once the page
loads all subsequent navigation within the site will be fast as
no more pages needed to be loaded from the server unlike a Multi-
Page Application.
La ventaja de Client Side Rendering (CSR) es que una vez que la
página se carga, toda la navegación posterior dentro del sitio
será rápida, ya que no es necesario cargar más páginas desde el
servidor a diferencia de una aplicación de páginas múltiples.
One disadvantage is the user of the site will have to wait a long
time until he/she sees anything meaningful on the screen during
the first render. This can take a long time depending of the size
of the app, speed of the connection and the power of the device
the site os being viewed in (especially in low end mobile devices).
Una desventaja es que el usuario del sitio tendrá que esperar
mucho tiempo hasta que vea algo significativo en la pantalla
durante el primer render. Esto puede llevar mucho tiempo
dependiendo del tamaño de la aplicación, la velocidad de la
conexión y la potencia del dispositivo en el que se está viendo
el sitio (especialmente en dispositivos móviles de gama baja).
Another disadvantage comes when looking at Search Engine
Optimization (SEO). Web crawlers might not parse the JavaScript
and load the content, so they might only see an empty page.
Otra desventaja viene cuando se mira la optimización de motores
de búsqueda (SEO). Los rastreadores web pueden no analizar el
JavaScript y cargar el contenido, por lo que solo pueden ver una
página vacía.
JavaScript Single Page Application Frameworks
like React and Angular are client side rendered by default.
Los marcos de aplicación de página única de JavaScript, como React
y Angular, se representan de forma predeterminada en el lado del
cliente.
Enter Server Side Rendering
Ingresando a la Representación del
lado del Servidor
We can solve these issues by using Server-Side Rendering. SSR is
rendering the app to a string (HTML) in the server itself and
sending it to the browser. This takes the work of rendering from
the client to the server. So, when the browser receives the initial
HTML file there is content for the user to see unlike a CSR site
where the entire JS file needs to be downloaded and parsed before
something meaningful can be shown on screen. The site becomes
interactive once the JS file has been downloaded and parsed.
Podemos resolver estos problemas utilizando la representación del
lado del servidor. SSR representa la aplicación en una cadena
(HTML) en el servidor y la envía al navegador. Esto toma el trabajo
de renderizar desde el cliente al servidor. Entonces, cuando el
navegador recibe el archivo HTML inicial, hay contenido para que
el usuario vea a diferencia de un sitio CSR donde todo el archivo
JS debe descargarse y analizarse antes de que algo significativo
pueda mostrarse en la pantalla. El sitio se vuelve interactivo
una vez que el archivo JS se ha descargado y analizado.
The downside of using just SSR is that it makes navigation within
the site slow as each page needs to be rendered and fetched from
the server. This also increases the load on the server.
La desventaja de usar solo SSR es que hace que la navegación
dentro del sitio sea lenta ya que cada página debe ser procesada
y obtenida del servidor. Esto también aumenta la carga en el
servidor.
Is there a way to use both CSR and
SSR as needed?
¿Hay alguna manera de usar CSR y SSR
según sea necesario?
CSR makes out app faster and more interactive. SSR can speed up
the first render of the site and improve SEO. We don’t to sacrifice
the features of one by going fully with the other. Instead we can
use an Universal Web App.
CSR hace que la aplicación sea más rápida e interactiva. SSR puede
acelerar el primer render del sitio y mejorar el SEO. No
sacrificamos las características de uno yendo completamente con
el otro. En cambio, podemos usar una aplicación web universal.
Universal Web App
Aplicación Web Universal
Universal Web Apps combine the best of the both Client-Side
Rendering and Server-Side Rendering. In an Universal Web App, the
initial render will be done in the server, and once the page loads
client side rendering will take over. This makes sure that we have
good SEO, a quick first render and speed when browsing in the app.
Universal Web Apps combina lo mejor de la representación del lado
del cliente y la representación del lado del servidor. En una
aplicación web universal, el renderizado inicial se realizará en
el servidor, y una vez que la página se cargue, se hará cargo del
renderizado del lado del cliente. Esto asegura que tengamos un
buen SEO, un primer render rápido y velocidad al navegar en la
aplicación.
There are a couple of frameworks which allow us to build UWAs
quickly.
Hay un par de marcos que nos permiten construir UWAs rápidamente.
[Link] - A framework to build Universal Web Apps with React
[Link] - A framework to build Universal Web Apps with [Link]
Conclusion
I hope you found this useful on learning about Server-Side
Rendering and Client-Side Rendering. If you have any suggestions
on how I can improve the post or any other comments please leave
one below. 😊
Espero que hayas encontrado esto útil para aprender sobre la
representación del lado del servidor y la representación del lado
del cliente. Si tiene alguna sugerencia sobre cómo puedo mejorar
la publicación o cualquier otro comentario, deje uno a
continuación. 😊