http://localhost:3000/c/post?_rsc=uuzjc

用户访问 /c/post
  ↓
1. 浏览器请求 /c/post
  ↓
2. Next.js 返回 RSC Payload: /c/post?_rsc=uuzjc
  ↓
3. 浏览器请求客户端组件 JavaScript
  ↓
4. React 在客户端水合（hydrate）
  ↓
最终页面呈现

useEffect(() => {
  // 定义所有需要预加载的管理路由
  const routes = [
    '/c/post',
    '/c/collections',
    '/c/config',
    '/c/user',
    '/c/user/info',
    '/c/queue',
    '/c/vector-search',
    '/c/edit/new',
  ];

  // 在用户空闲时预加载路由
  const prefetchRoutes = async () => {
    for (const route of routes) {
      try {
        await router.prefetch(route);
      } catch (error) {
        console.warn(`Failed to prefetch route: ${route}`, error);
      }
    }
  };

  // 使用 requestIdleCallback 在浏览器空闲时预加载
  if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
    (window as any).requestIdleCallback(() => {
      prefetchRoutes();
    });
  } else {
    // 降级方案：延迟 1 秒后预加载
    const timer = setTimeout(() => {
      prefetchRoutes();
    }, 1000);

    return () => clearTimeout(timer);
  }
}, [router]);

// src/app/c/post/loading.tsx
export default function Loading() {
  return (
    <div className="flex h-full items-center justify-center">
      <div className="text-center">
        <div className="mb-4 text-lg text-gray-600 dark:text-gray-400">
          加载中...
        </div>
      </div>
    </div>
  );
}

// src/hooks/useCachedApi.ts
import { useState, useEffect, useRef } from 'react';

interface CachedApiOptions<T> {
  cacheKey: string;
  cacheDuration?: number; // 默认 60000ms (1分钟)
  fetcher: () => Promise<T>;
  enabled?: boolean;
  onSuccess?: (data: T) => void;
  onError?: (error: unknown) => void;
}

interface CachedData<T> {
  data: T;
  timestamp: number;
}

// 全局缓存存储（内存缓存）
const cache = new Map<string, CachedData<unknown>>();

export function clearCache(cacheKey: string) {
  cache.delete(cacheKey);
}

export function clearAllCache() {
  cache.clear();
}

export function useCachedApi<T>({
  cacheKey,
  cacheDuration = 60000,
  fetcher,
  enabled = true,
  onSuccess,
  onError,
}: CachedApiOptions<T>) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<unknown>(null);
  const abortControllerRef = useRef<AbortController | null>(null);

  useEffect(() => {
    if (!enabled) return;

    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    abortControllerRef.current = new AbortController();

    const fetchData = async () => {
      try {
        setLoading(true);
        setError(null);

        // 检查缓存
        const cached = cache.get(cacheKey) as CachedData<T> | undefined;
        const now = Date.now();

        // 如果有缓存且未过期，直接使用
        if (cached && now - cached.timestamp < cacheDuration) {
          setData(cached.data);
          onSuccess?.(cached.data);
          setLoading(false);
          return;
        }

        // 请求新数据
        const freshData = await fetcher();

        // 更新缓存
        cache.set(cacheKey, {
          data: freshData,
          timestamp: now,
        });

        setData(freshData);
        onSuccess?.(freshData);
      } catch (err) {
        if (err instanceof Error && err.name === 'AbortError') {
          return;
        }

        setError(err);
        onError?.(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, [cacheKey, cacheDuration, fetcher, enabled, onSuccess, onError]);

  const refetch = () => {
    cache.delete(cacheKey);
    // ... 重新请求逻辑
  };

  return { data, loading, error, refetch };
}

// src/app/c/post/page.tsx
import { useCachedApi } from '@/hooks/useCachedApi';

// 在数据加载函数中添加缓存控制
const response = await axios.get('/api/post/list', {
  params,
  headers: {
    'X-Cache-Key': `posts-${JSON.stringify(params)}`,
  },
});

import { clearCache } from '@/hooks/useCachedApi';

clearCache('posts-list');