use-sse

import React from 'react'; import { useSSE } from 'use-sse'; // This function simulates an asynchronous data fetch that would typically happen on the server. // In a real SSR setup, the return value would be serialized into the HTML and picked up by useSSE. async function fetchData(itemId: string) { return new Promise<{ id: string; name: string }>(resolve => { setTimeout(() => { resolve({ id: itemId, name: `Item Data for ${itemId}` }); }, 100); // Simulate network latency }); } interface MyComponentProps { initialItemId: string; } function MyComponent({ initialItemId }: MyComponentProps) { // useSSE takes a data fetching function and a dependency array. // If running on the server, it executes `fetchData` and serializes the result. // On the client, it checks for serialized data before potentially re-running `fetchData`. const [data, error] = useSSE(() => fetchData(initialItemId), [initialItemId]); if (error) { return <div style={{ color: 'red' }}>Error loading data: {error.message}</div>; } if (!data) { // This will typically show on the client while hydrating if data isn't immediately available // or during initial client-side rendering if no SSR occurred. return <div>Loading...</div>; } return ( <div> <h1>useSSE Example</h1> <p>Data loaded:</p> <pre>{JSON.stringify(data, null, 2)}</pre> <p>This data was likely pre-fetched during server-side rendering, reducing client-side load time.</p> </div> ); } // Example usage within a React application const App = () => <MyComponent initialItemId="product-abc" />; export default App;