RSC Demos

React Server Components (RSC) represent a paradigm shift in how we build React applications. Let's explore the key features and benefits that make RSC a game-changer for modern web development.

At their core, React Server Components allow you to write components that run exclusively on the server, reducing client-side JavaScript and improving performance. Here are the key advantages that make React Server Components transformative for web applications:

Lightning Fast

Instant server rendering with no client-side data fetching

Zero JS by Default

Static HTML without client-side JavaScript

Server Power

Direct access to backend resources and databases

Enhanced Security

Keep sensitive operations server-side without needing an API

Streaming Ready

Progressive loading with React Suspense

Smaller Bundles

Only ship necessary JavaScript to the client

Better DX

Simpler data fetching and component patterns

SEO Friendly

Server-rendered content for search engines

To better understand these benefits in action, let's look at a practical example comparing server and client components. Below, you'll see two identical charts - one rendered on the server and one on the client. Notice how the server component appears instantly with the data, while the client component needs to fetch data after mounting.

Even if you disable JavaScript, the Server Component is still shown!

shared

node.js

TechnologyFinancialsEnergyCyclicalDefensiveUtilities

client

node.js

The charts above are powered by RosenCharts, a modern charting library specifically designed for RSC. It demonstrates how libraries can be built to take advantage of server-side rendering capabilities.

However, it's important to note that the RSC ecosystem is still evolving. Many popular libraries, including Nivo charts, don't yet support React 19 and the new server components architecture. This is currently one of the main challenges when adopting RSC, as developers need to either wait for library updates or find RSC-compatible alternatives.

Let's look at one more example that showcases how RSC can optimize complex UI components. The code blocks below would typically be massive client components with multiple themes and language support. With RSC, we can just render these components on the server and ship pre-rendered HTML to the client. This significantly reduces the JavaScript bundle size. These blocks are powered by Bright, a syntax highlighting library that demonstrates RSC compatibility.

Python

dark-plus

def greet(name):
    print(f"Hello, {name}!")

greet("World")

C++

dracula-soft

#include <iostream>

int main() {
    std::cout << "Hello, World!" << std::endl;
    return 0;
}

dracula

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

Java

github-dark

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

github-dark-dimmed

using System;

class Program {
    static void Main() {
        Console.WriteLine("Hello, World!");
    }
}

JavaScript

github-light

function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("World");

light-plus

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

Visual Basic

material-darker

Module HelloWorld
    Sub Main()
        Console.WriteLine("Hello, World!")
    End Sub
End Module

Delphi/Object Pascal

material-default

program HelloWorld;
begin
  WriteLn('Hello, World!');
end.

SQL

material-lighter

SELECT 'Hello, World!' AS Greeting;

Fortran

material-ocean

program Hello
  print *, 'Hello, World!'
end program Hello

PHP

material-palenight

<?php
  echo "Hello, World!";
?>

min-dark

greet <- function(name) {
  cat("Hello,", name, "!\n")
}

greet("World")

Ada

min-light

with Ada.Text_IO;
procedure Hello is
begin
  Ada.Text_IO.Put_Line("Hello, World!");
end Hello;

MATLAB

monokai

function greet(name)
    fprintf('Hello, %s!\n', name);
end

greet('World');

Assembly

nord

; x86 NASM syntax
section .data
    msg db 'Hello, World!',0Ah
section .text
    global _start
_start:
    ; write system call

Rust

one-dark-pro

fn main() {
    println!("Hello, World!");
}

Perl

poimandres

print "Hello, World!\n";

COBOL

slack-dark

IDENTIFICATION DIVISION.
PROGRAM-ID. HelloWorld.
PROCEDURE DIVISION.
    DISPLAY 'Hello, World!'.
    STOP RUN.

TypeScript

slack-ochin

function greet(name: string): void {
    console.log(`Hello, ${name}!`);
}

greet("World");

Kotlin

solarized-dark

fun main() {
    println("Hello, World!")
}

Swift

solarized-light

import Foundation

print("Hello, World!")

Before you leave this page, open your browser's developer tools and disable JavaScript - you'll notice that most of the content still works perfectly! This is because React Server Components render the HTML and CSS on the server, resulting in an initial payload of less than 40KB for this entire page.

Now imagine if this was a traditional React application - the client-bundle.js would be massive, containing all the chart libraries, code editors, and UI components. On mobile devices with limited bandwidth and processing power, downloading and executing that bundle would create significant delays. React Server Components solve this by moving the heavy lifting to the server and only sending the minimal necessary JavaScript to the client.

Next, let's go into detail about the differences between client and server components, and when to use them.

Kinds