ലൈവ് ഇൻവെന്ററിയുള്ള സ്റ്റാറ്റിക് സൈറ്റുകൾ

നിങ്ങൾക്ക് വേഗതയേറിയ ഒരു സൈറ്റ് വേണം. ഒപ്പം കൃത്യമായ സ്റ്റോക്ക് വിവരങ്ങളും ആവശ്യമാണ്. മിക്ക ആളുകളും ഇതിൽ ഒന്ന് തിരഞ്ഞെടുക്കും. അവർ വേഗതയോ കൃത്യതയോ ആണ് തിരഞ്ഞെടുക്കുന്നത്. എന്നാൽ നിങ്ങൾക്ക് അങ്ങനെ ചെയ്യേണ്ടതില്ല.

സ്റ്റാറ്റിക് സൈറ്റുകൾ വേഗതയേറിയതാണ്. എന്നാൽ ഓരോ ബിൽഡിംഗിനും ഇടയിൽ ഡാറ്റ പഴയതാകാൻ സാധ്യതയുണ്ട്. ക്ലയന്റ് സൈഡ് ഫെച്ചിംഗ് (Client side fetching) കൃത്യമാണ്. എന്നാൽ ഇത് ലോഡിംഗ് സ്പിന്നറുകൾ (loading spinners) ഉണ്ടാക്കുന്നു. സ്പിന്നറുകൾ യൂസർ എക്സ്പീരിയൻസ് നശിപ്പിക്കുന്നു.

രണ്ട് truth layers ഉപയോഗിക്കുക.

ഒന്നാം ലെയർ ബാഹ്യ സംവിധാനങ്ങളെ (external systems) സേവിക്കുന്നു.

  • Google, Meta എന്നിവയ്ക്കായി ബിൽഡ് ടൈം ഡാറ്റ (build time data) ഉപയോഗിക്കുക.
  • ഇത് വിറ്റഴിയപ്പെട്ട സാധനങ്ങളുടെ പരസ്യം തടയുന്നു.
  • ഒരു സിങ്ക് സ്ക്രിപ്റ്റ് (sync script) ഈ ഡാറ്റ പുതുക്കി നിലനിർത്തുന്നു.

രണ്ടാം ലെയർ നിങ്ങളുടെ സന്ദർശകരെ സേവിക്കുന്നു.

  • ഷോപ്പ് ഗ്രിഡ് (shop grid) സ്റ്റാറ്റിക് HTML ആയി റെൻഡർ ചെയ്യുക.
  • സാധനങ്ങൾ ലഭ്യമാണെന്ന് കരുതുക.
  • പേജ് ലോഡ് ചെയ്ത ശേഷം UI പാച്ച് ചെയ്യാൻ ഒരു ചെറിയ സ്ക്രിപ്റ്റ് ഉപയോഗിക്കുക.
  • ഇത് വിറ്റഴിയപ്പെട്ട സാധനങ്ങളുടെ ബൈ ബട്ടൺ (buy button) നീക്കം ചെയ്യുന്നു.

ഈ രീതി ലോഡിംഗ് സ്റ്റേറ്റുകൾ ഒഴിവാക്കുന്നു. പേജ് പെട്ടെന്ന് പ്രവർത്തിക്കുന്നതായി തോന്നും. നിങ്ങളുടെ API പരാജയപ്പെട്ടാലും സൈറ്റ് പ്രവർത്തിക്കും. ഉപയോക്താക്കൾക്ക് സാധനങ്ങൾ കാണാനും കാർട്ടിൽ ചേർക്കാനും സാധിക്കും. ഒരു സാധനം വിറ്റഴിയപ്പെട്ടതാണെങ്കിൽ, കാർട്ട് ആ അഭ്യർത്ഥന നിരസിക്കും.

ഒരു ബ്ലാങ്ക് സ്ക്രീനിനേക്കാൾ നല്ലത് കാർട്ടിൽ വരുന്ന ഒരു എറർ ആണ്.

കുറഞ്ഞ ട്രാഫിക്കുള്ള ഷോപ്പുകൾക്ക് ഇത് ഉപയോഗിക്കാം. കലാരൂപങ്ങൾ അല്ലെങ്കിൽ പ്രത്യേക തരം സാധനങ്ങൾ (niche goods) വിൽക്കുന്ന ഇടങ്ങൾക്ക് ഇത് അനുയോജ്യമാണ്. ഫ്ലാഷ് സെയിലുകൾക്ക് (flash sales) ഇത് ഉപയോഗിക്കരുത്. ഉയർന്ന ട്രാഫിക്കുള്ള ഇടങ്ങൾക്ക് കർശനമായ പരിശോധനകൾ ആവശ്യമാണ്.

Source: https://dev.to/dbartalos/static-site-live-inventory-two-sources-of-truth-that-dont-fight-each-other-5c0a