Nuxt useFetch and Server‑Side Rendering: Interaction of Automatic Abort Signals and Timeout Handling

Answer

Yes – a thin wrapper composable (e.g., useFetchWithTimeout) that automatically forwards the router‑provided AbortSignal when it exists and applies a configurable default timeout would give developers a single, uniform way to handle both navigation‑initiated cancellation and request timeouts, including during SSR where no client‑side AbortSignal is present.

Confirmed facts

• Nuxt 3’s useFetch forwards an AbortSignal from the router when the navigating component is destroyed, but it does not set a default request timeout.
• During server‑side rendering no client‑side AbortSignal exists, so the abort‑signal step is a no‑op and timeout handling relies solely on the $fetch or ofetch timeout option.

Likely explanation

The split between automatic abort‑signal forwarding and manual timeout configuration forces developers to create their own wrapper or rely on third‑party plugins to combine the two concerns. A composable that merges them would eliminate that duplication.

Steps to implement the composable (minimal, case‑specific)

1. Create a composable that accepts the same arguments as useFetch plus an optional timeout (in milliseconds).
2. Inside the composable, read the router’s AbortSignal via useRouter() (or useRoute()) and forward it to useFetch when it exists.
3. Merge the supplied timeout (or a project‑wide default) into the $fetch options before calling useFetch.
4. Return the same result object (data, pending, error, refresh) so callers experience no API change.

Default timeout recommendation

A default of 5 seconds (5000 ms) balances responsiveness with typical upstream latency while avoiding premature aborts on slower networks or during lengthy SSR renders. This value can be overridden globally via $fetch.defaults.timeout = 5000 or per request by passing { timeout: 3000 } in the options argument.

Behaviour on the server (SSR)

When useFetchWithTimeout runs on the server, the router‑provided AbortSignal is undefined, so the composable simply skips the abort‑signal forwarding step and relies entirely on the timeout value supplied through $fetch options. No additional logic is required.