Web Architecture: CSR & SSR

1. web app architecture

a structure that determines the way your product and business will operate, perform and scale.

2. web app architecture types

1. MPA : consist of multiple HTML pages, sends requests to server for different HTML in every change.
2. SPA : consists of single page, sends requests to server for data that needs to be changed.

3. CSR vs SSR

The difference between CSR and SSR is that wich side(client or server) is responsible for rendering the web page.

what is rendering?

the process of converting application code into interactive web pages

📍 CSR : it’s the browser that generates the entire app, including the UI, data, and functionality.

The client recieves empty HTML(Shell), CSS and Javascript bundle from front server. And sends request to back server for data while the web page is loading.

👍 pros :

• better user interactivity

→ no need to reload pages

• caching

👎 cons :

• initial loading may take too long

→ The browser needs to download and run the whole JS includes frameworks and library

• Low SEO

→ Bots will only see empty HTML

💡 solutions:

• code splitting
• tree-shake
• SSR

📍 SSR : it’s the server that generates static HTML. The client receives fully rendered HTML page.

👍 pros :

• better SEO
• Faster initial page loads

👎 cons :

• blinking issue, non-rich site interaction
• server side overhead
• need to wait before interaction

→ TTV < TTI

🪜 SSR Steps

1. Client’s HTTP request – When the user enters the URL into the browser’s address bar, it establishes an HTTP connection with the server, then sends the server a request for the HTML document.
2. Data fetching – The server fetches any required data from the database or third-party APIs.
3. Server-side pre-rendering – The server compiles the JavaScript components into static HTML.
4. Server’s HTTP response – The server sends this HTML document to the client.
5. Page load and rendering– The client downloads the HTML file and displays the static components on the page.
6. Hydration – The client downloads the JavaScript file embedded into the HTML, processes the code, and attaches event listeners to the components. This process is called hydration.

---

4. CSR vs SSR in point of TTV & TTI

TTV(Time To View) refers to how much time it takes for users to see the rendered web page.

TTI(Time To Interact) refers to how much time it takes the JS file to be loaded so users can interact with web page.

In CSR, users can’t see or interact with web page until all JS files are loaded. Therefore, TTI and TTV is same. Otherwise, in SSR, users are able to see the web page but it takes some time for users to interact with the page. Thus TTV is longer than TTI.

5. Is CSR and SPA same?

The answer is NO. The difference between MPA / SPA is how many pages the web app uses. Otherwise, the difference between CSR / SSR is where the web page is rendered. Therefore, the relationship is not an equal sign.

SSR supports MPA for showing multiple pages to users, and SPA is based on CSR for intracting with users on a sigle page.

6. What to choose then?

CRS is suited for the web page which requires high interactivity with users and the contents changes frequently.

SSR can be implemented in web app that is static and contains heavy contents. Moreover, SSR is better choice when SEO is important element for web app