我正在创建一个**组件（编辑器），它需要总是延迟加载。但是它需要在任何React应用程序中工作。
React.lazy可与CRA配合使用，但不能与NextJS和Gatsby以及其他SSG/SSR解决方案配合使用。
我不能使用next/dynamic，因为这样我的组件会绑定到NextJS。我试图避免使用react-loadable，以便在不需要组件时为用户保持较小的捆绑包大小。
我尝试过以下几种延迟加载方式-

const Title = () => <h1>title</h1>; // test component to lazy load

const Title = React.lazy(() => import("./Title"));
const Method1 = () => <Title />;

const Method2 = () => {
  const [Title, setTitle] = React.useState(React.Fragment);
  React.useEffect(() => {
    import("./Title").then((module) => setTitle(module.default));
  }, []);
  return <Title />;
};

const Method3 = () => {
  const [Title, setTitle] = React.useState(React.Fragment);
  React.useEffect(() => {
    setTitle(require("./Title"));
  }, []);

  return <Title />;
};

const Method4 = () => {
  const Title = React.createRef(React.Fragment);
  const [isClient, setIsClient] = React.useState(false);
  React.useEffect(() => {
    Title.current = require("./Title");
    setIsClient(true);
  }, [Title]);

  const Component = Title.current;
  return isClient ? <Component /> : null;
};

// Next JS `page/index.js`
export default function IndexPage() {
  return <Method4 />; //<Method1 />, <Method2 />, <Method3 /> doesn't work either.
}

的一个或多个字符
代码为-https://codesandbox.io/s/flamboyant-benz-emw2l?file=/pages/index.js:31-278的代码沙箱