ஒரு எளிய ரீப்ரெஷ் எங்கள் செயலியைப் பாதித்தபோது
நாங்கள் ஒரு பிழையைக் கண்டறிந்தோம். முதன்மைப் பாதைகள் (Top routes) சரியாகச் செயல்பட்டன. ஆழமான பாதைகள் (Deep routes) முழுப் பக்கத்தையும் மீண்டும் ஏற்றின (full page reloads). சைட்பார் (sidebar) ஒவ்வொரு முறையும் ரீசெட் ஆனது. செயலி நிலையற்றதாகத் தோன்றியது.
இது உள்ளூர் சூழலில் (locally) சரியாக வேலை செய்தது. ஆனால் தயாரிப்புச் சூழலில் (production) தோல்வியடைந்தது.
நாங்கள் Azure Static Web Apps-இல் Next.js static export முறையைப் பயன்படுத்தினோம். இந்த அமைப்பில் சர்வர் ரன்டைம் (server runtime) இல்லை. இது நிலையான கோப்புகளை (static files) மட்டுமே வழங்குகிறது.
பிரச்சனை 'soft navigation'-இல் இருந்தது. தடையற்ற மாற்றங்களுக்கு (smooth transitions) Next.js-க்கு ரூட் பேலோட் தரவு (route payload data) தேவைப்படுகிறது. முதல் முறை ஏற்றும்போது அதற்கு HTML தேவைப்படுகிறது.
எங்களது Azure rewrite விதிகள் மிகவும் விரிவாக இருந்தன. Next.js பேலோட் தரவைக் கேட்டபோது, Azure HTML-ஐ அனுப்பியது. ரூட்டர் (router) தோல்வியடைந்தது. செயலி மீண்டும் ஏற்றப்பட்டது.
இதை நாங்கள் ஆட்டோமேஷன் (automation) மூலம் சரிசெய்தோம். பில்ட் அவுட்புட்டிலிருந்து (build output) rewrite விதிகளை உருவாக்க ஒரு கருவியை உருவாக்கினோம். அந்த கருவி இப்போது:
- டைனமிக் ரூட் கோப்புகளை ஸ்கேன் செய்கிறது.
- HTML மற்றும் பேலோடுகளுக்கான பிரத்யேக விதிகளை உருவாக்குகிறது.
- முன்னுரிமை அடிப்படையில் விதிகளை வரிசைப்படுத்துகிறது.
- இறுதி கான்ஃபிக் கோப்பை (config file) எழுதுகிறது.
இது கைமுறைத் தவறுகளை நீக்கியது.
நீங்கள் Azure-இல் static export பயன்படுத்தினால்:
- உங்கள் கான்ஃபிக் கோப்புகளை ஆட்டோமேட் செய்யுங்கள்.
- soft navigation-ஐச் சோதித்துப் பாருங்கள்.
- பேலோட் கோரிக்கைகள் HTML-ஐத் திருப்பித் தருகின்றனவா என்று சரிபார்க்கவும்.
- rewrite விதிகளை முக்கியமான உள்கட்டமைப்பாகக் (critical infrastructure) கருதுங்கள்.
கடினமான பிரண்ட்எண்ட் பிழைகள் (frontend bugs) பெரும்பாலும் பில்ட் அவுட்புட் மற்றும் ஹோஸ்டிங் விதிகளுக்கு இடையேதான் ஒளிந்துள்ளன.