1st level - Hardcode elements into HTML/JSX/markup template

• Do not change whasoever
• Absolutely static (would have to filter using DOM)
• Use under 2nd level conditions for pure HTML
• Arbitrarily small amounts

1.5th Level - Hardcode elements with conditional rendering (v-if/show in Vue)

• Use for lists of arbitrarily small amounts AND unlikely to change, but if so can be done with another deploy/release

2nd Level - Store in array of objects/object of array of objects on client

• For client-side updates of list (e.g. filtering, searching)
• Use for lists of arbritarily large amounts (e.g. states in the USA) even if they're not going to change OR need to change through local user interaction

3rd Level - Store array of objects on backend, filter client-side

• Use when data will not at all need to be connected to backend

4th Level - Store in array of objects on backend, filter server-side

5th Level - Store in database, filter on client

6th Level - Store in database, filter on backend