Блог

У меня есть компонент, который я динамически импортирую с помощью dynamic nextjs. И это тоже, я хочу загрузить пакет на основе флага, который я устанавливаю в своем коде (флаг loadWirelessBundle в блоке кода ниже). Таким образом, он отлично работает с точки зрения загрузки пакета, но и рендеринга компонента, НО он не выполняет рендеринг компонента на стороне сервера (когда значение loadWirelessBundle равно true), даже если я передаю ssr = true. Кто-нибудь знает, почему он не выполняет рендеринг на стороне сервера?

 const WirelessPrepaid = loadWirelessBundle ? dynamic(() => import("../wireless-prepaid"), { ssr: true }) : () => null;
 

Есть ли что-то, чего мне не хватает с точки зрения понимания динамического импорта с помощью nextjs? Не мог бы кто-нибудь, пожалуйста, помочь? Спасибо!

Вам нужно выполнить импорт на верхнем уровне

 // this goes at the top level of the module
const WirelessPrepaidDynamicComponent = dynamic(() => import("../wireless-prepaid"));

// this can be placed wherever you need it

const WirelessPrepaid = loadWirelessBundle ? WirelessPrepaidDynamicComponent  : () => null;


 

Во-первых, он не обязательно должен передаваться ssr как true явный, по умолчанию он включен только.

Во-вторых, может быть так, что значение loadWirelessBundle задано на стороне клиента, а не на стороне сервера, поэтому компонент импортируется на стороне клиента. Поэтому нам, возможно, придется установить его значение на стороне сервера и посмотреть, работает ли оно.