Today I’m going to do a share out on the different ways to render a web application. There are mainly 3 ways: Client Side rendering, Server Side rendering and Static site generation.
Client Side Rendering:
Client-side rendering allows developers to make their websites entirely rendered in the browser with JavaScript. Instead of having a different HTML page per route, a client-side rendered website creates each route dynamically directly in the browser. This approach spread once JS frameworks made it easy to take. 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. Example is Create React App.
Server Side Rendering:
Server-side rendering allows developers to pre-populate a web page with custom user data directly on the server. It is generally faster to make all the requests within a server than making extra browser-to-server round-trips for them. This is what developers used to do before client-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. Example is Next JS.
Static Site Generation:
A static-site generator (SSG) is a software application that creates HTML pages from templates or components and a given content source. Give it some text files and content, and the generator will give you back a complete website; this completed website is referred to as a static-generated site.
This means that the website’s pages are generated at build time, and their contents do not change unless you add new content or components and then rebuild — you have to rebuild the website if you want it to be updated with the new content. Example is Gatsby JS.
The concept on Universal Web Apps :
CSR makes out app faster and more interactive. If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the client side. 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. Universal Web Apps combine the best of the Client Side Rendering, Server Side Rendering and Static Site Generation.
The main take-away is: use Static Rendering, if data required to render the page is available at build time ahead of a user’s request (for example : the login page). If you need information to render the page that’s only available at the time a User makes a request, use Server-Side Rendering (for example : the home page). And if you need to update the Client in real time, use Client Side Rendering (for example : getting data based on user interactions ).
Thanks for reading!
