Virtual For

Keyed <For> diffs on the client, but 10k rows still mean 10k DOM nodes. virtual paints a window plus spacers.

LIVE

<For virtual>

Row 0

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

Row 21

Row 22

Row 23

view!

view! {
    <div data-r-virtual-scroller="true" style="height: 24rem; overflow: auto">
        <For each={jobs} key="id" virtual itemHeight={48} overscan={6} let:job>
            <div>{job.title.clone()}</div>
        </For>
    </div>
}

itemHeight — row height in CSS pixels (default 48).
overscan — extra rows above/below the viewport (default 6).
data-r-virtual-scroller — scroll container; otherwise the list parent is used.

SSR renders only the first window so HTML stays small. The client window lives in /_resuma/ui.js — the one runtime path that actually recycles rows.