While working on web development, you might have heard of the term rendering atleast once. Well, if you haven't the meaning of rendering is... turning the written code into the UI which the users see as an end product.
In a broader view, rendering is divided into 2 types:
- Client-side Rendering and,
- Server-side Rendering
Now, what's the difference between them and which one is better for you based on what you do?
But before discussing this, it's important to know the difference between both of them so that you can make a decision on yourself.
Starting off with client-side rendering...
Client-side Rendering:
- client-side rendering is the first type of rendering.
- This type of rendering renders the web page in the user's web browser itself.
- It prepares the whole website consisting of all the pages and delivers it to the client.
- If the app contains multiple pages, it takes a lot of time for the end product to reach the user as the whole app is being prepared at once
- Used mostly for single-page websites, as the app has a single page and the rendering process is quick.
- Frameworks which use client-side rendering are ReactJS, AngularJS, VueJS.
The process taking place in Client-side rendering:
- The user requests a specific website by typing its web address.
- The HTML, CSS, and JS code of the webpage is sent to the web browser by the server.
- The HTML and CSS are downloaded first by the web browser then followed by JS.
- Then, the web page links the JS to the HTML.
- The webpage is then rendered on the spot by the web browser after receiving it from the server.
- The web page is displayed on the screen of the user.
Server-side rendering:
- server-side rendering is the second type of rendering.
- This type of rendering is done by the server and then passed onto the web browser to be shown on the user's screen.
- It does not prepare the whole website but only the specific page we are on.
- This saves time because the server renders only a specific page that we want to go to instead of the whole website.
- It does not render the pages which are not visited by the user hence saving time when compared to client-side rendering.
- Every time we request a specific page, the rendering process takes place.
- The downside to this is, in some situations when we are going from page to page very quickly, the server takes time to render the page and deliver because it is taking a heavy load of rendering
- Frameworks which use server-side rendering: NextJS, NuxtJS
The process taking place in Server-side rendering:
- The user requests a specific website by typing its web address.
- The HTML, CSS, and JS code of the web page that we want is processed by the server and then rendered.
- After the rendering is completed by the server it is then sent to the website to be displayed on the screen of the user.
- Every time a page is requested the server processes the HTML, CSS, and JS, followed by the server rendering page.
Useful Links: Frameworks that use server-side rendering:
Frameworks that use client-side rendering:
Hope that you got clarity about server-side rendering and client-side rendering and also hope that you have made your decision