Frontend
How to render HTML: browser (CSR) or server (SSR)
When developing a Web Application, in which environment should the JS execution process that creates the final DOM be done? On the browser using Client Side Rendering or on the server using Server Side Rendering?
Why is this topic so important? Because the topics you research, the technologies you choose or the decisions you make afterwards depend on a good understanding of this topic. After deciding whose responsibility the rendering process should be, you will use technologies and libraries accordingly.
Client Side Rendering → After Ember, Angular, React, Vue, Svelte are bundled with Webpack, JS codes are transferred to the browser and executed on the browser. Visualization (D3.js etc.), Chart (Rechart etc.) and Interactive UI components are handled on the browser in the same way.
Server Side Rendering, Pre-Rendering, Static Rendering: Here, rendering is handled as a whole, which has no effect on creating the DOM in the JS browser. Static Site Generator → Gatsby, Jekyll, Hugo or libraries such as Next, Nuxt, Nest and Sapper can be selected to generate dynamic pages by running on the server. Note: I will be explaining the distinction between this server-side / static rendering in a separate article about which technologies can be selected for which web page types.
Now, let’s speak about how to distinguish between browsers and servers. In accordance with your responses to the following questions, you must select CSR or SSR based on which best fits.
Note: The method I have applied here is a method I have made myself as a result of my own experiences and inferences. When you look at it, some existing web applications may not fit this structure.
1. Lets Evaluate the subject with examples
Let’s evaluate the subject with some examples. Before that, let’s develop a method
Let’s give negative values for CSR and positive values for SSR. When you add them up, if the value is negative, choose ClientSide and if the value is positive, choose ServerSide technologies.
A → Behavior Driven (-1), Content Driven (+1)
B → Creating and Updating Content (-1) , Delivering Content (+1)
C → Interaction High (-1), Interaction Low (+1)
D → Private to Individual/Group (-1), Public (+1)
E → SEO/Search Not Important (-1) , SEO/Search Important (+1)
A. Web Transferred Versions of Tools You Use on Desktop
Doc, Excel, Presentation, Paint, Draw, Map, Chart, etc… tools that allow you to create and update content (text, images, music, video, etc…) to produce tools that need a lot of user interaction.
- When we add A → -1 , B → -1, C → -1, C → -1, D → -1, E → -1, it makes sense to choose -5 → CSR (Client Side Rendering) technologies.
B. Document Content Pages
Newspaper, Blog, Wikipedia, Landing Pages of Applications, Help pages, etc… Let’s think for static content pages.
- When we add A → +1, B → +1, C → +1 (reading), D → +1, E → +1, +5 → It makes sense to choose SSR (Server Side Rendering) technologies.
C. Social Media
If we examine social media such as Facebook, Twitter, Instagram, etc., things are a bit complicated because they are applications that both produce and consume data. In this case, it is necessary to value both sides
- When we add A → -1 & +1, B → -1 & +1, C → -1, D → -1, E → -1, -3 → it makes sense to choose CSR (Client Side Rendering) technologies. Besides, when producing Facebook pages (BigPipe uses ServerSide)
D. Multimedia Content Pages
Netflix, Amazon Prime, Spotify multimedia content
- When we add A → -1 & +1, B → +1, C → -1, D → +1, E → +1, +2 → it makes sense to choose SSR (Server Side Rendering) technologies.
D. E-Commerce Sites
Amazon, Hepsiburada, Trendyol, N11, etc… e-commerce sites
- When we add A → +1 , B → +1 , C → -1 & +1 , D → +1, E → +1, +4 → SSR (Server Side Rendering) technologies.
E. Web Applications with Form and Input Screens
Applications with screens with data input such as Banking, Insurance or Online Service Center.
- When we add A →- 1, B →-1, C → -1, D → -1, E → — 1, it makes sense to choose +5 → CSR (Client Side Rendering) technologies.
You can increase these examples by thinking for yourself. I just set up a technology recommendation method with a simple question / answer. It is up to you to use it
References
Continue Reading 😃
You can click on this link to read the rest of this article or to access other articles in this group.
LearnReactUI.dev
Don’t forget to subscribe to LearnReactUI.dev to further your own career in the React Ecosystem. This is a website for React developers who want to develop real-world Web Applications.
