使用getStaticProps无法更新Firebase实时数据库评论的问题求助

getStaticProps 是Next.js的静态生成机制，生产环境构建时就会把所有页面的数据打包成静态文件，之后用户访问页面时直接返回静态内容，不会再去Firebase拉取最新的评论数据。而getServerSideProps是每次用户请求时都在服务器端重新获取数据，所以能实时展示新增的评论。

根据你的需求，可以选择以下几种方案：

1. 增量静态再生（ISR） #

在getStaticProps中添加revalidate参数，让Next.js定期重新生成页面，同时保留缓存。这样既能享受静态页面的性能优势，又能定期更新评论数据。

修改后的getStaticProps代码：

export async function getStaticProps({ params: { postname } }) {
  const fileName = readFileSync(`posts/${postname}.md`, 'utf-8')
  const { data: frontmatter, content } = matter(fileName)
  const snapshot = await retrieveComments(postname)
  const slug = postname

  return {
    props: {
      frontmatter,
      content,
      snapshot,
      slug
    },
    revalidate: 60 // 每60秒重新生成一次页面，可根据需求调整时间
  }
}

• 优点：无需修改客户端代码，自动平衡性能和更新频率
• 缺点：评论更新有延迟，延迟时间由revalidate值决定

2. 客户端动态获取评论 #

把评论的获取逻辑从服务端移到客户端组件中，在页面加载后主动拉取最新评论，甚至可以监听Firebase实时数据库的变化实现即时更新。

示例代码（客户端组件）：

import { useEffect, useState } from 'react'
import { retrieveComments, listenToComments } from '../utils/firebase'

export default function PostPage({ frontmatter, content, slug, initialSnapshot }) {
  const [comments, setComments] = useState(initialSnapshot)

  useEffect(() => {
    // 页面加载后获取最新评论
    const fetchLatest = async () => {
      const latest = await retrieveComments(slug)
      setComments(latest)
    }
    fetchLatest()

    // 可选：监听Firebase实时变化，评论新增/修改时自动更新UI
    const unsubscribe = listenToComments(slug, (newComments) => {
      setComments(newComments)
    })

    // 组件卸载时取消监听
    return () => unsubscribe()
  }, [slug])

  return (
    <div>
      <h1>{frontmatter.title}</h1>
      {/* 渲染Markdown内容 */}
      <div className="comments-section">
        {/* 渲染comments列表 */}
        {comments.map(comment => (
          <div key={comment.id} className="comment">
            <p>{comment.content}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

• 优点：实时性强，能即时看到评论更新
• 缺点：需要额外编写客户端逻辑，首次加载可依赖初始快照优化体验

3. 切换到getServerSideProps #

如果对实时性要求极高，且页面访问量不大，可以直接使用getServerSideProps替代getStaticProps，每次用户请求都重新获取最新的文章和评论数据。

修改后的代码：

export async function getServerSideProps({ params: { postname } }) {
  const fileName = readFileSync(`posts/${postname}.md`, 'utf-8')
  const { data: frontmatter, content } = matter(fileName)
  const snapshot = await retrieveComments(postname)
  const slug = postname

  return {
    props: {
      frontmatter,
      content,
      snapshot,
      slug
    }
  }
}

• 优点：实时性最高，无需额外处理
• 缺点：每次请求都要服务器处理，性能不如静态生成，服务器负载更高

内容的提问来源于stack exchange，提问作者Kul