add Hydration test

Author: ajaxsys

dist/bundle.js

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "babel-node server.js",
+    "watch": "npx webpack --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

package.json

@@ -1,11 +1,14 @@
-// server.js
 const express = require('express');
 const React = require('react');
 const ReactDOMServer = require('react-dom/server');
+const path = require('path');
 const App = require('./src/App').default;
 
 const app = express();
 
+// 提供打包后的静态文件
+app.use(express.static(path.resolve(__dirname, 'dist')));
+
 app.get('*', (req, res) => {
   const appHtml = ReactDOMServer.renderToString(React.createElement(App));
   const html = `
@@ -28,4 +31,3 @@ app.get('*', (req, res) => {
 app.listen(3000, () => {
   console.log('Server is running on http://localhost:3000');
 });
-

server.js

@@ -1,7 +1,18 @@
-// src/index.js
-import React from 'react';
+import React, { useState } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import App from './App';
 
-// 使用 hydrateRoot 方法补水
-hydrateRoot(document.getElementById('root'), <App />);
+function HydrationTest() {
+  const [clicked, setClicked] = useState(false);
+
+  return (
+    <div>
+      <App />
+      <button onClick={() => setClicked(!clicked)}>
+        {clicked ? 'Clicked!' : 'Click me'}
+      </button>
+    </div>
+  );
+}
+
+hydrateRoot(document.getElementById('root'), <HydrationTest />);