ఒక చిన్న రిఫ్రెష్ మా యాప్ను ఎలా పాడుచేసిందో
మేము ఒక బగ్ను కనుగొన్నాము. టాప్ రూట్లు (Top routes) సరిగ్గా పనిచేస్తున్నాయి. డీప్ రూట్లు (Deep routes) వల్ల పేజీ మొత్తం రీలోడ్ అవుతోంది. ప్రతిసారీ సైడ్బార్ రీసెట్ అయిపోతోంది. యాప్ అస్థిరంగా (unstable) అనిపించింది.
ఇది లోకల్లో పనిచేసింది. కానీ ప్రొడక్షన్లో విఫలమైంది.
మేము 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) నుండి రీరైట్ రూల్స్ను రూపొందించడానికి మేము ఒక టూల్ను తయారుచేశాము. ఆ టూల్ ఇప్పుడు:
- డైనమిక్ రూట్ ఫైల్స్ను స్కాన్ చేస్తుంది.
- HTML మరియు పేలోడ్ల కోసం ప్రత్యేక రూల్స్ను సృష్టిస్తుంది.
- ప్రాధాన్యత (priority) ప్రకారం రూల్స్ను అమర్చుతుంది.
- చివరి కాన్ఫిగరేషన్ ఫైల్ను రాస్తుంది.
దీనివల్ల మాన్యువల్ తప్పులు తగ్గాయి.
మీరు Azureలో static export ఉపయోగిస్తుంటే:
- మీ కాన్ఫిగరేషన్ ఫైల్స్ను ఆటోమేట్ చేయండి.
- సాఫ్ట్ నావిగేషన్ను పరీక్షించండి.
- పేలోడ్ రిక్వెస్ట్లు HTMLని తిరిగి ఇస్తున్నాయో లేదో తనిఖీ చేయండి.
- రీరైట్ రూల్స్ను కీలకమైన ఇన్ఫ్రాస్ట్రక్చర్గా పరిగణించండి.
కష్టమైన ఫ్రంటెండ్ బగ్స్ తరచుగా బిల్డ్ అవుట్పుట్ మరియు హోస్టింగ్ రూల్స్ మధ్య దాగి ఉంటాయి.