NextJs Dynamic sitemap why get 504 error?

Question

I have a component to create a sitemap dynamically as the code below. the problem is this code work perfectly in my localhost but when it deploy on the server I always get Gateway Timeout-504 error! are there any suggestions am I doing something wrong?

import fetch from "isomorphic-unfetch";
import React from "react";
import {getCategoryPath} from "../helpers/Converters";

const EXTERNAL_DATA_URL = "http://www.my.site";

const createSitemap = (items: any) => `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${items
    .map((item: any) => {
        return `
            <url>
                <loc>${EXTERNAL_DATA_URL}/${getCategoryPath(item.CategoryName)}/Detail?id=${item.Id}</loc>
                <priority>${item.Priority}</priority>
                <changefreq>${item.ChangeFreq}</changefreq>
                <lastmod>${item.LastMod}</lastmod>
            </url>
        `;
    })
    .join("")}
    </urlset>
    `;

class Sitemap extends React.Component {
    static async getInitialProps({res}: any) {
        const response = await fetch(`${EXTERNAL_DATA_URL}:5000/api/SiteMap`);
        const posts = await response.json();

        res.setHeader("Content-Type", "text/xml");
        res.write(createSitemap(posts));
        res.end();
    }
}

export default Sitemap;

Answer 1

the problem actually related to Nginx, due to my Nginx config I route all /api* to port 5000 internally so addressing the port at fetch data is extra, therefore changing the related line to this, solve my problem:

const response = await fetch(`${EXTERNAL_DATA_URL}/api/SiteMap`);