I'm using NextJs. I have 10 buttons, and 0 score. If I click one button the score should be increased only by one point, no matter how many times I click, and the maximum score can be 10. At the same time I can not disable buttons. The question is which way is the best to implement such task?

In my mind there are two ways, but I don't think that they are right:

First, I have db and store there 10 button ids with 0 or 1 points, and I validate my response if it returns 0 or 1. For example: [{btn_1:0}, {btn_2:1},..., {btn_7:0}, ...]. The problem is here, it will be a lot of requests to db.

The second way, is to keep button ids and score in local storage and somehow within some period of time synchronize it with db. (I haven't worked with local storage, but I believe it's possible