Prevent rehydration for certain components or statements in Gatbsy

user_371530 0
Viewed 77

I use Gatsby to create a little website. Now I have a fairly simple question:

How can I prevent certain components or statements from rehydrating? For example, how could I insert a generation date time into the footer, which stays static?

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

Unfortunately the displayed time is always up to date and not the time when the page was generated.

Thank you in advance!

gatsby
1 Answers

I don't know if that's even possible. But Gatsby does provide a convenient way to get your build time, via a graphql query:

// 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
    }
  }
`
user_103409700
Related