Having 504 Error in Next.js with WordPress CMS in Siteground

Question

I'm looking for a permanent solution for having the 504 error in next.js which is hosted in vercel. Everything works fine on local and also in build time. But after building the application in vercel I'm having these error everyday. It's ruinning our image infront of our clients. Sometimes our article page is completely gone because of this. I've wasted a lot of time.

WordPress CMS is hosted on siteground and there is nothing wrong with the server. There is no error logged in there. I've checked with other people as well. Seems like this problem is happening on vercel.

My theory is as I've 40 pages on the Next.js site & each page is requesting the WP API in every 3min, So it could be the WordPress API PHP server is busy handly so many api request at a time. So it process every request at a time, in that case some API calls takes long to respond and vercel shows server 504 timeout error. Please correct me if I'm wrong anywhere, It's my theory about that.

What can I do to solve this.

Here how am I calling data for a sample article page

/**
 * Fetch the data from WordPress database
 *
 * @returns {Promise<{props: {posts: any}}>}
 */
export async function getStaticProps() {
    try {
        const posts: Array<GeneralBlogInterface> = await getPosts();
        const categories: BlogCategoriesInterface[] = await getCategories();
        const postsPerPageValue: number = await getPostsPerPageValue();

        const data: WpPageResponseInterface<any> = await getPageData({ slug: 'articles' });

        return {
            props: {
                posts,
                categories,
                postsPerPageValue,
                seo: data?.yoast_head || '',
                yoastJson: data?.yoast_head_json || ''
            }
            // revalidate: Number(process.env.NEXT_REVALIDATE_TIME)
        };
    } catch (error: any) {
        console.error(error);
        return { props: {} };
    }
}

And here how I'm calling data from WP for a noraml contact us page

/**
 * Fetch the data from the WordPress database
 *
 * @returns {Promise<{props: {posts: any}}>}
 */
export async function getStaticProps() {
    try {
        const data: WpPageResponseInterface<any> = await getPageData({ slug: 'contact-us' });

        return {
            /* eslint-disable */
            props: {
                seo: data?.yoast_head || '',
                yoastJson: data?.yoast_head_json || ''
            },
            revalidate: Number(process.env.NEXT_REVALIDATE_TIME)
            /* eslint-enable */
        };
    } catch (error: any) {
        console.error(error);
        return { props: {} };
    }
}

I've tried some pages to use the getServerSideProps function in next.js to avoid consecutive requests to WP api from next.js for articles pages but other pages would make it slow. If I have to use server rendered pages instead of SSG what's the point of using next.js at all?

I would also like to mention this. If I increase the request acceptance per second in WP, would this help?

function my_prefix_rest_get_max_batch_size() {
    return 50;
}
 
add_filter( 'rest_get_max_batch_size','my_prefix_rest_get_max_batch_size' );