reactjs - 如何避免 Next.js 中的页面闪烁？（静态页面显示在决定渲染内容的脚本执行之前）

Question

我有一个 Next.js 应用程序，该应用程序具有使用 SSG（静态页面生成）的索引页面和在 url 中包含子域的页面。

预期的行为 - 当 url 是hostname.com我想呈现主静态页面，但是当 url 是company1.hostname.com我想用 company1 数据呈现内容。

问题 - 当我首先访问company1.hostname.com时，我得到主要的静态页面，然后决定渲染什么的脚本取决于子域的执行，如果我们有一个子域 - 我们会显示包含子域数据的页面。它导致内容闪烁（首先显示主页然后立即显示子域页面）。

我的主页代码：

const HomePage: NextPage<Props> = ({ content }) => {
  const { attributes } = content;
  const subdomain = getSubdomain();
  return (
    <>
      <SEO />
      <div className="m-auto max-w-7xl">
        {subdomain ? (
          <SubdomainDataComponent subdomain={subdomain} />
        ) : (
          <>
            <MainPage />
          </>
        )}
      </div>
    </>
  );
};

 export const getStaticProps: GetStaticProps = async () => {
   const content = await import(`../content/pages/${'home'}.md`);

   return { props: { content: content.default } };
 };


export default HomePage;  

如何避免页面闪烁？是否可以在 getStaticProps 函数中检索 url 数据（子域、主机名等）？