SSR List & Data Sync

Applied to a list or grid container via data-ln-list="name", ln-list renders and manages repeating item collections. In SSR mode, it coordinates direct DOM search, filter, and sort interactions on its child items. In data-driven mode (data-ln-list-source="store"), it listens for ln-data-store:data CustomEvents, clones <template data-ln-template="name-row">, populates fields via fill(), and mounts rendered items into [data-ln-list-body] with optional virtual scroll windowing.

For datasets too large to cache entirely client-side, ln-list provides a high-performance SSR Hydration & Windowed Sync pipeline matching the ln-table synchronization protocol: an instant paint from server-rendered items, followed by a bounded sliding-window cache that fetches pages from the server as the user scrolls.

Lifecycle Mechanics. 1. Instant SSR paint: the list loads a fast pre-rendered subset (e.g. 100 items printed by the server, matching the server-declared data-ln-list-count grand total). 2. Local hydration: the JS layer parses those items on load, enabling immediate client-side search over the hydrated subset. 3. Windowed sync: data-ln-list-window="1000" caps the resident cache at 1,000 items — as the user scrolls, the list requests pages from the PHP backend API and LRU-evicts the least-recently-touched items to stay under the cap; the full 10,000-record dataset never loads client-side. No fetch fires on load: the first 100 SSR items seed the resident window directly; the backend is queried only once scrolling moves past the seeded items, or a sort/search/filter changes the query. 4. Continuous scroll: items outside the resident window render as blank placeholders until their page arrives — there are no pagination controls, scrolling stays continuous over the full server-side dataset.

Remote Full-Text Search Integration

When searching, the list first filters local cached items for instant visual response, and then dispatches the search term to the PHP backend. The PHP API runs a full-text search across title, department, owner, and tags properties, returning matches from the entire 10k database.

SSR List & Data Sync

Mode

Skin

Theme

Overview & Philosophy

Remote Full-Text Search Integration

Sandbox Controls

Integration Log Terminal

Interactive List Demo

No documents yet

No matches found