🔄

Client-Side Rendering (CSR)

This page demonstrates dynamic client-side styling and interactions. Everything is rendered and styled in the browser using React hooks and state.

Client-side rendered content

How CSR Works:

1Browser downloads HTML shell and JavaScript bundle
2JavaScript executes and renders the page
3API calls are made to fetch data
4Page updates with fetched data and styling

Interactive Features:

Dynamic State Management

Loading states, error handling, and data updates

Client-Side Animations

Smooth transitions and interactive effects

Real-time Updates

Content updates without page refresh

Sample Posts (Fetched Client-Side):

Loading posts with dynamic styling...

Demonstrating client-side loading states

CSR Styling Characteristics:

✅ Advantages

  • Dynamic interactions and animations
  • Real-time style updates
  • Rich user interface components
  • Responsive to user interactions

⚠️ Considerations

  • Styles load after JavaScript execution
  • Potential flash of unstyled content
  • Requires JavaScript for styling
  • Runtime style computations

⚡Technical Deep Dive: How CSR Works

Initial HTML (What Browser Gets)

<!DOCTYPE html>
<html>
<head>
  <title>CSR Page</title>
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <div id="__next">
    <!-- Empty or minimal content -->
    <div class="loading-spinner">Loading...</div>
  </div>
  <script src="bundle.js"></script>
</body>
</html>

⚠️ Minimal HTML - Most content rendered by JavaScript

After JavaScript Execution

<!-- DOM populated by React -->
<div id="__next">
  <h1>Client-Side Rendered Content</h1>
  <div class="posts-container">
    
  </div>
</div>

✅ Fully rendered DOM - Content populated by JavaScript

JavaScript Bundle Breakdown

~250KB
React Runtime
~45KB
Component Code
~15KB
Styling Libraries

Total bundle size affects initial load time and Time to Interactive (TTI)

CSR Rendering Timeline

1
HTML Downloaded (~0ms)
Browser receives minimal HTML shell
2
JavaScript Downloaded (~500ms)
Bundle parsed and executed
3
API Call Made (~800ms)
Fetch data from external API
4
Content Rendered (~2000ms)
DOM updated with fetched data

TTFB

~50ms

Fast HTML delivery

FCP

~800ms

After JS execution

LCP

~2000ms

After API response

TTI

~2100ms

Fully interactive

Client-Side State Management

Current State:

{ posts: [0 items], loading: true, error: null, animateCards: false }

Capabilities:

  • • Real-time state updates
  • • Dynamic styling based on state
  • • Interactive animations
  • • User-driven state changes