How can I make an action take effect on page-load for the app router equivalent of statically generated pages from static paths in NextJS?
Everything is working fine with my page generation:
// app/layout.js
import Providers from '@/app/Providers';
export default function RootLayout({ children }) {
return (
<html lang='en'>
<body>
<Providers>
{children}
</Providers>
</body>
</html>
)
}
// app/Providers.js
'use client';
import TrackProvider from '@/utils/trackProvider';
function Providers({children}) {
return (
<TrackProvider>
{children}
</TrackProvider>
)
}
export default Providers;
// app/sample/page.js
import { getLayoutData } from '@/utils/getLayoutData';
async function getPage() {
const allData = await getLayoutData();
const { page } = allData;
return { page };
}
export default async function Page() {
const { page } = await getPage();
return <div>{page}</div>
}
The issue lies with the TrackProvider that provides context for React Tracking. In the old pages router, I would register a page view using a custom hook:
// pages/[slug].js
const Page = (props) => {
usePageTracking(props.page.slug);
return props.actionPage ? <ActionLayout {...props} /> : <Layout {...props} />;
}
where usePageTracking wraps around useEffect and useTracking from React Tracking:
// utils/trackPage.js
'use client';
import { useTracking } from 'react-tracking';
import { useEffect } from 'react';
export function usePageTracking(pageSlug) {
const { trackEvent } = useTracking();
useEffect(() => {
trackEvent({
eventType: 'pageView',
page: pageSlug
});
}, [pageSlug]);
}
However, this methodology cannot be used in the new app router due to the async nature of page generation:
export default async function Page() {
const { page } = await getPage();
usePageTracking(page.slug); // <-- this won't work :(
return <div>{page}</div>
}
What is the correct approach to handle this migration?