Generating Id's Server vs Client side [closed]

Question

If I'm using something like React/Vue/Angular or just simply preventing my page to load on submit with pure JS, should I generate the id for my element on the front end or should I wait for the server to respond with an id?

A simple example would be the good old todo list, I add a todo and it has to have an id so when I want to delete it I can send the id to the server. In the past I used to generate a UUID and send that to the server for it to use. My question is just if this is good practice or should I be doing it differently?

Answer 1

If you're going to store data in the server, you should never created the ID of an element in the client. You could add the same ID twice, or another user could use the same ID that you do, or use an invalid one, or -- you get the idea. You can almost surely avoid repeating IDS generating UUIDs client-side, but it is much easier, and more secure, to edit them in the server. Take into account that in the client you don't have any control in which the client sends to your backend. Despite what you do with JavaScript, a malicious user can always hack the request sent to the server and modify it the way they want, so you could end with IDs too long for you database fields, or with invalid values, or God know what else.

Answer 2

Generating ids client side is indeed bad practice for the reasons already explained. But the real point regarding your concern in my opinion is, even if you generate the ids client side, you still have to wait for that server response to make sure the resource is actually created. Server might be temporarily down, server-db connection might be down, disk might be faulty. You need that response in either case for a better user experience when there is an error. So I don't believe you're actually improving the overall user experience by generating ids client side.