Best approach for handling large dataset filtering in Vue.js - client-side vs server-side?

Backend
1

I’m working on a Vue application with a data table that has two main sections: CATEGORIES and ITEMS. Each category contains multiple items, and I’m dealing with around 15,000 total items.

The workflow is simple - when a user clicks on a category from the left panel, I need to display all related items in the right panel.

I’m trying to decide between two approaches:

  1. Frontend filtering: Load all data once and store it locally, then use JavaScript to filter items by category
  2. Backend requests: Make API calls each time a category is selected to fetch only relevant items

For the frontend approach, I’d structure the data like this:

[
  {
    category_title: 'marketing_campaign',
    items: [
      {item_id: 101, title: 'create_banner'},
      {item_id: 102, title: 'write_copy'},
      {item_id: 103, title: 'schedule_posts'}
    ]
  }
]

Which method would provide better performance? What do experienced developers typically recommend for this scenario?

2

I’ve handled similar situations with production apps, and I’d go with a hybrid approach for your 15k items. Pure frontend filtering kills you on load times and eats memory on weaker devices. But hitting the API every time someone picks a category feels sluggish. Try pagination with client-side caching - load categories on demand but cache what you fetch. Once you’ve grabbed a category, use the cached version for future clicks. You can even preload popular categories based on how users actually behave. This gets you the snappy feel of client-side filtering without destroying memory and load times. Just measure your actual data transfer and test on different devices to nail down what works best.

3

Interesting challenge! Quick questions though - do users usually browse multiple categories in one session or stick to one? And what’s the typical item count per category? If you’re looking at 100-500 items per category, server-side might actually feel faster than you’d expect. How often does this data update on your backend?

4

depends on ur users’ internet speeds. if most have decent connections, i’d just load everything upfront and filter locally - 15k items isn’t huge unless the objects are massive. but if ur dealing with mobile or slow connections, go server-side. also think about how often the data changes - no point caching stale info.