ಒಂದು ಸರಳ ರಿಫ್ರೆಶ್ ನಮ್ಮ ಆ್ಯಪ್ ಅನ್ನು ಹೇಗೆ ಹಾಳುಮಾಡಿತು
ನಮಗೆ ಒಂದು ಬಗ್ (bug) ಕಂಡುಬಂದಿತು. Top routes ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದವು. Deep routes ಪೂರ್ಣ ಪುಟದ ರೀಲೋಡ್ಗಳಿಗೆ (reloads) ಕಾರಣವಾಗುತ್ತಿದ್ದವು. ಸೈಡ್ಬಾರ್ ಪ್ರತಿ ಬಾರಿಯೂ ರಿಸೆಟ್ ಆಗುತ್ತಿತ್ತು. ಆ್ಯಪ್ ಅಸ್ಥಿರವಾಗಿ (unstable) ಕಾಣಿಸುತ್ತಿತ್ತು.
ಇದು ಲೋಕಲ್ನಲ್ಲಿ (locally) ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿತ್ತು. ಆದರೆ ಪ್ರೊಡಕ್ಷನ್ನಲ್ಲಿ (production) ವಿಫಲವಾಯಿತು.
ನಾವು Azure Static Web Apps ನಲ್ಲಿ Next.js static export ಅನ್ನು ಬಳಸಿದ್ದೆವು. ಈ ಸೆಟಪ್ನಲ್ಲಿ ಯಾವುದೇ ಸರ್ವರ್ ರನ್ಟೈಮ್ (server runtime) ಇಲ್ಲ. ಇದು ಸ್ಟ್ಯಾಟಿಕ್ ಫೈಲ್ಗಳನ್ನು ಸರ್ವ್ ಮಾಡುತ್ತದೆ.
ಸಮಸ್ಯೆಯೆಂದರೆ soft navigation. ಸುಗಮ ಸಂಕ್ರಮಣಗಳಿಗಾಗಿ (smooth transitions) Next.js ಗೆ route payload data ಬೇಕಾಗುತ್ತದೆ. ಮೊದಲ ಲೋಡ್ಗಾಗಿ ಅದಕ್ಕೆ HTML ಬೇಕಾಗುತ್ತದೆ.
ನಮ್ಮ Azure rewrite rules ತುಂಬಾ ವಿಶಾಲವಾಗಿದ್ದವು. Next.js ಪೇಲೋಡ್ ಡೇಟಾವನ್ನು ಕೇಳಿದಾಗ Azure HTML ಅನ್ನು ಕಳುಹಿಸುತ್ತಿತ್ತು. ರೂಟರ್ ವಿಫಲವಾಯಿತು. ಆ್ಯಪ್ ರೀಲೋಡ್ ಆಗುತ್ತಿತ್ತು.
ನಾವು ಇದನ್ನು automation ಮೂಲಕ ಸರಿಪಡಿಸಿದೆವು. Build outputನಿಂದ rewrite rules ಅನ್ನು ರಚಿಸಲು ನಾವು ಒಂದು ಟೂಲ್ ಅನ್ನು ನಿರ್ಮಿಸಿದೆವು. ಈ ಟೂಲ್ ಈಗ:
- ಡೈನಾಮಿಕ್ ರೂಟ್ ಫೈಲ್ಗಳನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡುತ್ತದೆ.
- HTML ಮತ್ತು payloads ಗಾಗಿ ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳನ್ನು ರಚಿಸುತ್ತದೆ.
- ನಿಯಮಗಳನ್ನು ಆದ್ಯತೆಯ ಮೇರೆಗೆ ಜೋಡಿಸುತ್ತದೆ.
- ಅಂತಿಮ config ಫೈಲ್ ಅನ್ನು ಬರೆಯುತ್ತದೆ.
ಇದು ಮ್ಯಾನುಯಲ್ ತಪ್ಪುಗಳನ್ನು (manual errors) ತಪ್ಪಿಸಿತು.
ನೀವು Azure ನಲ್ಲಿ static export ಬಳಸುತ್ತಿದ್ದರೆ:
- ನಿಮ್ಮ config ಫೈಲ್ಗಳನ್ನು automate ಮಾಡಿ.
- Soft navigation ಅನ್ನು ಪರೀಕ್ಷಿಸಿ.
- Payload ರಿಕ್ವೆಸ್ಟ್ಗಳು HTML ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
- Rewrite rules ಅನ್ನು critical infrastructure ಎಂದು ಪರಿಗಣಿಸಿ.
Hard frontend bugs ಹೆಚ್ಚಾಗಿ build output ಮತ್ತು hosting rules ನಡುವೆ ಇರುತ್ತವೆ.