Vaadin Flow Grid懒加载初始获取行数过多，如何优化？

问题根源 #

你遇到的初始加载多页数据的情况，是因为Vaadin Grid的懒加载数据视图（LazyDataView）默认会预加载超出当前视口的额外数据。这个机制是为了优化滚动体验，避免用户滚动时频繁触发后端请求，但默认的预加载策略会根据视口高度自动计算需要加载的条目数，导致初始加载了4页共80条数据。

解决方法 #

要限制初始加载的条目数，你需要手动配置LazyDataView的缓存大小，明确控制Grid预加载的数据量：

步骤1：获取LazyDataView实例 #

调用grid.setItems()时会返回LazyDataView对象，保留这个引用即可进行后续配置。

步骤2：设置缓存大小 #

使用setCacheSize()方法指定Grid在客户端缓存的最大条目数，这个值直接决定初始加载和后续预加载的数据量：

grid.setPageSize(20);

// 获取LazyDataView并配置缓存策略
LazyDataView<UserSummary> dataView = grid.setItems(q -> {
    Page<UserSummary> page = userService.findUsers(
        dataViewFilter.getName(),
        dataViewFilter.getEmail(),
        q.getPage(), q.getPageSize());
    return page.getContent().stream();
});

// 初始仅加载1页（20条数据）
dataView.setCacheSize(20);

// 若希望初始加载2页（40条数据），则改为：
// dataView.setCacheSize(40);

补充说明 #

• setPageSize(20)：定义每次从后端请求的单页条目数量。
• setCacheSize(n)：控制Grid在客户端缓存的条目总数，当缓存内条目不足时，Grid会自动触发后端请求加载新页面。设置为20时，Grid仅保留当前页数据，初始仅加载第0页；设置为40时，会预加载前两页数据。

如果你的Vaadin版本为22及以下，setCacheSize()方法可能名为setRowCacheSize()，用法完全一致。

内容的提问来源于stack exchange，提问作者alexanoid