Loader SSR serialization returns sparse Arrays when some items are undefined

[dxptqhtlutehvlyxcmtg]

Which project does this relate to?

Start

Describe the bug

Returning an array with undefined items from a loader during SSR results in the component receiving a sparse or holey array. An empty slot and an undefined array item might seem the same, but their behavior with iterators like .map or .reduce etc is wildly different. In other words, this issue makes Array iteration unreliable.

Example:
A loader (during SSR) can return [1, 2, undefined, 4] but browser side the component will get 1, 2, "empty slot", 4].

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-9kwai3xf?file=src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

A client side navigation to the route by clicking on "Home" renders correctly.

0 - a
1 - b
2 - c
3 -
4 - e

Observe server side and browser side console.log of the array items match each other.

Now do a hard navigation on the same Home route. The page will render:

0 - a
1 - b
2 - c
4 - e

Server side console.log

{ items: [ 'a', 'b', 'c', undefined, 'e' ] }

Browser console.log

items: (5) ['a', 'b', 'c', empty, 'e']

Expected behavior

Expect de-serialized data to match what was serialized.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[schiller-manuel]

we'll migrate the serializer to seroval soon, then this will be resolved. let's revisit then