Components are not initialized in NextJs, if they are rendered after the initial app load.
Background:
Using Metronic 9 Tailwind in NextJs with GlobalInit.tsx ( KTComponent.init() ) based component initialization in the _app.tsx.
Problem:
Components which are rendered after the initial app load are not initialized, so resultantly not working. For example, fetching some data from an API and rendering any component like Accordion or DataTable afterwards will not work.
As GlobalInit.tsx has been already executed on app load, at that point the component was not rendered, as its rendered after fetching some remote data.
Bad Workaround:
You have to initialized Metronic components in useEffect hook of each application component, instead of the suggested GlobalInit based initialization in the _app.tsx globally.
Replies (1)
Hi,
Thank you for reaching out to us.
The initialization in GlobalInit.tsx will initialize all components rendered synchronously. For asynchronous content rendering, you should reinitialize certain components separately.
fetch(...).then(() => {
KTComponent.init()
})Regards,
Lauris Stepanovs,
Keenthemes Support Team
