https://jetfire.studio/sharts-server-handled-and-react-transmitted-state/

SHARTS (Server-Handled And React-Transmitted State) is a new approach to building full-stack React applications. It leverages React Server Components (RSC) to handle static content and data fetching on the server while leaving dynamic interactions and state management to React on the client. This separation improves performance and reduces complexity by allowing the server to handle heavy tasks while the client focuses on interactivity.

The Role of HATERS

To make SHARTS effective, it relies on HATERS (Handler-Assisted Transitions and Explicit React State). HATERS manages state transitions and data persistence through server-side handlers (like Remix loaders and actions) while the client takes care of dynamic behavior. This division ensures that state transitions are explicit, predictable, and easy to maintain.

Example of SHARTS in Action

Server-Handled Component

export default async function UsersList() {

  const users = await fetch('https://api.example.com/users').then(res => res.json());

    return (
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    );

}

Client-Side Component

import { useState } from 'react';

export default function UserActions({ userId }) {

  const [status, setStatus] = useState('active');

  const toggleStatus = async () => {
    const newStatus = status === 
      'active' ? 'inactive' : 'active';

    setStatus(newStatus);

    await fetch(`/api/users/${userId}/status`, {
      method: 'POST',
      body: JSON.stringify({
        status: newStatus
      }),
      headers: {
       'Content-Type': 'application/json'
      }
    });
  };

  return (
    <button onClick={toggleStatus}>
      {status === 'active' ? 'Deactivate' : 'Activate'}
      User
    </button>;

}

Key Benefits

- Improved Performance: Offloading data fetching and rendering to the server reduces the JavaScript payload. - Clear Separation: Server handles static content; client handles interactivity, simplifying the app.

SHARTS is ideal for apps requiring both efficient data management and dynamic user interactions.