How to fetch dynamic data on pre-rendered routes?

[visakadivines]

Right now I'm rendering a product page (/pages/product) via getStaticProps which contains links (dynamic routes) to product detail pages (/pages/product/[name]) for each respective product that I'm pre-rendering using getStaticPaths. As you can imagine a lot of product information (image, name, price, etc.) are static, however, things like stock or status (available, out-of-stock, etc.) are dynamic. What I'm trying to do is fetch this dynamic data via SWR on the pre-rendered route (product detail page), but am encountering the following error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

In /pages/product/[name]:

const ProductPage = ( { product } ) => {
     const { data } = useSWR('/api/status?_id=' + product._id, fetcher);
     
     return (
          ...
     )
}

export async function getStaticPaths() {
     # connect to db
     # fetch all products
     const paths = products.map(product => ({
          params: { name: product.name }
      }));
     
     return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
     # connect to db
     # fetch singular product based on name
     return {
          props: { product }
       };
}

export default ProductPage;

I'm a bit unclear as to what this error means and if there exists a way to fetch this dynamic data via SWR. I believe the Incremental Static Generation RFC could solve my problems as I can fetch stock and status at build time and revalidate every couple of minutes. However, I was wondering if there was a way to fetch this information in the meantime. Thank you.