DEV Community

Joy Lee 🌻
Joy Lee 🌻

Posted on • Edited on

CSR, SSR, and Progressive Rendering in Javascript

#javascript #beginners #webdev

💻 Client Side Rendering (CSR)

CSR refers to rendering web pages directly in the web browser using JavaScript. All logic, data fetching, templating, and routing are handled on the client (browser) side.

How it Works

  1. Client âž¡ Server: Notifies site access.
  2. Server âž¡ Client: Sends index.html Initial access results in receiving an empty HTML with no content, leading to a blank screen. 
<html>
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Client âž¡ Server: Requests JavaScript file.
  2. Server âž¡ Client: Sends app.js file (large size, long initial load time).Includes JavaScript logic, frameworks, and libraries needed to run.

Advantages

  • Fast subsequent re-rendering after initial load.
  • Reduced server data requests.

Disadvantages

  • Long initial loading time (Time To View).
  • Poor SEO due to empty initial HTML.

📲 Server Side Rendering (SSR)

SSR fetches all necessary data on the server side and sends fully rendered HTML to the client upon site access. This results in fast loading and efficient SEO. SSR does not depend on client device specifications, allowing HTML construction on high-performance servers.

How it Works

  1. Client âž¡ Server: Notifies site access.
  2. Server âž¡ Client: Sends index.html.
  3. Server fetches required data and sends well-structured HTML during loading.
  4. Client âž¡ Server: Requests JavaScript file.
  5. Server âž¡ Client: Sends app.js.

Advantages

  • Optimized for Search Engine Optimization (SEO).
  • Fast initial page view.

Disadvantages

  • Page flickering on navigation.
  • Increased server load due to server rendering.
  • Potential functionality issues until full JavaScript load.

📱 Progressive Rendering

A form of Server Side Rendering where high-priority HTML content is initially rendered and painted on the client side. This approach ensures quick display of crucial content followed by less critical content.

How it Works

  1. HTML request.
  2. Initial high-priority HTML rendering
  3. client painting.
  4. Subsequent HTML rendering
  5. client painting.

REFERENCE
https://blog.naver.com/jasonrewriter/222220034926
Youtube DreamCoding https://www.youtube.com/watch?v=iZ9csAfU5Os&t=277s

Top comments (0)

Read next

sagar25 profile image

TDoC 2024 - Day 3: Introduction to Machine Learning

Sagar Das -

mrinasugosh profile image

3 Myths, 3 Facts, and 3 Strategies to Scale Node.js Apps

Mrinalini Sugosh (Mrina) -

dev007777 profile image

Stop Struggling Learn CSS Faster

TheDev -

hr21don profile image

Discuss: What's your tech Prediction for 2025?

Helitha Rupasinghe -