WTH is SSR or CSR? When to use What?

Did you ever wonder what's rendering? or Server or Client Side Rendering?

In this blog, we are gonna discuss how these things work in very simple terms.

Let's start off with rendering 🙈

Rendering is simply a process of combining data from a database with a template and giving out an HTML file as an output which the browser can use.

Data from Database + Templating = HTML (This whole process is called rendering)

The user asks for only an HTML file it doesn't care from where is it coming.

Templating can be done by the server or by the client (browser)

• When the Server does Rendering its Server Side Rendering and will need Server Side Routing.

• When the Client does Rendering its Client Side Rendering and will
  need Client-Side Routing.

Server-Side Rendering:

• We get the data + view both from the server.
• Bad UX as need to get the whole page again for eg. Navbar and footer which more or less remains the same.
• Difference between Server-Side Generation and Server Side Rendering -
• SSG is when the server does all the work beforehand and is ready with all the HTML files to be served whereas in SSR it waits when the file is requested, then when it's requested it takes data from DB and merge with template and then creates a file on the fly.

Client Side Rendering:

• Only talks to the server for the data not for the view after the first render.
• Creates Single Page Application
• That's the reason why mobile or desktop apps are soo large because they already have the view and only talk to the server for the data.

Client-Side Routing:

1. SPA Routing experience. (Forward → and ← in page works)
2. URL update as well so easy to share your link to the exact page with someone.
3. But Bad for SEO - use SSR for text-heavy things.

As a Bonus for reading this much 😌:-

Lets understand the most confusing thing in React Routes which is when to use which URL Param so here are all the Types of URL Parameters and when to use them:

1. pathname
   • when you want static resources.
   • you wanna render the whole new Component page.
   • eq. Category Page as its a whole new component
2. search
   • when you need data from a server doing SSR
   • don't use it for routing.
   • only for in-page changes.
   • query parameters, easy to share with anyone.
3. hash
   • similar to search but only used for CSR
   • used inside CSR Navigation when the page is big.
4. state
   • when you want to provide data through route without showing the data in URL.

What is pre-rendering?

Pre-rendering is a tradeoff between client-side and server-side rendering. Every pre-rendered page displays a skeleton template while the data waits to be rehydrated with AJAX/XHR requests. Once the page is fetched, internal routing is done dynamically to take advantage of a client-side rendered website.

What is a universal app?

A universal app sends to the browser a page populated with data. Then the app loads its JavaScript and rehydrates the page to get a fully client-side rendered app. This approach combines the advantages of the latest techniques available today.