#next.js #static-site
#next.js #статический сайт
Вопрос:
Я пытаюсь использовать 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:
В итоге я вообще не использовал getInitialProps
. Вместо этого я использую перехват React. В основном это работает следующим образом:
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 amp;amp; !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
для кода, который вы хотите запустить ровно один раз, на стороне сервера / во время сборки или на стороне клиента. В противном случае используйте другие средства инициализации. Как видно здесь, хуки позволяют это с довольно минимальным шаблоном.