how do i dynamically render my page nextjs page

my page needs to be dynamically rendered to not get an error for requiring router data during production in vercel

I tried using this

export const getServerSideProps: GetServerSideProps<ResultsPageProps, ParsedUrlQuery> = async (context) => {
  // Fetch and process productData here based on the query or any other dynamic data source.
  const router  = useRouter();
  const { user } = useUser();

  //const productData: ResultsProduct[] = []; // Fetch and process your data here based on the query.
  const productData = router.query.productData
  ? JSON.parse(router.query.productData as string)
  : [];
  console.log("USER: - > ", user)
  console.log("PRODUCT DATA - > ", productData)

  return {
    props: {
      productData,
      user,
      router,
    },
  };
};

and passed it to my page export:

const ResultsPage: NextPage<ResultsPageProps> = ({productData, router, user }) => {...

but this causes nothing to be rendered and an error page when the page is redirected to
how can I dynamically render the page or at least indicate it as such and make sure that any and all data is received and sent to the page component