how to setup ssr with effector in javascript

index.tsx
// Import necessary packages
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { createEvent, createStore, createEffect } from 'effector';

// Create event and store
const inputChanged = createEvent();
const $inputValue = createStore('').on(inputChanged, (_, value) => value);

// Create effect for fetching data
const fetchUserData = createEffect({
  async handler() {
    const response = await fetch('/api/user');
    const userData = await response.json();
    return userData;
  },
});

// Define your React component
const App = () => {
  const [userData, setUserData] = React.useState(null);
  
  React.useEffect(() => {
    fetchUserData().then(setUserData);
  }, []);

  return (
    <div>
      <input type="text" value={$inputValue} onChange={(e) => inputChanged(e.target.value)} />
      {userData ? <div>Welcome, {userData.name}!</div> : <div>Loading...</div>}
    </div>
  );
};

// Render your component to a string
const html = ReactDOMServer.renderToString(<App />);

// Output the HTML string (in this case, to the console)
console.log(html);
1092 chars
40 lines