किसी फ्रंटएंड ऐप में server state और client state के फर्क को आप कैसे देखते हैं?

server state वह डेटा है जिसके मालिक आप नहीं: वह किसी डेटाबेस में रहता है, आते ही बासी हो सकता है, और उसे caching, revalidation, retries तथा deduplication चाहिए। client state वह डेटा है जिसके मालिक आप हैं, जैसे कौन सा tab खुला है या form में क्या टाइप हुआ है, और वह synchronous तथा हमेशा सही होता है। दोनों को अलग तरह से लीजिए: server state के लिए query cache, client state के लिए component की local state या कोई छोटा store।

server state किसी ऐसी चीज़ की cached नकल है जो मेरे काबू में नहीं। वह asynchronously आती है, बासी हो सकती है, दो components एक साथ उसे चाह सकते हैं, और उसे revalidation, retries तथा deduplication चाहिए। client state मेरी है: खुला accordion, form में पड़ा draft, apply करने से पहले चुना गया filter। वह synchronous है और कभी बासी नहीं होती। जब से मैंने इन्हें अलग समस्याएं मानना शुरू किया, बहुत सारा कोड गायब हो गया। server का डेटा अपने parameters से keyed query cache में जाता है, जो loading और error की हालतें संभालता है, एक जैसी requests को जोड़ देता है और focus पर दोबारा लाता है। client state तब तक component की local state रहती है जब तक एक से ज़्यादा component को उसकी ज़रूरत न पड़े, और तभी वह किसी छोटे साझा store में जाती है। इसे गलत करने का लक्षण बहुत पहचाना हुआ है: entities से भरा global store, हर स्क्रीन पर हाथ से लिखे loading booleans, और ऐसा bug जिसमें दो components एक ही user को लाते हैं और उसके बारे में असहमत हो जाते हैं। मैंने वह ऐप संभाला है और उसे दोबारा वैसे नहीं बनाऊंगा।