Thanks for the reponse, so then I would need to have the ID in the URL or fetch all posts again in the actual page component?

all slugs must be unique right, then just add an index on the slug in the database and query by slug directly

but yes, you need to fetch the post content in the page component

though technically you can use unstable_cache to rerun the same query

import { unstable_cache as cache } from "next/cache";

async function getData() {
  console.log("This is run");
  return [
    { slug: "foo", data: "foo" },
    { slug: "bar", data: "bar" },
  ];
}

const cachedGetData = cache(getData);

export default async function Page(props: { params: Promise<{ slug: string }>}) {
  const params = await props.params;
  const data = await cachedGetData();
  return <div>{data.find(value => value.slug === params.slug)?.data ?? "unknown"}</div>;
}

export async function generateStaticParams() {
  const data = await cachedGetData();
  return data.map(value => ({ slug: value.slug }));
}

but with this, implementing time-based revalidation and ISR might not be so straightforward anymore

Okay I see. The problem is I am fetching stuff from blogger api and as far as I know I am only able to fetch posts by id. And even if there was another way, I am extracting the slug from the URL in a custom way.. but yes, they're all unique for the posts.

I kind of need time-based revalidation and ISR so I am not willing to sacrifce or further complicate that..

I guess it will be fine if I do additional query for the posts but since it is in the Page itself, I am not sure whether it will be executed only during the build / regeneration or on every request?

only during the build/regeneration