Understanding Rendering in Web Apps: SSR
Nicholas Mendez
Posted on January 14, 2021
Server-Side Rendering approaches typically generate markup on every request to the server. They return dynamic HTML content 'On the fly'.
Server-side scripts/languages
Server-side scripting languages provide syntax that is interpreted by the view engine of an application server to dynamically write HTML and send it in an HTTP response.
Examples:
The following is the example of a PHP script.
Template Engines
For application server runtimes such as; Nodejs, Python, Java, PHP etc. there are libraries called template engines that can provide templating syntax.
Examples:
The following is an example of a handlebars template:
Isomorphic/Universal JS
These approaches (also called meta-framework) allow you to render the first page of a client-side framework app on the server then deliver it to the client. This would allow the browser to show page content without needing to execute any javascript. The page is first only visible but then becomes interactable (or hydrated) when the client-side framework's javascript has finished loaded on the browser. Isomorphic frameworks run on nodejs on the server.
Examples of these are:
- Angular - Angular Universal (Runs on an express app)
- React - NextJS
- Vue - NuxtJS
- Svelte/Angular/React - MeteorJS
In the next post, we shall look at Client-Side Rendering.
Posted on January 14, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.