Блог

Я создаю компонент (редактор), который всегда должен быть загружен лениво. Но это должно работать в любом приложении 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.
}
 

Codesandbox с кодом — https://codesandbox.io/s/flamboyant-benz-emw2l?file=/pages/index.js:31-278