init without hydration

ajaxsys · ajaxsys · commit 4285fd5a46a4 · 2024-08-19T23:40:59.000+09:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
+
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react-ssr-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "babel-node server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "express": "^4.19.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-middleware": "^7.3.0",
+    "webpack-hot-middleware": "^2.26.1",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/node": "^7.25.0"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,31 @@
+// server.js
+const express = require('express');
+const React = require('react');
+const ReactDOMServer = require('react-dom/server');
+const App = require('./src/App').default;
+
+const app = express();
+
+app.get('*', (req, res) => {
+  const appHtml = ReactDOMServer.renderToString(React.createElement(App));
+  const html = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>React SSR</title>
+    </head>
+    <body>
+        <div id="root">${appHtml}</div>
+        <script src="/bundle.js"></script>
+    </body>
+    </html>
+  `;
+  res.send(html);
+});
+
+app.listen(3000, () => {
+  console.log('Server is running on http://localhost:3000');
+});
+
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,14 @@
+// src/App.js
+import React from 'react';
+
+function App() {
+  return (
+    <div>
+      <h1>Hello, SSR!</h1>
+      <p>This is a simple server-side rendered React application.</p>
+    </div>
+  );
+}
+
+export default App;
+
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+// src/index.js
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App';
+
+// 使用 hydrateRoot 方法补水
+hydrateRoot(document.getElementById('root'), <App />);
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,25 @@
+// webpack.config.js
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      }
+    ]
+  },
+  mode: 'development'
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "presets": ["@babel/preset-env", "@babel/preset-react"]
 +}
++