React+Express+MongoDB全栈项目部署求助：解决Render免费版休眠问题

一、免费部署平台推荐 #

• Railway：免费额度适配小型项目，服务端休眠时长约30分钟（比Render更长），支持一键部署Express和MongoDB，React静态站点可直接部署为静态服务，数据库提供免费基础实例。
• Fly.io：提供允许睡眠的免费实例，服务端休眠后首次访问会自动唤醒，支持容器化部署，适配Express项目；React静态站点可部署为静态应用，MongoDB可搭配其免费数据服务或MongoDB Atlas免费层。
• Vercel + Heroku（免费层）：Vercel部署React静态站点速度快，Heroku免费层服务端虽会休眠，但可配合唤醒脚本使用；需绑定信用卡但不会扣费，适合能接受绑定的场景。
• MongoDB Atlas：专属数据库免费层，提供512MB存储空间，足够小型项目使用，可搭配任意免费服务端平台。

二、静态站点触发服务端唤醒的可行方案 #

1. 前端请求重试机制 #

在React的API请求封装中加入重试逻辑，当请求因服务端休眠返回5xx错误时，自动重试1-2次，给服务端留足唤醒时间。示例代码：

const fetchWithRetry = async (url, options = {}, retries = 2) => {
  try {
    const response = await fetch(url, options);
    if (!response.ok && retries > 0) {
      await new Promise(resolve => setTimeout(resolve, 3000));
      return fetchWithRetry(url, options, retries - 1);
    }
    return response;
  } catch (error) {
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, 3000));
      return fetchWithRetry(url, options, retries - 1);
    }
    throw error;
  }
};

2. 定时心跳请求 #

在React项目中添加定时任务，每隔10分钟向服务端发送简单GET请求（如/api/ping），维持服务端活跃；用户关闭页面后停止定时器，避免无效请求：

let heartbeatInterval;

const startHeartbeat = () => {
  heartbeatInterval = setInterval(async () => {
    try {
      await fetch('/api/ping');
    } catch (err) {
      // 忽略错误，服务端休眠后下次请求会自动唤醒
    }
  }, 10 * 60 * 1000); // 10分钟一次
};

const stopHeartbeat = () => {
  clearInterval(heartbeatInterval);
};

// 组件挂载时启动心跳，卸载时停止
useEffect(() => {
  startHeartbeat();
  return () => stopHeartbeat();
}, []);

同时在Express服务端添加对应路由：

app.get('/api/ping', (req, res) => {
  res.status(200).send('pong');
});

3. 页面加载预请求唤醒 #

在React入口组件（如App.js）中，页面加载完成后立即发送轻量请求到服务端，提前唤醒服务端，避免用户后续操作等待：

useEffect(() => {
  // 页面加载时发送ping请求唤醒服务端
  fetch('/api/ping').catch(() => {});
}, []);

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