Bypassing Server-Side Rendering Altogether For a Better Web User Experience

Bypassing Server-Side Rendering Altogether For a Better Web User Experience

Bypassing Server-Side Rendering Altogether For a Better Web User ... After several experiences and some changes to our workflow, we found ...

I almost hate to write this article, but at the same time I have experienced a special freedom lately. We build high performance single page applications, this means our web sites render data in the browser rather than the server. Over the past year we were challenged by customers to live without ASP.NET, node and other server-side rendering services. After several experiences and some changes to our workflow, we found don’t need them and neither do you.

classic-web-site-server

Why No Server-Side Rendering?

You may have read articles and heard statements to the effect server-side rendering is faster than client-side. I have disputed this theory and even done some simple tests to compare the two techniques. Part of the argument is that browsers and DOM are not fast. This is untrue. They are not fast when you do things wrong, which most fast food frameworksdo. They are designed using server-side architecture and techniques, not good client-side browser techniques.

Server-side rendering is performed by an application engine like ASP.NET, Ruby, PHP, Java, node, etc. Often this involves making a call to some sort of data store and possibly evaluating authentication credentials. This can and often leads to a slower time to first byte (TTFB).

Good server-side rendering engines offer a caching mechanism like ASP.NET’s Output Caching. Here the server renders content once and caches the result in memory. Output caching allows you to declare caching parameters so you can designate the cache time to live (TTL), queryString, language and other variations. It is a powerful technique.

In essence Output Caching produces a static HTML file. Because data becomes stale over time this cache needs to be purged and rendered again. All data has a life cycle or personality as I call it that determines the right way to cache the rendered markup.

Modern single page web applications by their nature move this server-side exercise to the client. This means a SPA is responsible for managing markup and rendering as needed. They also manage data caching. These responsibilities are managed by Love2Spa, our web platform, as fundamental design features.

This does not mean there is not a dance between the web server and the client that needs to be managed. Single page applications require a different approach where the server offers more of a dumb or static server architecture. The application instead relies on a robust API to provide on-demand data, preferably in JSON format. A single page application needs a fast, static web server that beckons back to the web’s early days. The API provides the dynamic aspects of the application, data and authorized content.

This is good because static CDNs like Azure and AWS’ S3 and Cloudfront are cheap, globally distributed and fast. APIs can be built and hosted on the same cloud platform, using services like Azure App Services, Blob Storage, AWS Beanstalk or S3. Again API platforms are cheap and highly scalable. While many management tasks need to be managed in this scenario, they replace many tasks previously assigned to the web server. In my experience there is even less administration required.

So how does the modern single page application architecture look? Let’s look at two diagrams, one with a single web server and another using the distributed cloud based services previously described.

user experience bypassing server-side rendering altogether better web user experiences

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

A hands-on guide for a Server-Side Rendering React app

In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by converting Create React App to a server-side rendered application.

Server side rendering Styled-Components with NextJS

Server side rendering Styled-Components with NextJS - I switched to styled-components for most of my projects nearly a year now but never used it with Next.js until recently. This might be a bit late to the party but I feel it’s definitely worth sharing the neat trick of ServerStyleSheets...

Angular Server Side Rendering State Transfer For HTTP Requests

This tutorial extends the SSR explained on Server-side rendering (SSR) with Angular Universal page. This tutorial fixes the content flash occurs on SSR write after page loads due to content refresh caused by data received through network requests.

An Essential Guide to Rendering your Website

Back in the day, rendering a website was simple. You needed a web server that served HTML files. Those were static sites. Then developers started using databases and authentication. To achieve that, they needed to manipulate the HTML file before serving it.

Intro to UI/UX | User Interface vs User Experience | UI/UX Tutorials for Beginners

Great Learning brings you to this live session on "Intro to UI/UX". User Experience (UX) and User Interface (UI) designs are important fields that are often underlooked during software development, but they play a big silent role in attracting customers by providing a visually appealing, smooth, and functional experience to them. Adobe XD is a very popular free tool that allows us to create prototypes and wireframes that help us to design web and mobile applications. In this session, we learn the basics of UI/UX philosophy, the difference between them, wireframing, prototyping, user testing, etc. We will also be learning what the UX process is, what a prototype is, an example of user testing, tools that will be used for this purpose, UI Concepts, and a lot more. All of this will help you form a framework that will help you build the career of your choice and bring you to appreciate this under-appreciated practice.