ReactJS服务端渲染：如何在server.js无感知下内部预调API？

针对你的需求，下面提供两种无需让server.js知晓具体API、且能在服务端渲染前内部执行API调用的可行方案：

方案一：组件静态数据预取方法 #

给需要获取数据的业务组件定义静态异步方法，服务端渲染时自动收集并执行这些方法，将数据注入组件后再完成渲染。

实现步骤 #

1. 在组件内封装API调用逻辑：
   给组件添加静态方法（比如getInitialProps），内部使用Node.js环境的请求工具（如axios或polyfill后的fetch）发起API请求，返回所需数据。

   import axios from 'axios';
   
   class PostList extends React.Component {
     // 静态方法，服务端直接调用
     static async getInitialProps() {
       // API调用逻辑完全封装在组件内部
       const response = await axios.get('https://api.example.com/posts');
       return { posts: response.data };
     }
   
     render() {
       return (
         <div className="post-list">
           {this.props.posts.map(post => (
             <div key={post.id} className="post-item">
               <h3>{post.title}</h3>
             </div>
           ))}
         </div>
       );
     }
   }
   
   export default PostList;
   

2. 服务端执行数据预取并渲染：
   在server.js中，先调用组件的静态方法获取数据，再将数据作为props传入组件，执行渲染。如果是嵌套组件，可使用react-tree-walker工具遍历组件树，收集所有带getInitialProps的组件并批量执行。

   import React from 'react';
   import { renderToString } from 'react-dom/server';
   import PostList from './components/PostList';
   
   async function handleRender(req, res) {
     // 执行组件内的API调用，获取初始数据
     const initialProps = await PostList.getInitialProps();
     // 注入数据并渲染组件
     const appHtml = renderToString(<PostList {...initialProps} />);
   
     // 将初始数据同步到客户端，避免重复请求
     const fullHtml = `
       <!DOCTYPE html>
       <html>
         <body>
           <div id="root">${appHtml}</div>
           <script>window.__INITIAL_PROPS__ = ${JSON.stringify(initialProps)}</script>
           <script src="/client-bundle.js"></script>
         </body>
       </html>
     `;
   
     res.send(fullHtml);
   }
   
   // 注册路由
   app.get('/', handleRender);
   

3. 客户端hydrate时复用数据：
   客户端初始化组件时，直接读取window.__INITIAL_PROPS__作为初始props，无需再次发起API请求。

方案二：React Suspense 异步数据预取 #

利用React Suspense特性，让组件在渲染时自动触发数据请求，服务端会等待请求完成后再渲染页面，全程无需server.js介入具体API逻辑。

实现步骤 #

1. 创建全局数据缓存层：
   封装数据获取逻辑，通过缓存避免重复请求，同时支持服务端和客户端共享状态。

   // data-cache.js
   const cache = new Map();
   
   // 实际API调用函数
   async function fetchPosts() {
     const res = await fetch('https://api.example.com/posts');
     return res.json();
   }
   
   // 供组件调用的获取方法，无数据时抛出Promise触发Suspense
   export function getPosts() {
     const cacheKey = 'posts';
     if (cache.has(cacheKey)) {
       return cache.get(cacheKey);
     }
     // 抛出Promise，让Suspense等待
     const dataPromise = fetchPosts().then(data => {
       cache.set(cacheKey, data);
       return data;
     });
     throw dataPromise;
   }
   

2. 组件内使用Suspense获取数据：
   组件直接调用缓存层的方法，外层用React.Suspense包裹，定义加载占位符。

   import React, { Suspense } from 'react';
   import { getPosts } from './data-cache';
   
   function PostList() {
     // 直接获取数据，无数据时触发Suspense
     const posts = getPosts();
     return (
       <div className="post-list">
         {posts.map(post => (
           <div key={post.id} className="post-item">
             <h3>{post.title}</h3>
           </div>
         ))}
       </div>
     );
   }
   
   export default function App() {
     return (
       <Suspense fallback={<div>加载中...</div>}>
         <PostList />
       </Suspense>
     );
   }
   

3. 服务端等待Suspense完成渲染：
   使用React 18+的renderToPipeableStream或renderToString（需支持Suspense），服务端会自动等待所有异步数据请求完成后再输出HTML。

   import React from 'react';
   import { renderToString } from 'react-dom/server';
   import App from './App';
   
   async function handleRender(req, res) {
     try {
       // 自动等待Suspense中的Promise完成
       const appHtml = await renderToString(<App />);
       const fullHtml = `
         <!DOCTYPE html>
         <html>
           <body>
             <div id="root">${appHtml}</div>
             <script src="/client-bundle.js"></script>
           </body>
         </html>
       `;
       res.send(fullHtml);
     } catch (err) {
       res.status(500).send('渲染出错');
     }
   }
   
   app.get('/', handleRender);
   

为什么之前的方案不生效？ #

• unsafe_componentWillMount：虽然会在服务端执行，但如果使用浏览器原生fetch而未在Node.js环境polyfill，会直接报错；且该生命周期已被废弃，存在潜在风险。
• getDerivedStateFromProps：是静态同步方法，无法处理异步API调用，自然无法在服务端完成数据预取。

内容的提问来源于stack exchange，提问作者Shal