Client-Side Rendering (CSR)

What is Client-Side Rendering?

Client-Side Rendering (CSR) is a technique where the initial HTML sent to the browser is minimal, and JavaScript dynamically fetches and renders content after the page loads. This approach is commonly used in modern single-page applications (SPAs) and provides:

• ✅ Fast Navigation – Once the app is loaded, subsequent page transitions happen instantly.
• ✅ Reduced Server Load – Since most rendering happens on the client, the server only needs to provide APIs.
• ✅ Rich Interactivity – Components can easily update based on user interactions without requiring a full-page reload.

However, CSR has some trade-offs:

• ❌ Slower Initial Load – The page needs to download JavaScript before rendering content.
• ❌ SEO Challenges – Search engines might struggle to index content that is rendered only in the browser.

How CSR Works in Rasengan.js

By default, pages in Rasengan.js use Server-Side Rendering (SSR).

However, you can opt-in to Client-Side Rendering (CSR) by setting ssr: false in the rasengan.config.js file.

import { defineConfig } from 'rasengan';
 
export default defineConfig({
  ssr: false,
});

By setting ssr: false, you're disabling SSR and opting into CSR. By doing this, you will have the following behavior:

• The server delivers a minimal HTML file.
• The JavaScript bundle loads in the browser.
• React takes over rendering and updates the UI dynamically.
• The page becomes interactive once React has finished rendering.

Example: Fetching Data on the Client

In CSR, data fetching happens inside the component using hooks like useEffect.

import { PageComponent } from 'rasengan';
import { useEffect, useState } from 'react';
 
const Profile: PageComponent = () => {
  const [user, setUser] = useState<{ name: string; email: string } | null>(
    null
  );
 
  useEffect(() => {
    fetch('https://api.example.com/user')
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);
 
  if (!user) return <p>Loading...</p>;
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};
 
Profile.path = '/profile';
Profile.metadata = {
  title: 'User Profile',
  description: 'View your profile information',
};
 
export default Profile;

How It Works:

1. The initial HTML contains only a loading indicator (<p>Loading...</p>).
2. After the JavaScript loads, the useEffect hook runs and fetches user data.
3. Once data is available, React updates the UI without a page refresh.

When to Use CSR

✅ Use CSR when:

• The page is highly interactive (e.g., dashboards, admin panels).
• SEO is not a priority (e.g., internal tools, private pages).
• The data is user-specific and cannot be cached globally.

❌ Avoid CSR when:

• The page needs SEO optimization (use SSR instead).
• The page must load instantly with pre-rendered content.

CSR vs. SSR: Which One Should You Use?

Example: Client-Side Data Fetching with User Interaction

CSR is ideal when data needs to be fetched based on user actions.

import { PageComponent } from 'rasengan';
import { useState } from 'react';
 
const Search: PageComponent = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<{ name: string }[]>([]);
 
  const handleSearch = async () => {
    const data = await fetch(`https://api.example.com/search?q=${query}`).then(
      (res) => res.json()
    );
    setResults(data);
  };
 
  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button onClick={handleSearch}>Search</button>
 
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
 
Search.path = '/search';
Search.metadata = {
  title: 'Search',
  description: 'Search for items in our database',
};
 
export default Search;

Conclusion

Client-Side Rendering in Rasengan.js provides a fast and interactive experience once the page is loaded. It is best for dynamic applications where SEO is not a primary concern.