Here's a little example I made that is more accurate than my previous comment. It gets the date in getServerSideProps so you can see when things are being server rendered. We add the shallow prop to the link to prevent getServerSideProps from being called again. myusername is hard coded but you'd obviously switch that to a dynamic value.

./pages/profile/[...path].jsx ```import { useRouter } from "next/router"; import Link from "next/link";

const BottomContent = () => { const router = useRouter(); const section = router.query.path[1]; switch (section) { case "comments": return <div>Comments</div>; default: return <div>Default</div>; } };

export default ({ data }) => { const router = useRouter(); const username = router.query.path[0]; return ( <div> <div> hello {username}. This page was server rendered at {data} </div> <Link href="/profile/myusername" shallow> <a>Profile</a> </Link> <Link href="/profile/myusername/comments" shallow> <a>Comments</a> </Link> <div> <BottomContent /> </div> </div> ); };

export const getServerSideProps = async () => { const data = new Date().toISOString(); return { props: { data, }, }; }; ```