防止 Gatsby 中的某些组件或语句脱水

Question

我使用 Gatsby 创建了一个小网站。现在我有一个相当简单的问题：

如何防止某些组件或语句重新水化？例如，我怎样才能将生成日期时间插入到保持静态的页脚中？

import * as React from 'react'

interface FooterProps {
  className?: string
}

const Footer: React.FC<FooterProps> = ({ className }) => <footer className={className}>{new Date().toISOString()}</footer>

export default Footer

很遗憾，显示的时间始终是最新的，而不是页面生成的时间。

提前致谢！

Answer 1

我不知道这是否可能。但是 Gatsby 确实提供了一种通过 graphql 查询获取构建时间的便捷方法：

// index.js
import React from "react"
import { graphql } from "gatsby"

export default ({ data }) => (
  <h1>{`I'm built at ${data.site.buildTime}`}</h1>
)

export const query = graphql`
  {
    site {
      buildTime
    }
  }
`

防止 Gatsby 中的某些组件或语句脱水

Prevent rehydration for certain components or statements in Gatbsy

gatsby