What is SSR and CSR, and how do I know which one I need?

They're both acronyms:

• SSR stands for Server Side Rendering.
• CSR stands for Client Side Rendering.

When you visit a website, the interface needs to be processed so that your device can display it to you. SSR refers to the work that is done on the website server, whilst CSR is the work done on your device.

Imagine visiting a restaurant. You sit down and peruse the menu before ordering a delicious serving of 'DesignThen.Dev'.

SSR Explained

When you order, the chef doesn't just give you raw ingredients like flour and eggs. Instead, they prepare the whole dish in the kitchen (the server) and present it to you ready to eat (on your screen). That's server-side rendering!

CSR Explained

Think of CSR like a live cooking show. Instead of waiting for a pre-made dish (SSR), the chef gives you the ingredients (code) and tools (browser) to cook with them live. This offers some unique advantages.

Should I render my website on the client or server?

Making use of SSR and CSR is a balance between many factors such as performance, convenience, and control. Depending on the type of website, you might want to use one over the other, or a combination of the two. I'll briefly explain the primary benefits for each.

Benefits of Server Side Rendering

• Sometimes users are on slower devices, like old mobile-phones. Rendering on the server can reduce the workload the users device needs to do resulting in faster page load times.
• Search engines and other websites often need to understand the content on your site for SEO or social sharing. SSR makes sure that your content can be read and indexed by the bots that visit your site.
• Pages rendered on the server can be cached more efficiently resulting in faster page load times.
• Sensitive data can be processed and rendered server-side, minimizing the risk of exposure on the client-side (user's device).

Benefits of Client Side Rendering

• Whilst the overall page load might be slower, CSR can enable us to progressively load parts of the website when they are ready.
• If a user takes an action such as saving their data, or loading more articles, you probably don't want them to have to reload the page. CSR enables us to dynamically update data in response to user interactions.
• Some website sections can work even without internet, thanks to code stored in the browser, offering basic functionality even when offline.
• CSR allows for tailoring the website experience to individual users, remembering preferences or dynamically adjusting layouts.

Which should you use?

Like most things in web-development, it depends!

There are some project types that lend themselves to the benefits of one or the other. Generally speaking, web-apps like dashboards, and social media sites benefit from the dynamic control afforded by client side rendering. Websites like blogs, and marketing sites benefit from the performance and SEO gains from server side rendering.

However, you don't have to choose one! At DesignThen we default to server side rendering for all pages, and follow up with client side rendering for progressive enhancement. Learn more about the tech stack we use at DesignThen.