Next.js 13 - 为什么我的根页面不是动态的答案

【问题标题】：Next.js 13 - Why isn't my root page dynamicNext.js 13 - 为什么我的根页面不是动态的
【发布时间】：2022-12-15 18:10:29
【问题描述】：

我正在使用 Next.js 13.0 制作一个网站。当我运行下一个版本时，所有页面都可以工作，但我的根页面除外。当我希望它是动态的时，它被构建为静态的。我什至在我的代码中有 export const dynamic = "force-dynamic"，但它继续构建为静态页面。它与我的动态页面没有什么不同，所以我不明白是什么问题。

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

有任何想法吗？

【问题讨论】：

你怎么知道 <Article/> 元素是静态的？当您查看页面源代码时，它们是否像从 getStaticProps 返回一样存在？
@bknights 当我运行下一个构建并输出 First Load JS 时，它告诉我“/”路由是静态的。
当您运行构建的脚本、添加文章并刷新主页时会发生什么？
@bknights 新文章没有出现。它只显示构建之前的文章，因为它们缓存在服务器上。

标签： typescript next.js

【解决方案1】：

我遇到了同样的问题并找到了解决方案。

如果您将 cookies() 和 headers() 等动态函数添加到服务器端页面，您将强制页面为动态。

例子

import { headers } from 'next/headers';

export default async function page() {
    const headersList = headers();
    
    //...
    
}

我在标题下的 next.js docs 中找到了这个解决方案默认缓存行为

希望这可以帮助

【讨论】：