我正在做一个Next.js多站点范围的项目，我需要创建一组全局变量用于客户端和服务器端（SSR期间）。
到目前为止，我来到下面的解决方案.
这是我的自定义应用程序的外观：

import App from 'next/app'
import multisite from '@utils/multisite';
import MultisiteProvider from '@components/multisite/MultisiteProvider';

function MyApp({
  Component,
  site,
  pageProps
}) {
  // Will add site props to every page
  const props = { ...pageProps, site };
  return (
    // Provider will enable a hook to get site props on any child component
    <MultisiteProvider site={ site } >
      <Component { ...props }/>
    </MultisiteProvider>
  )
}

MyApp.getInitialProps = async(appContext) => {
  // getInitialProps executes on every page access, even on client when using "next/link"

  const appProps = await App.getInitialProps(appContext);
  let host;
  if (appContext.ctx.req) {
    // Get host from request during SSR
    host = appContext.ctx.req.headers.host;
  } else {
    // Get host from window on client
    host = window.location.host;
  }

  return {
    ...appProps,
    site: await multisite.resolveSiteProps(host)
  };
}

export default MyApp;

我希望避免使用getInitialProps，因为它应该在没有静态生成的页面中禁用自动静态优化（这是我的情况）。
每个站点的变量位于根文件夹下的“sites”目录中，如下所示：

/sites
--/siteone.com.us.json
--/siteone.com.br.json
--/sitetwo.com.us.json

并且有一个函数用于根据当前请求域加载正确的文件。

const resolveSiteProps = async(host) => {
  const domain = normalizeDomain(host);
  const site = await
  import (
    /* webpackChunkName: "site-prefs" */
    /* webpackMode: "lazy" */
    `../sites/${domain}`
  );
  return {
    ...site.default,
    domain
  };
}

如果我能在SSR期间解析这些变量一次，并在客户端使用它们，那就太好了。
我在寻找一些有帮助和优雅的想法来解决这个案件。有什么想法吗？