Блог

Главная - Вопросы по программированию - Сокращает ли условный рендеринг компонентов Время сборки в Next.JS?

Сокращает ли условный рендеринг компонентов Время сборки в Next.JS?

#reactjs #next.js

Вопрос:

Я создаю шаблон в Next.Js это имеет множество возможных конфигураций для компонентов стиля, и у меня есть некоторые компоненты, которые могут быть отрисованы или нет(их можно настроить на странице администратора). Простым примером может быть:

 export default function Example(props: React.PropsWithChildren) {
  //...
  return (
    {/* */}
    {isEnabled amp;amp; <Component />}
    {/* */}
  )
}

Где isEnabled значение считывается во getStaticProps время сборки. Если isEnabled установлено значение false в одном или нескольких компонентах, сократит ли это время сборки?

Заранее спасибо.

Комментарии:

1. Итак, является ли идея, которую вы хотите isEnabled установить false во время сборки — чтобы сократить время, необходимое для сборки, — но изменить ее значение на true во время выполнения?

2. @juliomalves нет. Думайте об этом как о шаблоне, в котором клиент может настроить внешний вид приложения, например, с помощью страницы настроек. Если он отключит некоторые компоненты, уменьшится ли время сборки? Вот в чем вопрос.

3. Правильно, понял. Я не уверен, что это сильно повлияет на сокращение времени сборки.

Ответ №1:

Я не думаю, что он будет работать так, как вы хотите, так как он все еще должен быть там во время чтения, чтобы работать. К счастью, next.js поддерживает динамический импорт, который может быть запрошен во время использования. В основном это выглядит так:

 import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

Здесь важно то, что import оператор находится внутри dynamic вызова функции, и при импорте не разрешается использовать какие-либо строки шаблона.

Метки: