Back to Basics – Part 2 | Client Side Rendering & Server Side Rendering

Building a new website or web application from scratch can be challenging. Developers typically consider two main types of rendering: server-side rendering (SSR) and client-side rendering (CSR). These approaches determine how and where the transformation from code to a webpage occurs.
The question on everyone’s mind is: “CSR vs SSR — which should I use?” This blog aims to answer that question

What is Client-side rendering (CSR) : 

In CSR, the content is rendered on the client-side (browser) using JavaScript after downloading an initial empty or minimal HTML file from the server.

CSR is the approach where the browser downloads a minimal HTML file and the necessary JavaScript code, which is then used to render the rest of the page. All the rendering happens on the client-side (browser), and this method is typically used in Single Page Applications

• Modern Development Approach
• Faster API Response Integration
• Reduced Server Load
• Rich Interactivity

How It Works:

• The server sends a basic HTML file and JavaScript bundle.
• The browser executes the JavaScript to fetch data and render the content dynamically.
• All interactions and updates happen client-side without requiring full page reloads

Advantages:

• Interactivity: Excellent for Single Page Applications (SPAs) where content dynamically updates without refreshing the page.
• Reduced Server Load: Less server processing after the initial request.
• Rich User Experience: Smooth transitions and faster interactions.

Disadvantages:

• SEO Challenges: Search engines may struggle to index content until additional optimization is done.
• Initial Load Time: Slower initial page rendering because the browser must download and execute JavaScript before displaying content.
• Heavier Client: Relies on the user’s device to process and render content.

Server-Side Rendering (SSR):

In server-side rendering, it’s the server that does the heavy lifting. When you request a webpage, the server puts together the HTML, CSS, and JavaScript, and sends it over to your browser fully formed. You see the page all at once, like receiving a finished painting

How It Works:

• The server processes the request, fetches data, and generates a fully populated HTML page.
• The browser receives the HTML and displays the content immediately.
• Additional interactivity can be added using JavaScript after the initial rendering (hydration).

Advantages:

• Improved SEO: SSR renders pages on the server, making them easily crawlable by search engines, which is essential for SEO. SPAs, without SSR, might have issues with search engine bots, as some bots struggle with JavaScript-heavy content.
• Faster First Paint: The initial page load is faster because the browser receives fully rendered HTML directly from the server, resulting in faster time-to-first-paint.
• Better Performance on Low-End Devices: Since the rendering happens on the server, less processing power is required from the client-side device.
• Improved Social Media Sharing: When sharing a URL, social media platforms pull metadata like titles and images from the rendered HTML. SSR ensures that this metadata is present and accurate, which is important for social sharing

Disadvantages:

• Increased Server Load: The server handles more processing for each request.
• Limited Interactivity: Without additional JavaScript, interactivity is restricted.
• Complexity: Requires a more complex server setup compared to CSR.

When to use CSR or SSR: