Client-Side Rendering (CSR)

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.

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.

jsimport { 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.

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

tsximport { 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;

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.

✅ 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 is ideal when data needs to be fetched based on user actions.

tsximport { 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;

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.