Unpredictable and long load time for static content (images specifically) in next.js app hosted in azure static web app

Sindre Espeland 0

We are experiencing unpredictable load times on images in our next.js app hosted on azure static web app, where the time ranges from around 1s to 15s. Screenshot 2024-05-31 164321

After looking at the network>timing tab in chrome dev tools we noticed that it is the server response taking up a lot of time Screenshot 2024-05-31 164433

We started by placing our images in the public folder in the next.js app project folder. The images have now been placed in storage containers on azure connected to azure front door, but the server response time still persists.

In our next.js project we are loading the images with the Image component and given priority to the images at the top of the page.

Have anyone experienced similar behavior or know why the server is taking so long to respond?

SnehaAgrawal-MSFT 20,856 Reputation points

2024-06-04T10:02:09.54+00:00

@Sindre Espeland Thanks for asking question! Could you confirm if you are deploying hybrid Next.js websites on Azure Static Web Apps or static-rendered Next.js websites on Azure Static Web Apps?

Check Image optimization

Let us know.
Sindre Espeland 0 Reputation points

2024-06-06T13:00:03.48+00:00
Thank you for your response @SnehaAgrawal-MSFT ! Based on my setup, it appears that I am deploying a static-rendered Next.js app on Azure Static Web Apps. Here are the details:

Next.js Config:

There are no uses of getserversideprops or getstaticprops in my app

My next.config.js is configured to allow remote images from a specific hosts.

Build and deploy scripts:

My package.json contains the following build: "scripts": { "build": "next build" }

I do not use next export, but only next build. Indicating that it generates the static files without server side rendering.

Azure static web app config:

the github actions yaml file is configured as follows: app_location: "/" api_location: "" output_location: ""

Project structure:

There are no api folder
SnehaAgrawal-MSFT 20,856 Reputation points

2024-06-12T05:01:40.9166667+00:00

@Sindre Espeland Reached you privately.

Share via

Unpredictable and long load time for static content (images specifically) in next.js app hosted in azure static web app