Next.js 13 - Why isn't my root page dynamic

Question

I am making a website with Next.js 13.0. When I run next build, all the pages work except my root page. It's being built as static when I want it to be dynamic. I even have export const dynamic = "force-dynamic" in my code yet it continues to build as a static page. It's no different from my dynamic pages so I don't get what's the problem.

The code for src/app/page.tsx:

import { collection, getDocs, limit, orderBy, query } from "firebase/firestore"
import Article from "@components/Article"
import { ArticleData } from "@types"
import { db } from "@firebase"

export const dynamic = "force-dynamic"

const getArticles = async () => {
  const articles: ArticleData[] = []

  const snapshot = await getDocs(
    query(collection(db, "articles"), orderBy("created", "desc"), limit(5))
  )

  snapshot.forEach((doc) => {
    articles.push({
      ...doc.data(),
      id: doc.id,
    } as ArticleData)
  })

  return articles
}

const Home = async () => {
  const articles = await getArticles()

  return (
    <>
      {articles.map((data, i) => (
        <Article key={i} data={data} />
      ))}
    </>
  )
}

export default Home

Any ideas?

Answer 1

Replace this export const dynamic = "force-dynamic" by this code export const revalidate = 0

My source https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components