𝗪𝗛𝗘𝗡 𝗔 𝗦𝗜𝗠𝗣𝗟𝗘 𝗥𝗘𝗙𝗥𝗘𝗦𝗛 𝗕𝗥𝗢𝗞𝗘 𝗢𝗨𝗥 𝗔𝗣𝗣
ਸਾਨੂੰ ਇੱਕ ਬੱਗ (bug) ਮਿਲਿਆ। ਮੁੱਖ ਰੂਟਸ (Top routes) ਸਹੀ ਕੰਮ ਕਰ ਰਹੇ ਸਨ। ਡੂੰਘੇ ਰੂਟਸ (Deep routes) ਕਾਰਨ ਪੂਰਾ ਪੇਜ ਰੀਲੋਡ ਹੋ ਰਿਹਾ ਸੀ। ਸਾਈਡਬਾਰ ਹਰ ਵਾਰ ਰੀਸੈੱਟ ਹੋ ਰਿਹਾ ਸੀ। ਐਪ ਅਸਥਿਰ ਮਹਿਸੂਸ ਹੋ ਰਹੀ ਸੀ।
ਇਹ ਲੋਕਲ (locally) ਕੰਮ ਕਰ ਰਿਹਾ ਸੀ। ਪਰ ਪ੍ਰੋਡਕਸ਼ਨ (production) ਵਿੱਚ ਫੇਲ ਹੋ ਗਿਆ।
ਅਸੀਂ Azure Static Web Apps 'ਤੇ Next.js static export ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਸੀ। ਇਸ ਸੈੱਟਅੱਪ ਵਿੱਚ ਕੋਈ ਸਰਵਰ ਰਨਟਾਈਮ (server runtime) ਨਹੀਂ ਹੈ। ਇਹ ਸਟੈਟਿਕ ਫਾਈਲਾਂ ਸਰਵ ਕਰਦਾ ਹੈ।
ਸਮੱਸਿਆ soft navigation ਦੀ ਸੀ। Next.js ਨੂੰ ਸੁਚਾਰੂ ਤਬਦੀਲੀਆਂ (smooth transitions) ਲਈ ਰੂਟ ਪੇਲੋਡ ਡੇਟਾ (route payload data) ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਪਹਿਲੀ ਵਾਰ ਲੋਡ ਹੋਣ ਲਈ ਇਸਨੂੰ HTML ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਸਾਡੇ Azure rewrite rules ਬਹੁਤ ਜ਼ਿਆਦਾ ਵਿਆਪਕ ਸਨ। ਜਦੋਂ Next.js ਨੇ payload data ਮੰਗਿਆ, ਤਾਂ Azure ਨੇ HTML ਭੇਜ ਦਿੱਤਾ। ਰਾਊਟਰ ਫੇਲ ਹੋ ਗਿਆ। ਐਪ ਰੀਲੋਡ ਹੋ ਗਈ।
ਅਸੀਂ ਇਸਨੂੰ ਆਟੋਮੇਸ਼ਨ (automation) ਨਾਲ ਠੀਕ ਕੀਤਾ। ਅਸੀਂ build output ਤੋਂ rewrite rules ਬਣਾਉਣ ਲਈ ਇੱਕ ਟੂਲ ਬਣਾਇਆ। ਇਹ ਟੂਲ ਹੁਣ:
- ਡਾਇਨਾਮਿਕ ਰੂਟ ਫਾਈਲਾਂ (dynamic route files) ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ।
- HTML ਅਤੇ payloads ਲਈ ਖਾਸ ਨਿਯਮ ਬਣਾਉਂਦਾ ਹੈ।
- ਨਿਯਮਾਂ ਨੂੰ ਤਰਜੀਹ (priority) ਅਨੁਸਾਰ ਕ੍ਰਮਬੱਧ ਕਰਦਾ ਹੈ।
- ਅੰਤਿਮ ਕਨਫਿਗ ਫਾਈਲ (config file) ਲਿਖਦਾ ਹੈ।
ਇਸ ਨਾਲ ਮੈਨੂਅਲ ਗਲਤੀਆਂ ਖਤਮ ਹੋ ਗਈਆਂ।
ਜੇਕਰ ਤੁਸੀਂ Azure 'ਤੇ static export ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ:
- ਆਪਣੀਆਂ ਕਨਫਿਗ ਫਾਈਲਾਂ ਨੂੰ ਆਟੋਮੇਟ ਕਰੋ।
- soft navigation ਦੀ ਜਾਂਚ ਕਰੋ।
- ਚੈੱਕ ਕਰੋ ਕਿ ਕੀ payload ਰਿਕੁਐਸਟਾਂ HTML ਵਾਪਸ ਕਰ ਰਹੀਆਂ ਹਨ।
- rewrite rules ਨੂੰ ਮਹੱਤਵਪੂਰਨ ਬੁਨਿਆਦੀ ਢਾਂਚੇ (critical infrastructure) ਵਜੋਂ ਮੰਨੋ।
ਔਖੇ ਫਰੰਟਐਂਡ ਬੱਗ ਅਕਸਰ build output ਅਤੇ ਹੋਸਟਿੰਗ ਨਿਯਮਾਂ ਦੇ ਵਿਚਕਾਰ ਹੁੰਦੇ ਹਨ।