Next.js实现页面加载前获取应用配置存入localStorage的方案咨询

核心思路 #

getInitialProps 会在服务端渲染阶段和客户端路由切换阶段都执行，服务端环境不存在 window 和 localStorage 所以无法直接访问。我们可以通过 React Context 做全局状态共享 + 客户端初始化逻辑 + localStorage 持久化缓存 的组合方案完全满足你的需求，同时规避掉原有方案的两个缺陷。

具体实现步骤 #

1. 全局配置Context与自定义Hook封装 #

创建独立的配置上下文，实现跨组件直接读取配置的能力，彻底解决prop drilling问题：

// src/contexts/SettingsContext.tsx
import { createContext, useContext, useEffect, useState } from 'react';

type Settings = Record<string, any>; // 替换为你的配置实际类型

const SettingsContext = createContext<Settings | null>(null);

// 全局缓存变量，避免同一会话重复发起请求
let cachedSettings: Settings | null = null;
// 可选：配置缓存过期时间，示例为24小时
const CACHE_EXPIRE = 24 * 60 * 60 * 1000;

export const SettingsProvider = ({ children }: { children: React.ReactNode }) => {
  const [settings, setSettings] = useState<Settings | null>(cachedSettings);

  useEffect(() => {
    const initSettings = async () => {
      // 优先读内存缓存
      if (cachedSettings) {
        setSettings(cachedSettings);
        return;
      }
      // 读localStorage缓存，判断是否过期
      const localSettingsStr = localStorage.getItem('app_settings');
      const localSettingsExpire = localStorage.getItem('app_settings_expire');
      if (localSettingsStr && localSettingsExpire && Date.now() < Number(localSettingsExpire)) {
        const localSettings = JSON.parse(localSettingsStr);
        cachedSettings = localSettings;
        setSettings(localSettings);
        return;
      }
      // 缓存不存在/已过期，发起请求
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/settings`);
      const remoteSettings = await res.json();
      // 写入缓存
      cachedSettings = remoteSettings;
      localStorage.setItem('app_settings', JSON.stringify(remoteSettings));
      localStorage.setItem('app_settings_expire', String(Date.now() + CACHE_EXPIRE));
      setSettings(remoteSettings);
    };
    initSettings();
  }, []);

  return (
    <SettingsContext.Provider value={settings}>
      {children}
    </SettingsContext.Provider>
  );
};

// 自定义Hook，任意组件直接调用即可读取配置
export const useSettings = () => useContext(SettingsContext);

2. 改造_app.tsx，移除原有的getInitialProps逻辑 #

把配置Provider包裹在根组件外层即可：

// src/pages/_app.tsx
import type { AppProps } from 'next/app';
import { SettingsProvider } from '@/contexts/SettingsContext';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SettingsProvider>
      <Component {...pageProps} />
    </SettingsProvider>
  );
}

3. 组件内使用示例 #

任意层级组件无需透传props，直接调用自定义Hook读取配置：

// 任意业务组件
import { useSettings } from '@/contexts/SettingsContext';

const DemoComponent = () => {
  const settings = useSettings();
  // 可选：渲染loading状态直到配置加载完成
  if (!settings) return <div>加载中...</div>;
  return <div>站点名称：{settings.siteName}</div>;
};

方案优势 #

• 彻底解决prop drilling问题：所有组件通过useSettings即可直接读取配置
• 无重复请求：同一会话优先读内存缓存，刷新页面优先读localStorage缓存，仅在缓存不存在/过期时发起一次请求，路由切换不会触发重复请求
• 兼容服务端渲染：所有localStorage操作都在客户端useEffect中执行，不会出现服务端环境报错问题

可选优化：如果你的配置需要在服务端渲染阶段就注入到页面 #

可以保留getInitialProps逻辑，仅在服务端执行请求，客户端直接复用服务端返回的配置写入缓存即可，进一步减少首次请求：

App.getInitialProps = async ({ ctx }) => {
  // 仅服务端执行请求
  if (typeof window === 'undefined') {
    const settingsRequest = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/settings`);
    const settings = await settingsRequest.json();
    return { serverSettings: settings };
  }
  return { serverSettings: null };
};

之后在SettingsProvider中优先读取serverSettings作为初始值即可。

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