Sup yall, had a quick question.
This is my homepage

export const dynamic = "force-dynamic";
import WidthWrapper from "@/components/wrappers/widthWrapper";
import { Loader2 } from "lucide-react";
import { Suspense } from "react";
import Blogs from "./blogs/main";
import Post from "./blogs/post";

export default function Home() {
  return (
    <main className="w-full h-full flex flex-col items-center justify-start bg-background-primary">

      <WidthWrapper color="#11141B">
        <div className="w-[95%] xl:w-full gap-8 md:gap-0 py-16 h-fit flex px-2 md:px-0  flex-col md:flex-row items-center justify-start">
          <Blogs />
          <div className="md:w-[45%] md:h-[600px] w-full h-[410px] flex flex-col items-center justify-center">
            <Suspense
              fallback={
                <Loader2 className="md:size-20 size-16 text-shades-cyan animate-spin " />
              }
            >
              <Post />
            </Suspense>
          </div>
        </div>
      </WidthWrapper>
    </main>
  );
}

Now here the only place which is dynamic is the Post component which i have wrapped with Suspense, it has a fetch in it, with a tag so i can revalidate it as needed.

Now if i dont add the export const dyanmic = force-dynamic.. the page becomes static completely.. but with the export, it becomes completely dynamic.. how do i make it ssg?

So it will generate once on build, and only get the new data for Post if i invalidate the cache

Ping me if anyone responds