How would you separate server and client state?

Server state refers to data that is stored and managed on the server, such as user information, sessions, settings, and database data. Client state refers to data stored and managed in the user's browser or application, such as UI state, local settings, and cached data.

The separation typically occurs as follows:

• Server state is stored on the server and accessible via API. It is considered the source of truth and should be consistent.
• Client state manages local interface aspects and temporary data that do not necessarily need to be synchronized with the server.

To manage server state on the client, libraries like React Query or Redux Toolkit Query are often used, which help cache and update data from APIs. Client state can be stored in component local state, Redux, MobX, or Context API.

Example:

• Server state: list of products fetched from the server.
• Client state: selected filter or current pagination page.

This separation helps optimize performance and simplifies application architecture.