Understanding Rendering in Web Apps: SSR

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:

• Zend Engine - PHP
• .NET - ASP
• Java - JSP

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:

• Nodejs - Handlebars, Pug
• Python - Jinja
• Java - Thymeleaf
• PHP - Smarty, Blade

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.