જ્યારે એક સાધારણ રિફ્રેશથી અમારી એપ બગડી ગઈ
અમને એક બગ (bug) મળ્યો. મુખ્ય રૂટ્સ (Top routes) બરાબર કામ કરતા હતા. ડીપ રૂટ્સ (Deep routes) ને કારણે આખું પેજ ફરીથી લોડ (reload) થતું હતું. દરેક વખતે સાઇડબાર રીસેટ થઈ જતું હતું. એપ અસ્થિર લાગતી હતી.
તે લોકલી (locally) કામ કરતું હતું. તે પ્રોડક્શનમાં (production) નિષ્ફળ ગયું.
અમે Azure Static Web Apps પર Next.js static export નો ઉપયોગ કર્યો હતો. આ સેટઅપમાં કોઈ સર્વર રનટાઇમ (server runtime) નથી. તે સ્ટેટિક ફાઇલો સર્વ કરે છે.
સમસ્યા સોફ્ટ નેવિગેશનમાં (soft navigation) હતી. સ્મૂધ ટ્રાન્ઝિશન માટે Next.js ને રૂટ પેલોડ ડેટા (route payload data) ની જરૂર હોય છે. પ્રથમ લોડ માટે તેને HTML ની જરૂર હોય છે.
અમારા Azure rewrite rules ખૂબ જ વ્યાપક હતા. જ્યારે Next.js એ પેલોડ ડેટા માંગ્યો ત્યારે Azure એ HTML મોકલ્યું. રાઉટર નિષ્ફળ ગયું. એપ ફરીથી લોડ થઈ ગઈ.
અમે ઓટોમેશન દ્વારા આ સમસ્યા સુધારી. અમે બિલ્ડ આઉટપુટ (build output) માંથી rewrite rules જનરેટ કરવા માટે એક ટૂલ બનાવ્યું. આ ટૂલ હવે:
- ડાયનેમિક રૂટ ફાઇલો સ્કેન કરે છે.
- HTML અને પેલોડ્સ માટે ચોક્કસ નિયમો બનાવે છે.
- નિયમોને પ્રાથમિકતા મુજબ ગોઠવે છે.
- અંતિમ કોન્ફિગ ફાઇલ (config file) લખે છે.
આનાથી મેન્યુઅલ ભૂલો દૂર થઈ ગઈ.
જો તમે Azure પર static export નો ઉપયોગ કરતા હોવ તો:
- તમારી કોન્ફિગ ફાઇલ્સને ઓટોમેટ કરો.
- સોફ્ટ નેવિગેશન ટેસ્ટ કરો.
- તપાસો કે પેલોડ રિક્વેસ્ટ્સ HTML રિટર્ન કરે છે કે નહીં.
- rewrite rules ને મહત્વપૂર્ણ ઇન્ફ્રાસ્ટ્રક્ચર તરીકે ગણો.
અઘરા ફ્રન્ટએન્ડ બગ્સ (frontend bugs) ઘણીવાર બિલ્ડ આઉટપુટ અને હોસ્ટિંગ નિયમો વચ્ચે છુપાયેલા હોય છે.