How to really have a static page without hydration? #29352

ZelphirKaltstahl · 2021-02-05T15:32:39Z

ZelphirKaltstahl
Feb 5, 2021

I have started with the tutorial at https://www.gatsbyjs.com/docs/tutorial/part-one/.

When I check the source code of the page in the browser, to see what I got from the server, I see the following:

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="note" content="environment=development"/><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script src="/polyfill.js" nomodule=""></script><script src="/commons.js"></script></body></html>

I can see, that there is no "Hello world!" in there. It is only inserted via hydration, although it is purely static data. This should be statically rendered, not inserted via hydration. So I looked around and found https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#replaceHydrateFunction. However, putting

const ReactDOM = require('react-dom')

export function replaceHydrateFunction() {
    return (element, container, callback) => {
        ReactDOM.render(element, container, callback)
    }
}

into a gatsby-browser.js in the root directory of my project did nothing.

If a user visits my page without JS activated, they will only see a white space, although all I have to show is static content.

How can I render an entirely static page in one go, without any unnecessary hydration?

vladar · 2021-02-12T12:29:28Z

vladar
Feb 12, 2021

What you are seeing is expected because it is the result of gatsby develop:

<meta name="note" content="environment=development"/>

Gatsby doesn't run SSR in develop by default - only in build. So try running gatsby build and see the actual result you will get after the build.

We also have an experimental DEV_SSR flag that will emit actual HTML in develop, see the umbrella issue on how to enable it.

1 reply

ZelphirKaltstahl Feb 15, 2021
Author

Thank you for your response! I'll take a look : )

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to really have a static page without hydration? #29352

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to really have a static page without hydration? #29352

Uh oh!

Uh oh!

ZelphirKaltstahl Feb 5, 2021

Replies: 1 comment · 1 reply

Uh oh!

vladar Feb 12, 2021

Uh oh!

ZelphirKaltstahl Feb 15, 2021 Author

ZelphirKaltstahl
Feb 5, 2021

Replies: 1 comment 1 reply

vladar
Feb 12, 2021

ZelphirKaltstahl Feb 15, 2021
Author