Hydrogen apps should render something by default when JS is disabled

[jplhomer]

Today, it's a blank page.

How can we "flush" the app properly so that at least the first Suspense fallback is rendered?

Is it because we're lacing our entry-server with <Suspense fallback={null}> when really we shouldn't?

[jplhomer]

OK weird — it works just fine locally, even on a production build 🤔

Something off about the CF Worker build? https://template-default.hydrogen-devs.workers.dev/

Even with streaming on e.g. Netlify, it's blank https://hydrogen-edge-demo.netlify.app/

[frehner]

It seems the content is actually all there in the response, but all the top-level divs have a hidden attribute on them. If you remove that attribute, the content shows up.

[jplhomer]

Right - for some reason, React adds an extra "template" and uses a script to shove it in there. In development, it doesn't seem to do so?

[colindunn109]

It seems the content is actually all there in the response, but all the top-level divs have a hidden attribute on them. If you remove that attribute, the content shows up.

Chiming in - our SEO consultant said that he fixed up the problem the same way

[jplhomer]

I've isolated this issue to be specific to Cloudflare's ReadableStream implementation, as pages with ?_bot rendered locally, in Node.js, and in Netlify (Deno) work just fine without JavaScript: https://628e837ccc96f12ec6bbb775--hydrogen-template-default.netlify.app/?_bot

Turns out that new streams created with type: 'bytes' in Cloudflare don't match the assumption made here in the React codebase:
facebook/react@75662d6

This means Cloudflare/Oxygen streams don't respect the buffering logic we have in place in Hydrogen to support search engine crawlers and other bots.

I've reported this to Cloudflare, and they're working on a fix. I'll update y'all here when it's shipped! cc @benjaminsehl

[jplhomer]

Update: fix will be shipped in React 18.2 as well. You can get it early by using react@experimental react-dom@experimental

[juanpprieto]

@jplhomer was playing around on the demo-store/neue branch and noticed that on dev to get SSR I had to append ?_bot to the url. This worked on both 18.1.0 and experimental. I didn't manage to get it to work on experimental without the ?_bot.

[jaredkc]

I still see this problem running Hydrogen on Oxygen, React 18.2.0.

[apalumbo]

@jplhomer the issue is still there also on react 18.2.0

[jplhomer]

@jaredkc @apalumbo what do your App.server components look like? If you're fetching data in your top-level component but not providing any Suspense fallbacks, the app will not be able to render anything when JS is disabled because additional content is streamed in via template tags and injected with script.

We probably need to tidy up the demo store template with some Suspense boundaries, but it ultimately comes down to how you have structured your app.

[jaredkc]

@jplhomer I went through the process of adding the Hydrogen Channel to Shopify with the demo store. The site displays a blank page when JavaScript is disabled out of the box with no code changes. The HTML is in place. However, many hidden attributes prevent everything from displaying.

I just looked at the latest App.server. Some changes are not included in the version I started with. I'll get the updates in place to see if it helps address my issue.

[apalumbo]

@jplhomer I just forked the hydrogen demo store