研究ssr

gpt-query/one/src/App.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react';
+
+const App = ({ initialState }) => {
+  const [name, setName] = useState(initialState.name);
+  useEffect(() => {
+    setName('Client'); // 仅客户端执行
+}, []);
+  return (
+    <div
+      onClick={() => {
+        setName('Jane Doe233');
+      }}
+    >
+      Hello World {name}
+    </div>
+  );
+};
+
+export default App;

gpt-query/one/src/client.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App';
+
+const initialState = window.__INITIAL_STATE__ || { name: 'Default Name' };
+
+hydrateRoot(document.getElementById('root'), <App initialState={initialState} />);