diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx index b03defdc43607..42a014e2b48ff 100644 --- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx @@ -143,9 +143,15 @@ export const GatsbyImageHydrator: FunctionComponent = function const hasSSRHtml = root.current.querySelector(`[data-gatsby-image-ssr]`) // On first server hydration do nothing if (hasNativeLazyLoadSupport() && hasSSRHtml && !hydrated.current) { + hydrated.current = true return } + // When no ssrHtml is found (develop) we should force render instead of hydrate + if (!hasSSRHtml) { + hydrated.current = true + } + import(`./lazy-hydrate`).then(({ lazyHydrate }) => { lazyHydrator.current = lazyHydrate( {