React页面刷新时导航栏动态数据加载延迟问题求解

我创建了头部导航栏，导航栏数据通过动态接口获取，实现代码如下：

const [navItem, setNavItem] = useState([]);
useEffect(() => {
  fetch("https://localhost//wp-json/wp/v2/pages")
    .then((res) => res.json())
    .then((data) => {
      data.sort((a, b) => a.id - b.id);
      setNavItem(data);
    });
}, []);

当前遇到的问题：页面刷新时，数据加载需要一定时间，导航栏会出现空白或延迟渲染，希望解决该加载延迟问题。

可行解决方法 #

1. 添加加载状态占位（骨架屏/加载提示） #

在数据加载完成前，展示与导航栏结构一致的骨架屏或加载提示，避免页面空白，提升用户感知。

实现示例：

const [navItem, setNavItem] = useState([]);
const [isLoading, setIsLoading] = useState(true); // 新增加载状态

useEffect(() => {
  fetch("https://localhost//wp-json/wp/v2/pages")
    .then((res) => res.json())
    .then((data) => {
      data.sort((a, b) => a.id - b.id);
      setNavItem(data);
    })
    .finally(() => setIsLoading(false)); // 请求结束后关闭加载状态
}, []);

// 渲染逻辑
if (isLoading) {
  // 骨架屏组件，模拟导航栏结构
  return (
    <nav className="nav-skeleton">
      <div className="nav-item-skeleton"></div>
      <div className="nav-item-skeleton"></div>
      <div className="nav-item-skeleton"></div>
    </nav>
  );
}

return (
  <nav>
    {navItem.map(item => (
      <a key={item.id} href={`/${item.slug}`}>{item.title.rendered}</a>
    ))}
  </nav>
);

2. 缓存接口数据 #

利用localStorage或sessionStorage缓存已获取的导航数据，页面刷新时先读取缓存快速渲染，再后台请求最新数据更新缓存，减少等待时间。

实现示例：

const [navItem, setNavItem] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  // 优先读取本地缓存
  const cachedNav = localStorage.getItem('navItems');
  if (cachedNav) {
    setNavItem(JSON.parse(cachedNav));
    setIsLoading(false);
  }

  // 后台请求最新数据并更新缓存
  fetch("https://localhost//wp-json/wp/v2/pages")
    .then((res) => res.json())
    .then((data) => {
      data.sort((a, b) => a.id - b.id);
      setNavItem(data);
      localStorage.setItem('navItems', JSON.stringify(data)); // 更新缓存
    })
    .finally(() => setIsLoading(false));
}, []);

3. 优化接口请求 #

• 减少返回数据量：WP REST API支持_fields参数，只请求导航所需字段（如id、slug、title），缩小响应体积
• 启用HTTP缓存：配置服务器端Cache-Control响应头，让浏览器缓存接口请求结果

优化后的请求示例：

fetch("https://localhost//wp-json/wp/v2/pages?_fields=id,slug,title")
  .then(res => res.json())
  .then(data => {
    data.sort((a, b) => a.id - b.id);
    setNavItem(data);
  });

4. 服务端渲染（SSR）或静态生成（SSG） #

如果使用Next.js等支持SSR/SSG的框架，可在构建时或服务器端提前获取导航数据，页面加载时直接渲染导航栏，完全避免前端加载延迟。

Next.js getStaticProps示例：

export async function getStaticProps() {
  const res = await fetch("https://localhost//wp-json/wp/v2/pages?_fields=id,slug,title");
  const data = await res.json();
  const navItem = data.sort((a, b) => a.id - b.id);

  return {
    props: { navItem }, // 传递给页面组件
    revalidate: 86400, // 每天重新生成一次静态页面
  };
}

// 页面组件直接使用props中的导航数据
export default function Header({ navItem }) {
  return (
    <nav>
      {navItem.map(item => (
        <a key={item.id} href={`/${item.slug}`}>{item.title.rendered}</a>
      ))}
    </nav>
  );
}

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