T3 Stack应用页面加载时后端数据丢失问题求助

一、解决数据丢失：实现数据持久化 #

内存数组属于临时存储，只要服务端进程重启或代码热重载（编译）就会被重置，必须用持久化存储替代：

1. 用Prisma连接数据库（推荐，适配T3 Stack） #

你已经配置了Prisma，直接新增数据模型存储数组内容：

• 在prisma/schema.prisma中添加模型：

model StoredData {
  id        String   @id @default(cuid())
  dataArray Json     // 存储你的数组数据，支持任意JSON结构
  updatedAt DateTime @updatedAt
}

• 运行npx prisma migrate dev生成数据库表
• 在RouterX.ts中替换内存数组为Prisma操作：

// 替换原来的内存数组
// let dataArray = [];

// 读取数据
async function getStoredData() {
  const entry = await prisma.storedData.findFirst();
  return entry ? entry.dataArray as YourDataType[] : [];
}

// 写入数据
async function updateStoredData(newData: YourDataType[]) {
  await prisma.storedData.upsert({
    where: { id: "default" }, // 用固定ID存单条数组数据
    update: { dataArray: newData },
    create: { id: "default", dataArray: newData },
  });
}

这样不管服务端怎么编译，数据都存在数据库里，不会丢失。

2. 轻量方案：本地文件存储（适合小项目） #

如果暂时不想用数据库，可读写本地JSON文件：

import fs from "fs/promises";
import path from "path";

const DATA_PATH = path.join(process.cwd(), "data", "storedArray.json");

async function getStoredData() {
  try {
    const data = await fs.readFile(DATA_PATH, "utf-8");
    return JSON.parse(data) as YourDataType[];
  } catch {
    return [];
  }
}

async function updateStoredData(newData: YourDataType[]) {
  await fs.mkdir(path.dirname(DATA_PATH), { recursive: true });
  await fs.writeFile(DATA_PATH, JSON.stringify(newData));
}

注意：文件存储要处理并发写入问题，生产环境不推荐。

二、优化服务端编译行为 #

dev模式下首次访问未编译的服务端页面会触发编译，这是正常行为，但可以通过以下方式减少不必要的编译：

1. 标记页面为客户端组件 #

如果/WaitingRoom页面不需要服务端渲染逻辑，在页面顶部添加'use client'：

// app/WaitingRoom/page.tsx
'use client';

// 页面代码...

这样页面只会在客户端编译，不会触发服务端编译流程。

2. 避免服务端组件依赖频繁变化的文件 #

如果RouterX.ts被服务端组件直接导入，可将数据操作逻辑封装到独立的服务层（比如src/server/services/dataService.ts），并确保该文件不会被频繁修改，减少热重载触发。

3. 检查编译缓存配置 #

确认Next.js的编译缓存正常工作，dev模式下默认会缓存已编译的页面，重复访问同一页面不会重新编译。如果每次切换页面都编译，检查页面或路由中是否设置了cache: 'no-store'这类禁用缓存的配置。

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