NextJS SSR with context on refresh

Question

I am trying to create a page with that goes like this - Each node can have X number of pods and when the user clicks on a particular node, he will be navigated to a page displaying all the pods belonging to this node.

I have managed to do so using dynamic routing from NextJS.

<Link
  href={{
    pathname: "/pods/[id]",
    query: { nodeID: row.ID },
  }}
  as={`/pods/${row.ID}`}
>
  <StyledButton>View Pods</StyledButton>
</Link>

const Pods = ({ pods }) => {
  return (
    <>
      <PodTable pods={pods}></PodTable>;
    </>
  );
};

export async function getServerSideProps(context) {
  const nodeID = context.query.nodeID;

  // Fetch data from external API
  const podRes = await fetch(`http://localhost:5000/v1/pods/filter/${nodeID}`);
  const pods = await podRes.json();
  console.log(`Pods Res: ${podRes}`);

  // Pass data to the page via props
  return { props: { pods } };
}

export default Pods;

While this generally works, the issue arise when the user navigates directly to the /pod/[id] page or refreshes the page without clicking the link button.

How should I fix my code to address this?