How would you structure the backend for an application like this?
I have a simple app I want to rebuild in T3, and curious what approach would work well, I haven't used React/TRPC so don't want to work again the tools.
It's a simple reading list, books grouped by month, and within each month ordered by the date the book is marked as read.
I have a few ideas:
1. One call, get all the data, group it in the front end
1. One call, get all the data ordered but flat, and group it in the front end
2. Each MonthView component does a call for it's own data
Would any of these be a good idea, or maybe something else completely?
3 Replies
grouping in the FE seems like a generally bad idea since things will generally scale to the point of needing pagination
however grouped by month with a
<MonthView /> component in this context seems equivalent to filtered by month
Couple benefits:
- This approach will still support pagination if needed in the future.
- Showing multiple months is a matter of multiple parallel calls or passing multiple months
- Adding a year, week, or day view is a simple matter of changing the filter accordinglyThanks, yeah that's what I was thinking. My current version in Vue took the idea one approach and I didn't like it, very messy and tough to update when the user changed anything.
If I did the month view idea, is there a nice clean way to get every component to refresh it's data on a given user action, e.g marking a book as read?
yeah, depends what you're using but you'd be searching for how to do a revalidation (ie. to invalidate the existing data)
For instance, when using server actions: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation