React SSR + fetch data by server

ajaxsys · ajaxsys · commit ead8c7b8b01f · 2024-08-20T11:34:58.000+09:00
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+Try React SSR
+
+how to run:
+
+```shell
+ # terminal 1
+ npm install
+ npx webpack --watch
+
+ # terminal 2
+ npm start
+```
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/mockData.js b/mockData.js
@@ -0,0 +1,9 @@
+export const fetchMockData = () => {
+  return new Promise((resolve) => {
+    // 模拟网络延迟
+    setTimeout(() => {
+      // 返回模拟数据
+      resolve({ message: 'This is mock data from the API.' });
+    }, 1000); // 1秒延迟
+  });
+};
diff --git a/package.json b/package.json
@@ -15,7 +15,6 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
-    "@remix-run/router": "^1.19.1",
     "babel-loader": "^9.1.3",
     "express": "^4.19.2",
     "react": "^18.3.1",
diff --git a/server.js b/server.js
@@ -5,17 +5,19 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom/server';
 import App from './src/App';
+import { fetchMockData } from './mockData'; // 导入 mock 数据函数
 
 const app = express();
 
 app.use(express.static(path.resolve(__dirname, 'dist')));
 
-app.get('*', (req, res) => {
+app.get('*', async (req, res) => {
+  const mockData = await fetchMockData(); // 使用 mock 数据函数
+
   const context = {};
-  
   const appHtml = ReactDOMServer.renderToString(
     <StaticRouter location={req.url} context={context}>
-      <App />
+      <App serverData={mockData} />
     </StaticRouter>
   );
 
@@ -40,6 +42,9 @@ app.get('*', (req, res) => {
     </head>
     <body>
         <div id="root">${appHtml}</div>
+        <script>
+          window.__INITIAL_DATA__ = ${JSON.stringify(mockData)};
+        </script>
         <script src="/bundle.js"></script>
     </body>
     </html>
diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,7 @@ import { Routes, Route, Link } from 'react-router-dom';
 import Home from './Home';
 import Blog from './Blog';
 
-function App() {
+function App({serverData}) {
   return (
     <div>
       <nav>
@@ -12,7 +12,7 @@ function App() {
         <Link to="/blog/1">Blog 1</Link>
       </nav>
       <Routes>
-        <Route path="/" element={<Home />} />
+        <Route path="/" element={<Home serverData={serverData} />} />
         <Route path="/blog/:id" element={<Blog />} />
       </Routes>
     </div>
diff --git a/src/Home.js b/src/Home.js
@@ -1,11 +1,32 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { fetchMockData } from '../mockData'; // 导入 mock 数据函数
 
-function Home() {
+function Home({serverData}) {
   const [clicked, setClicked] = useState(false);
+  const [data, setData] = useState(serverData || null);
+
+  useEffect(() => {
+    console.log("serverData", serverData)
+    if (!serverData || !serverData.message) {
+      // 为什么这里也需要一次fetch？
+      // 目的是为了防止服务器SSR获取出错（如缓存击穿就放弃获取）的异常情况，客户端进行一个补偿容错机制
+      // SSR服务器往往是从内网获取数据，
+      // 而CSR是从公网获取数据
+      // 两者走的网络甚至服务器都有可能不一样。
+      // 根据具体的业务逻辑可以设计让系统更加强健，如果服务器获取失败，客户端可以获取一个别的版本的数据
+      fetchMockData()
+        .then(data => {
+          data.message = data.message + "(From CSR)";
+          setData(data);
+        })
+        .catch(err => console.error('Mock fetch failed:', err));
+    }
+  }, [serverData]);
 
   return (
     <div>
       <h1>Home Page</h1>
+      <p>Data: {JSON.stringify(data)}</p>
       <button onClick={() => setClicked(!clicked)}>
         {clicked ? 'Clicked!' : 'Click me'}
       </button>
diff --git a/src/index.js b/src/index.js
@@ -4,8 +4,12 @@ import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
+const data = window.__INITIAL_DATA__; // 从 SSR 注入的数据
+console.log("window.__INITIAL_DATA__", window.__INITIAL_DATA__)
+
 root.render(
   <BrowserRouter>
-    <App />
+    <App serverData={data}/>
   </BrowserRouter>
 );
