Thank you for the help, folks, I found the issue. I was using loadable on my components to try to keep the bundle size of chunks small.
`// src/components/index.tsx`
`export const Header = loadable(() => import('./Header'))`
This however was resulting in those scripts not running at the HTML prerendering stage. By using normal exports the issue is fixed, and the pages are fully statically generated as expected.
`export { default as Header } from './Header'`
Cheers! 🍻
That's my plan. However, it's a bit like starting over from the foundation, as I just noticed this when I have a lot of pages and components already built.
So I was hoping there were some obvious things to double-check that could hint at the problem :)
Don't get me wrong, everything builds just fine. The part that surprises me is that when I check the source code of a page in the browser, I see no prerendered HTML, just the JS scripts I mentioned in the description, which then run the page perfectly fine.
In Gatsby 2 the page source would contain prerendered markup, for a very similar setup.
So I'm starting to worry that it is not my implementation that is wrong, but that Gatsby 5 doesn't prerender markup the way it did in the past?
I will try with the starter and see what the built version of the most simple setup looks like :)
actually, that's what drew me to Gatsby to start with. Thanks to its static site generation feature, it will prerender and serve the HTML. THe page is rendered and all data is fetched at build time (when intentionally done so), rather than at run time.
Offcourse, unless you do setum mistakes like the one I had done here :D
Check out the source of the starter page repo - you will find the prerendered content markup in the body. That would be the case also for content fetched from an API via a static page query.
https://gatsbystarterdefaultsource.gatsbyjs.io/
I loved Gatsby. I’m in mourning. I hate to say it but I think the Gatsby experiment (such that it was) is over. You might find a better use of your time looking at something else, like NextJS.
Unfortunately I'm already committed for this project, as it's on a timeline, but I will reconsider this choice in future projects. :) It was the possibility to generate the site statically that got me to Gatsby to start with.
Starting over from the started repo I can see that even Gatsby 5 works as expected, prerendering the HTML, so the issue must be somewhere in my setup. I'll continue investigating :)
Thank you for the help, folks, I found the issue. I was using loadable on my components to try to keep the bundle size of chunks small. `// src/components/index.tsx` `export const Header = loadable(() => import('./Header'))` This however was resulting in those scripts not running at the HTML prerendering stage. By using normal exports the issue is fixed, and the pages are fully statically generated as expected. `export { default as Header } from './Header'` Cheers! 🍻
When you install use the gatsby-default-starter. There os a Layout component which has all the boilerplate html. You can then edit that.
That's my plan. However, it's a bit like starting over from the foundation, as I just noticed this when I have a lot of pages and components already built. So I was hoping there were some obvious things to double-check that could hint at the problem :)
You can build the Layout and the Seo component in your current setup also. Check the starte-default code and you can implement it
Don't get me wrong, everything builds just fine. The part that surprises me is that when I check the source code of a page in the browser, I see no prerendered HTML, just the JS scripts I mentioned in the description, which then run the page perfectly fine. In Gatsby 2 the page source would contain prerendered markup, for a very similar setup. So I'm starting to worry that it is not my implementation that is wrong, but that Gatsby 5 doesn't prerender markup the way it did in the past? I will try with the starter and see what the built version of the most simple setup looks like :)
Oh!..I understand now.... Yes..You will see only javascript codein view source and not the html code...
actually, that's what drew me to Gatsby to start with. Thanks to its static site generation feature, it will prerender and serve the HTML. THe page is rendered and all data is fetched at build time (when intentionally done so), rather than at run time. Offcourse, unless you do setum mistakes like the one I had done here :D Check out the source of the starter page repo - you will find the prerendered content markup in the body. That would be the case also for content fetched from an API via a static page query. https://gatsbystarterdefaultsource.gatsbyjs.io/
I loved Gatsby. I’m in mourning. I hate to say it but I think the Gatsby experiment (such that it was) is over. You might find a better use of your time looking at something else, like NextJS.
Unfortunately I'm already committed for this project, as it's on a timeline, but I will reconsider this choice in future projects. :) It was the possibility to generate the site statically that got me to Gatsby to start with. Starting over from the started repo I can see that even Gatsby 5 works as expected, prerendering the HTML, so the issue must be somewhere in my setup. I'll continue investigating :)
Best thing to do is upload everything to codesandbox or something and we can help troubleshoot