Lazy-Loading Large Datasets in Vaadin Grid with a Spring Data Backend

Problem: Loading 100 k rows freezes the UI

When a Vaadin Grid is populated with all rows from a large table, the initial request downloads the whole dataset, consumes significant memory on the client, and can make the UI unresponsive while the browser renders thousands of rows.

Thesis: Use lazy‑loading DataProvider backed by Spring Data

Vaadin Grid’s DataProvider interface lets you supply a callback that returns only the rows needed for the current viewport, based on offset, limit, sorting and filter criteria. By wiring that callback to a Spring Data Pageable repository, you get efficient paging with almost no boilerplate.

Implementing a Spring Data‑backed DataProvider

The following class shows a minimal implementation for a Person entity.

public class PersonDataProvider extends AbstractBackEndDataProvider<Person, Void> {

    private final PersonRepository personRepository;

    public PersonDataProvider(PersonRepository personRepository) {
        this.personRepository = personRepository;
    }

    @Override
    protected List<Person> fetchFromBackend(Query<Person, Void> query) {
        int offset = query.getOffset();
        int limit = query.getLimit();
        List<OrderBy> orderBy = query.getSortOrders();
        Sort sort = orderBy.isEmpty()
                ? Sort.unsorted()
                : Sort.by(orderBy.stream()
                        .map(o -> o.isAscending()
                                ? Sort.Order.asc(o.getSorted())
                                : Sort.Order.desc(o.getSorted()))
                        .collect(Collectors.toList()));
        PageRequest pageRequest = PageRequest.of(offset / limit, limit, sort);
        return personRepository.findAll(pageRequest).getContent();
    }

    @Override
    protected int sizeInBackend(Query<Person, Void> query) {
        return (int) personRepository.count();
    }
}

Key points:

• offset and limit come directly from the Grid’s current viewport.
• The sort object is translated into a Spring Data Sort instance.
• fetchFromBackend returns the content of a Page; sizeInBackend returns the total count.

Wiring the provider into the Grid

Grid<Person> grid = new Grid<>(Person.class);
grid.setDataProvider(new PersonDataProvider(personRepository));
add(grid);

Tuning, trade‑offs and verification

Lazy loading reduces initial payload but each scroll or page change triggers a new server request. If network latency is high or the page size is very small, the user may notice lag. Consider:

• Increasing the page size (e.g., 50‑100 rows) to reduce request frequency.
• Adding a simple cache (e.g., Caffeine) inside PersonDataProvider for recently fetched pages.
• Ensuring the PersonRepository methods are thread‑safe; Spring Data repositories are safe for concurrent calls.
• Applying security checks before returning data; never rely on Grid‑side filtering alone.

To verify that lazy loading works:

1. Run the Vaadin Flow application and open the browser’s developer tools.
2. Select the Network tab and filter for XHR/fetch requests.
3. Scroll the Grid or use the pager; you should see requests with query parameters resembling offset and limit (often sent as JSON in the body of a POST request to the internal Vaadin endpoint).
4. Enable Vaadin debug mode by adding ?debug to the URL; the console will log messages like DataProvider callback invoked with offset=0, limit=50.
5. Compare the initial load time and payload size with a version that uses grid.setItems(personRepository.findAll()); the lazy version should show a much smaller first response and subsequent incremental requests.

Actionable closing

If you are working with a Vaadin Grid that could display thousands of rows, replace the eager setItems call with a DataProvider implementation that delegates to a Spring Data Pageable repository. Start with a page size of 50, monitor network traffic, and adjust size or add caching based on observed latency. This approach keeps memory usage low, reduces initial load time, and scales smoothly to datasets of hundreds of thousands of rows.