How do I set the values of constants at build time in Gatsby?

Summary

I want to calculate the values of constants at build time. These values should not be recalculated again in the browser.

Problem description

As an example, I created a minimal Gatsby project. A localized date string and a UUID are calculated and assigned to a constant each.

import * as React from "react"
import {v4 as uuid} from 'uuid';

const IndexPage = () => {
    const siteCreationDate = new Date().toLocaleDateString('de-CH')
    const universallyUniqueIdentifier = uuid()

    return (
        <main>
            <title>Gatsby: Minimal Date Example</title>
            <p>Creation date of the site: {siteCreationDate}</p>
            <p>UUID: {universallyUniqueIdentifier}</p>
        </main>
    )
}
export default IndexPage

If Javascript is disabled in the browser, then the UUID and date are displayed as they were calculated at build time.

However, if Javascript is enabled, these values will be replaced by recalculated values (after some milliseconds). I want to avoid that.

• Slow motion capture of the Gatsby application
• Published Gatsby Application
• Source code of the minimal example

Question

How can I create constants in Gatsby at build time that should not be recalculated and reassigned at runtime in the browser?