Инициализация времени запуска в статическом / экспортированном сайте Next.js - PullRequest
Новая
       57

Инициализация времени запуска в статическом / экспортированном сайте Next.js

0 голосов
/ 26 марта 2019

Я пытаюсь использовать Next для включения приложения Electron. Electron-Next использует статический режим сайта Next для своей производственной сборки, который вызывает getInitialProps во время сборки, а не во время запуска.

start.js (изначально отображаемая страница) 

import Link from 'next/link'

export default function Start({date}) {
  return (
    <div>
      <div>Date is {date}</div> {/* <- will always be the build time */}
      <Link href="/about">
        <a>Take me to the About page</a>
      </Link>
    </div>
  )
}

Start.getInitialProps = () => {
  return {
    date: "" + new Date()
  }
}

Интересно, что использование Link для навигации в другом месте фактически приводит к динамическому вызову getInitialProps.

about.js 

import Link from 'next/link'

export default function About({date}) {
  return (
    <div>
      <div>Date is {date}</div> {/* <- will be the time the link was clicked */}
      <div>Important info about this app</div>
    </div>
  )
}

About.getInitialProps = () => {
  return {
    date: "" + new Date()
  }
}

Есть ли нехакерский способ получить динамическое поведение для начального маршрута?Я полагаю, что и в статических сайтах будет много вариантов использования.

1 Ответ

0 голосов
/ 04 апреля 2019

Я вообще не использовал getInitialProps. Вместо этого я использую React Hook. Это работает в основном так: 

async function useModel() {
  const modelRef = useRef(null)


  // This hook will render at build-time by Next.js's static site, in which
  // case the conditional loading of the model will never happen.
  //
  // At startup-time, it will be re-renderered on the Electron renderer thread,
  // at which time, we'll actually want to load data.
  if (process.browser && !modelRef.current) {
    const m = new Model()
    await m.init() // <- Assumed to have some async fetching logic
    modelRef.current = m
  }

  return modelRef.current
}

Затем компонент верхнего уровня может легко использовать наличие модели, чтобы определить, что делать дальше: 

function Start() {
  const model = useModel()

  if (!model) {
    return <div>Loading...</div>
  } else {
    return <MyProperUI model={model} />
  }
}

Или вы можете легко настроить его так, чтобы отображался незаселенный пользовательский интерфейс по умолчанию или что-то еще.

Таким образом, в основном используйте getInitialProps для кода, который вы хотите запустить ровно один раз , на стороне сервера / во время сборки или на стороне клиента. В противном случае используйте другие средства инициализации. Как видно здесь, крюки позволяют это с довольно минимальным шаблоном.

...