ഒരു ലളിതമായ റിഫ്രഷ് ഞങ്ങളുടെ ആപ്പിനെ തകർത്തപ്പോൾ
ഞങ്ങൾ ഒരു ബഗ് കണ്ടെത്തി. പ്രധാന റൂട്ടുകൾ (Top routes) കൃത്യമായി പ്രവർത്തിച്ചു. ഡീപ്പ് റൂട്ടുകൾ (Deep routes) കാരണം പേജ് പൂർണ്ണമായും റീലോഡ് ആകുന്നുണ്ടായിരുന്നു. സൈഡ്ബാർ ഓരോ തവണയും റീസെറ്റ് ആകുന്നുണ്ടായിരുന്നു. ആപ്പ് അസ്ഥിരമാണെന്ന് തോന്നിപ്പിച്ചു.
ഇത് ലോക്കലിൽ പ്രവർത്തിച്ചു. എന്നാൽ പ്രൊഡക്ഷനിൽ പരാജയപ്പെട്ടു.
ഞങ്ങൾ Azure Static Web Apps-ൽ Next.js static export ആണ് ഉപയോഗിച്ചത്. ഈ സെറ്റപ്പിൽ സെർവർ റൺടൈം ഇല്ല. ഇത് സ്റ്റാറ്റിക് ഫയലുകളാണ് നൽകുന്നത്.
പ്രശ്നം സോഫ്റ്റ് നാവിഗേഷനിൽ (soft navigation) ആയിരുന്നു. സുഗമമായ ട്രാൻസിഷനുകൾക്കായി Next.js-ന് റൂട്ട് പേലോഡ് ഡാറ്റ (route payload data) ആവശ്യമാണ്. ആദ്യത്തെ ലോഡിനായി ഇതിന് HTML ആവശ്യമാണ്.
ഞങ്ങളുടെ Azure റീറൈറ്റ് റൂളുകൾ (rewrite rules) വളരെ വിപുലമായിരുന്നു. Next.js പേലോഡ് ഡാറ്റ ആവശ്യപ്പെട്ടപ്പോൾ Azure HTML ആണ് അയച്ചത്. റൂട്ടർ പരാജയപ്പെട്ടു. ആപ്പ് റീലോഡ് ആയി.
ഞങ്ങൾ ഇത് ഓട്ടോമേഷനിലൂടെ പരിഹരിച്ചു. ബിൽഡ് ഔട്ട്പുട്ടിൽ നിന്ന് റീറൈറ്റ് റൂളുകൾ നിർമ്മിക്കുന്നതിനായി ഞങ്ങൾ ഒരു ടൂൾ നിർമ്മിച്ചു. ആ ടൂൾ ഇപ്പോൾ:
- ഡൈനാമിക് റൂട്ട് ഫയലുകൾ സ്കാൻ ചെയ്യുന്നു.
- HTML-നും പേലോഡുകൾക്കുമായി പ്രത്യേക റൂളുകൾ നിർമ്മിക്കുന്നു.
- മുൻഗണനാക്രമത്തിൽ റൂളുകളെ ക്രമീകരിക്കുന്നു.
- അവസാന കോൺഫിഗറേഷൻ ഫയൽ തയ്യാറാക്കുന്നു.
ഇത് മാനുവൽ പിശകുകൾ ഒഴിവാക്കി.
നിങ്ങൾ Azure-ൽ static export ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ:
- നിങ്ങളുടെ കോൺഫിഗറേഷൻ ഫയലുകൾ ഓട്ടോമേറ്റ് ചെയ്യുക.
- സോഫ്റ്റ് നാവിഗേഷൻ പരിശോധിക്കുക.
- പേലോഡ് റിക്വസ്റ്റുകൾ HTML ആണോ നൽകുന്നത് എന്ന് പരിശോധിക്കുക.
- റീറൈറ്റ് റൂളുകളെ നിർണ്ണായകമായ ഇൻഫ്രാസ്ട്രക്ചറായി പരിഗണിക്കുക.
സങ്കീർണ്ണമായ ഫ്രണ്ട്എൻഡ് ബഗുകൾ പലപ്പോഴും ബിൽഡ് ഔട്ട്പുട്ടിനും ഹോസ്റ്റിംഗ് റൂളുകൾക്കും ഇടയിലാണ് ഉണ്ടാകുന്നത്.