[React Router V7] Server timeout after 5 seconds

[laimonassutkus]

I'm using React Router as a...

framework

Reproduction

Created a freshly new repository. Created minimal example:
https://github.com/laimonassutkus/ReactRouterV7-HttpStreaming

Just run "npm run dev", open the browser and timeout later happens.

How do I increase the timeout beyond 5 seconds ?

Code at a glance

Loader:

export async function loader({}: Route.LoaderArgs) {
    const msgPromise = new Promise((res) =>
        setTimeout(() => res("Hello World!"), 6_000)
    );

    return {msg: msgPromise};
}

Page:

export default function MyComponent({loaderData}: Route.ComponentProps) {
    let {msg} = loaderData;

    return (
        <div>
            <React.Suspense fallback={<div>Loading...</div>}>
                <Await resolve={msg}>
                    {(value) => <h3>{value}</h3>}
                </Await>
            </React.Suspense>
        </div>
    );
}

System Info

Chrome, Mac, dependencies:

    "@react-router/node": "^7.0.2",
    "@react-router/serve": "^7.0.2",
    "isbot": "^5.1.17",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router": "^7.0.2"

Used Package Manager

npm

Expected Behavior

No timeout happens or at least there is a way to increase it.

Actual Behavior

Always timeout if promise resolves in more that 5 seconds.

[laimonassutkus]

• By the way, revealing server file with "npx react-router reveal entry.server" and setting "ABORT_DELAY" to, example, 60 seconds did not help either.
• Building production version did not help also.
• One thing to note, the response flashes for a brief second before showing server timeout error.
• Switching to client-side loading (i.e. clientLoader instead of loader) works. But that is not a solution. Server-side loader should not timeout after 5 seconds.

[timdorr]

You should export const streamTimeout from your entry.server.tsx file. While not in the main docs, it is in the API reference: https://api.reactrouter.com/v7/interfaces/react_router.ServerEntryModule.html#streamTimeout

Here's the CHANGELOG entry:

react-router/packages/react-router-dev/CHANGELOG.md

Line 178 in c19a6c5

- `<RemixServer abortDelay>` is no longer used. Instead, you should `export const streamTimeout` from `entry.server.tsx` and the remix server runtime will use that as the delay to abort the streamed response

[laimonassutkus]

@timdorr can confirm that it worked. This variable should be part of official documentation because it is very likely for any streamed response to take more than 5 seconds.

[brophdawg11]

FWIW this was in the Single Fetch docs in Remix (https://remix.run/docs/en/main/guides/single-fetch#streaming-timeout) and referenced in the original issue this stemmed from (remix-run/remix#7991 (comment)). I think we need to get some of those long form docs moved over to RR still though so we can use this issue as the docs enhancement 👍

[laimonassutkus]

@brophdawg11 thank you for the refs! Helpful.

[qinsong77]

But what if I don't reveal the default entry server file, how can I solve it?

[github-actions]

🤖 Hello there,

We just published version 7.1.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[brophdawg11]

@qinsong77 #12478 updates the default version of that file to use streamTimeout so that should be resolved for you with the next release.