Streaming with remix does not work inside iframe

[silintzir]

Issue summary

Before opening this issue, I have:

• Upgraded to the latest version of the @shopify packages
  • Affected package and version:

{
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.2",
    "express": "^4.21.1",
    "@shopify/admin-api-client": "^1.0.4",
    "@shopify/app-bridge-react": "^4.1.5",
    "@shopify/polaris": "^13.9.1",
    "@shopify/polaris-icons": "^9.3.0",
    "@shopify/shopify-api": "^11.6.0",
    "@shopify/shopify-app-remix": "^3.4.0",
    "@remix-run/dev": "^2.15.0",
    "@remix-run/express": "^2.15.0",
    "@remix-run/node": "^2.15.0",
    "@remix-run/react": "^2.15.0",
    "vite": "^5.4.11"
}

• Node version: 22.11.0
• Package manager: pnpm@9.14.2
• Operating system: Linux Ubuntu
• Browsers tested: Chrome,Firefox
• Tested both with no tunnel used for development but express server running in as https on port 443 and with ngrok that is not know to have any issues with streaming
• No future flags have been enabled for remix
• Set { logger: { level: LogSeverity.Debug } } in my configuration
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository
• Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

Streaming (defer with Suspense/Await) as described in Remix dev docs is not working on initial page load inside the iframe, while working outside the iframe and on consecutive navigation between pages.

Expected behavior

Page should load with initial page date from loader during the SSR phase, with suspense displaying the fallback message until the promise resolves and streamed data appear on the page as well.

Actual behavior

Page remains blank during initial load waiting for the promise to resolve. Once the promise resolves both ssr and stream data display.

Steps to reproduce the problem

import { defer } from '@remix-run/node';
import { Await, useLoaderData } from '@remix-run/react';
import { Suspense } from 'react';

export const loader = async () => {
  return defer({
    ssr: 'I should display on initial SSR',
    stream: new Promise((res) =>
      setTimeout(() => res('I should be displayed only after promise resolves'), 3000),
    ) as Promise<string>,
  });
};

export default function Tutorial() {
  const { ssr, stream } = useLoaderData<typeof loader>();

  return (
    <div>
      <p>SSR Data: {ssr}</p>
      <Suspense fallback="Loading stream data...">
        <Await resolve={stream} errorElement={<p>Failed to load stream data</p>}>
          {(data) => <p>Stream Data: {data}</p>}
        </Await>
      </Suspense>
    </div>
  );
}

[lizkenyon]

Hi there 👋

I wasn't able to reproduce this by copying your sample code into the Shopify Remix template.
Here were the steps I used.

Created a new app with the Shopify Remix template

shopify app init
// typescript

Add provided code to the app.additional route in the template

shopify app dev --tunnel-url="my-ngrok-tunnel"

screencast.2024-12-06.16-23-29.mp4

Is there any more information you could provide, or a a clone-able repo I could use to reproduce the issue?

[minhduc17801]

@lizkenyon it work on navigate, dont work on first load, try refresh

[lizkenyon]

Sorry I missed that I can reproduce!

[silintzir]

Is there any update on this?

[lizkenyon]

@silintzir

I have dug into this a bit and it is an interesting one.

I can reproduce this error using the default Remix template (i.e. npx create-remix@latest, not using the Shopify template) when I load that app in the Shopify Admin. I tried loading the same Remix app in an iframe not within the Shopify Admin and that did work as expected.

I am going to chat with some more folks internally on this to nail down exactly what is going wrong.

[pandectesio]

@lizkenyon did anyone from the internal team figure out a solution or what is the cause of the issue?

[marco-visualsquares]

Our team is also experiencing similar situation with defer/await approach for slow calls. It is currently impacting the LCP of the app (which it's hard requirement for BFS). @lizkenyon is there any workaround or alternatives here?

[alesiooooooo]

The same problem on page refresh. It makes bad user experience and no point of streaming option. First screen loading is more important then inner pages navigation(only such way deferred sections work and I can see suspense/await skeletons)

[kiraKLK]

Is there any update on this?

[br34th3r]

We're getting this issue as well. We're seeing the defer / Suspense / Await streaming setup working on page navigations inside the app, but the initial page load isn't deferring data. It's impacting our LCP and stopping us from applying for Built for Shopify. @lizkenyon any news on this issue internally yet?

[AlexHooperDev]

+1, also seeing this issue

[lizkenyon]

Hi folks

Thank you for your patience, I have flagged this with the team that I believe should be able to resolve this.

I will provide an update, as soon as I hear something.