Question

我正在处理 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，因为它应该在没有静态生成的页面中禁用自动静态优化（这是我的情况）。如docs

所述

每个站点的变量位于根文件夹下的“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 期间解析一次这些变量并在客户端使用它们，那就太好了。

我正在寻找一些有用且优雅的想法来解决这个案例。有什么想法吗？

基于请求域的服务器和客户端上的 Next.js 全局变量

0 个答案: