Search⌘ K
AI Features
Home
Courses
Grokking the API Design Interview Crash Course

Important Concepts in Product Architecture - III

Explore important concepts in API design focusing on rendering strategies like server-side and client-side rendering. Understand how to optimize page load times with techniques such as resource hints and debouncing. Learn the circuit breaker pattern to prevent cascading service failures and improve system reliability.

We'll cover the following...

Rendering strategies: SSR vs. CSR

Even with an optimized API gateway, users may experience significant delays in content display. The most common culprit is rendering, the process of converting HTML, CSS, and JavaScript into an interactive web page in the browser.

Server-side rendering (SSR) generates a complete HTML document on the server and sends it to the client. The browser parses and displays it immediately as a static page. Once the JavaScript file downloads, it modifies the DOM (Document Object Model, the tree-structured programming interface that represents HTML content), and the page becomes interactive.

The user clicks on the URL
1 / 8
The user clicks on the URL

Note: The term "paint" refers to the moment a pixel becomes visible to the user.

HTML
<!DOCTYPE html>

<html>

  <head>

    <title>Example</title>

  </head>

  <body>

    <h1>Educative</h1>

    <p>This is a website of Educative. Here is the career page</p>

    <a href="https://www.educative.io/careers">Link</a>

  </body>

</html>

The browser parses the document and displays the content. When a user navigates to a new page (for example, "Careers"), SSR reloads the entire page, even if only the inner content changed. This incurs unnecessary server load and bandwidth usage. For this reason, developers typically use SSR only for the initial page load.

Pros and Cons of Server-Side Rendering

Rendering type

Pros

Cons





Server-side rendering

  • Fast initial loading
  • Increases the traffic to a website because it is great for SEO (search engine optimization) purposes
  • The first time a page loads, the user doesn’t see a blank page because the server sends the HTML-populated document to the browser
  • If the web page size is large, then populating the HTML on the server may add a delay in the response, and the load on the server increases as well, because multiple users can request the same web page
  • If we refresh the web page or update any component of the page, then the whole HTML document is regenerated to render the updated component and sent to the client
  • Bad user experience if the content is changed frequently

When should SSR be used?

  • When a fast initial page load is critical.

  • When the page consists primarily of static content.

  • When SEO matters, since the browser can display the page without waiting for JavaScript to render.

Client-side rendering (CSR)

Unlike SSR, client-side rendering (CSR) generates the complete web page in the browser. The server sends an empty HTML shell with JavaScript code (or a link to it), and the browser executes this JavaScript to build the page.

The user clicks on the URL
1 / 8
The user clicks on the URL

The server's HTML document contains only skeleton tags like <div></div> with an ID such as main. Content is populated after the <script> tag runs on the client side.

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <div id="main"> </div>
<script>
  function loadpage() {
    const element = (
     <div>
        <h1>Educative</h1>
        <p> This is a website of Educative. Here is the career page </p>
        <a href="https://www.educative.io/careers">Link</a>
      </div>
    );
    ReactDOM.render(element,document.getElementById('main'));
  }
  setInterval(loadpage, 1000);
</script>
</body>
</html>

Frameworks such as React, Vue, and Angular handle client-side content creation, enabling selective re-rendering of specific DOM elements to update data or the UI without full page reloads.

Pros and Cons of Client-Side Rerendering

Rendering type

Pros

Cons





Client-side rendering

  • Good to use when data changes frequently
  • The method is becoming increasingly popular because we have to work less on the server. We don't need to call the server frequently because the javaScript file contains all the content of the server
  • If we add a component of the web page or reload the page, we do not need to regenerate the complete document to update the page. CSR caches the content and loads the data from it, and only updates the new components.
  • The initial load of the page increases because the browser has to wait for JavaScript to render the content
  • This approach is not good for SEO because the search engine accesses the web page and sees an empty page initially
  • Poor user experience due to a slow initial load.
  • Asks client devices to do more work, such as for power-constrained devices (like cell phones and tablets) that take energy resources for each page generation and rendering

When should CSR be used?

  • For websites that update content frequently.

  • When a page includes dynamic content that requires fast re-renders.

  • When SEO is not a priority.

A company has hired you to develop a new social media platform that will compete with tech giants like Facebook and X. You need to meet the following requirements for this new social media application:

  • It should be optimized for SEO and easily discoverable by web crawlers.

  • Users should not have to wait long for the initial load of the website.

  • The platform should quickly show updated data on the web page.

  • The website should be able to effectively display and handle dynamic data.

Given this information, what type of rendering should the platform use?

Data rendering

SSR + CSR: A hybrid approach

Neither SSR nor CSR is a clear winner. Modern applications require the advantages of both at different levels. Using SSR exclusively increases server load, which can degrade performance over time. Using CSR exclusively increases initial page load time. The practical solution is a hybrid: use SSR for the initial load and CSR for subsequent dynamic updates.

YouTube exemplifies this hybrid approach, using SPF (structured page fragments)SPF STRUCTURED PAGE FRAGMENTS. SPF. Accessed April 4, 2023. http://youtube.github.io/spfjs/. for static and dynamic loading of page content.

Quiz

1.

(Select all that apply.) Which option affects rendering selection? Multi-select

A.

User interaction

B.

Amount of CSS used

C.

Initial load time

D.

HTML file size

1 / 2

Speeding up web page loading

With a rendering strategy selected, a second source of user-perceived delay emerges: web page load delay. A web page consists of multiple objects (HTML, JavaScript, CSS, images, and audio), but not all are needed at initial load. For example, a notification list should only be fetched when the user clicks the notification icon. Loading that code upfront increases page load time ...