I am adding Rudderstack tracking to a Next.js website that uses client-side routing, meaning that links to other pages don't cause a full page refresh, though the page component would unmount.
On a regular website, when tracking a link click that causes the page to fully reload from the server I would normally place the redirect in the tracking method's callback option, meaning that the page only redirects once the tracking call has completed.
But with client-side routing, when someone clicks a link, the page component is simply unmounted and the new page mounted.
In the client-side routing scenario, should I still use a callback in the tracking function to handle the redirect, or can I safely assume that the tracking call will finish before the page unmounts? An alternative here would be to make the tracking call asynchronous, but I'd like to avoid that if possible since it would slow down the site.
Here's an example of the kind of callback pattern I'm suggesting might be necessary
const linkCallback = function() {
router.push('/test-page')
}
const handleLinkClick = function(e) {
e.preventDefault();
rudderstackTrack('Link Clicked', {}, linkCallback)
}
<a href="/test-page" onClick={handleLinkClick}> Click me </a>
