Since dawn of time the conventional method for getting html page
up onto a screen was by using server-side rendering. It was the only way. You
loaded up your .html pages on your server, then your server went and turned
them into useful documents on your user’s browsers.
At that time server-side rendering worked great since most web-pages were mostly just for displaying static images and text .
Java Script Framework came in with a completely different approach to web development.
Java script made the possibility to render dynamic content right from the browser
by requesting just the content that was required. This transformation gave a
fascinating user experience to visitors since there was a very little time taken
for loading the web page.
In this article, we will discuss these technically different
approaches on web page rendering.
What is server side rendering?
Server-side rendering or SSR is the traditional way of
rendering webpages on the browser. Where
the traditional way of rendering dynamic web content follows the below steps:
- User sends a request to the webserver of requested website via webbrowser
- .
The server begins to check the availability of resource and compiles
and an prepares the html content after running server-side scripts lying within
the page
- This compiled HTML is sent to client’s browser for further rendering
and display
- User’s browser downloads HTML,CSS,JS files and makes the site
visible to the end-user
- The browser then downloads the Javascript(JS) and as it executes
the JS, it makes the page interactive with JS animations
Client Side Rendering
Client-side rendering or CSR is a different approach to how the
webpage is processed for display in the browser. In the CSR, the work of compiling dynamic content and generating HTML for them is transferred to client’s
browser/
This approach is powered by JavaScript frameworks and libraries
like ReactJS, VUEJS and Angular JS. The normal flow of webpage rendering for a
client-side rendering scenario follow these steps:
- .
The user sends a request to a website via a webbrowser(like
google chrome)
- .
Instead of a server, a CDN(content Delivery network) can be used
to serve staticHTML, CSS and supporting files to the user.
- The browser downloads the HTML and then the JS, Meanwhile the
user sees a loading symbol.
- .
After the browser fetches the JS, It makes API request via AJAX
to fetch the dynamic content and processes it to render the final content.
- After the server responds, the final content is rendered using
DOM processing in the client’s browser
Since this process
involves processing data on the client side that is why this process is called
client-side rendering
Performance Metrics
Since both the approaches are different in the way that the
content is processed, each method has its benefits.
Web Page Load Time
The web page load time is the time taken between the request is sent
to the server and when it is rendered on the browser. This is an important
aspect when it comes to user experience for your website. The webpage load times
for SSR and CSR are different
First Page Load Time
The first page load time is the average time taken when the user
loads your website for the first time. On the first load, in CSR, the browser
loads base HTML, CSS, and all the scripts required at once and then compiles HTML
to usable content on the browser.
This time usually is more than getting pre-compiled HTML and the
corresponding scripts from the server. Thus SSR takes less time.
Second and Further Page Load Time
The second page load time is the average time taken to navigate
from one page to another. In this Scenario, since all supporting scripts are
loaded in advance for CSR, the load time is faster for CSR. It doesn’t send a
request to the server unless a lazy JavaScript module needs to be loaded.
However, for SSR the complete request cycle followed in the
first-page load is repeated. This means there is hardly any impact on webpage load
time when it comes to SSR but CSR responds faster in this case.
It is important to note her that the above comparison doesn’t
consider network metrics in depth, where we assumed that the client and server
has comparable bandwidth on the network.
Bandwidth
Using CSR your initial load will be heavier: again, more JavaScript
and a 2nd request. However, subsequent updates will require less
bandwidth. JSON is pretty verbose . but CSR still needs to spend time
transforming JSON to HTML
Conclusion
On considering bandwidth, what you should use. CSR comes in 1st
place since you don’t need to go to server to render the data again.
But in terms of load on users cpu and caching SSR is better
because all the load will be on the server that you are requesting your page in.
Further Reading:
0 Comments