Feedback & Ideas for server-side-rendering of next.js applications

[JeroenvdBurg]

Hi @Reshmi-Sriram @vivekjilla @anthonychu First of all congrats on this new hybrid Next.js addition to static webapps 👏 . It makes SWA really interesting for hosting next.js SSR webapps.

We have tested the new next.js SSR feature with some sample and real production apps. Overall we are impressed with the new additions regarding next.js support on Static WebApps.

We would like to share our feedback and questions on some topics:

Functions

Regarding the functions, we see some real performance difference in SSR. It looks like it is caused by cold starts of the Next_function running on the managed functions plan.

As you can see the page load times with SSR are up to 10 secs which is not really workable for a public website (this is the SSR page from the sample repository) . That's why we have some questions regarding the managed functions.

• Are there plans to be able to host the next_function in a BYO function plan? In this way we can prevent coldstarts, on the premium plan you can even have always a warmed function ready.

• Can you give some insight in the scaling behavior of the managed functions ?

• When will a new function instance spinning up and how long is this allocated before it scales down?

• Looking at the performance graph the function scales down to 0. Is that correct?

ISR & Caching

While it stated in the documentation that ISR (incremental site regeneration) is supported the feature is not really behaving like expected. When you have dynamic content which is different from the static generated (on build time) first the static is served and after refresh the dynamic content is overwriting the static content and saved in cache.

Reloads afterwards are serving directly the new dynamic content. This is the expected behavior. However after some idle time after a reload of the same page the "old" static content is again served.

This is probaly caused by the fact that the new dynamic content is cached in the next_function and is deallocated after some idle time.
This case is really business important otherwise vistors will see different content.

Vercel has this solved by saving the the .next/server/pages not on the function worker but on persistent storage. In this way the function workers can scale up & down without affecting the user experience. In our opinion ISR is only valueable when there is persistent storage of the cached pages. Is this something your team is considering (or already working on) to implement ?

Images & Caching

The same case as indicated for ISR holds for images served via the next_function with next/image. These are cached in .next/cache/images.

It would make sense to cache them outside the scope of the function, especially in combination with enterprise edge functionality so they are served from the distributed cache.

Azure SWA CLI

It is indicated on the documentation page that Deployment via the SWA CLI is not supported yet.

What are the plans to support next.js SSR in the Azure SWA CLI ?

• Would it be possible to run this locally with an Azure function (hosting the next_js function) & webserver hosting the static Next.js app

• Would it be possible to deploy from the CLI without using the oryx deployment?

• Also from a devops perspective would it then be possibile to build the (static)app and function and deploy them separately?

Thanks in advance for your reply. 🙏

💡 Maybe it is useful to host a community call for everybody to share some feedback on this new feature and discuss roadmap/topics above?

[Reshmi-Sriram]

Hi @JeroenvdBurg!

Thanks for this amazing feedback! Looking forward to hearing more from you and our amazing developers! ❤️
I'll try to answer your questions below, feel free to reach out for further discussions!

Functions and Cold Start

• Sorry to hear this performance experience! We might have to investigate a bit further on what caused this. Would you mind please sharing your app details, and perhaps the SWA URL with us so that we can try figure out what's happening? TIA!
• BYOF via SWA CLI is something we hadn't considered for our public preview, but we are still investigating on the options to accommodate the same before GA :)
• Regarding the questions on Managed Functions, SWA uses Consumption plans, and we go by their default behaviour. For more questions regarding the scaling, feel free to check out the official documentation.

ISR, Images and Caching

• Unfortunately, we are a bit blind-sided here as well on what's causing this problem of "old static" fetch. Please share your repo with the ISR code with us and we could get back to you on what could've gone wrong. Thanks!
• Regarding the image caching, it was scoped out of the Public Preview, but we will be working on improving it before GA :)

SWA CLI

• I think this one's already answered in the BYOF section, we're investigating this and will get back once we have some solid plans for the same!

Thank you once again for your valuable feedback, and hoping to hear more from you and the other Next.js fans in the community on your honest inputs and opinions!❤️

Keep coding!

[JeroenvdBurg]

@Reshmi-Sriram Thanks a lot for your reply. Great to hear that you are working on improvements before GA. You also asked some extra information regarding:

Functions and Cold Start

• we used the sample repo with the SSR page.
  The URL of the SWA is https://orange-stone-0c7952003.2.azurestaticapps.net/ssr

• I have configured an Azure availibility test on this page every 15 minutes to measure response time. It clearly indicates response times of more then 8 secs almost consistently.

When we configure availbility test every 5 minutes from 5 locations it looks like it keeps the function alive and consistent around 30 ms. But that is of course not guaranteed and when the function is scaling it will still having a slow start.

ISR

The code is in this github repo https://github.com/JeroenvdBurg/nextjs-poc It uses out of the box next.js ISR (revalidate: 10, // In seconds).

We also tried disabling memory cache as documented for self hosting : https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#self-hosting-isr

However that was giving an error in the azure next_js function

Message | Path doesn't exist! |  
Exception type | System.InvalidOperationException

Hope you can help us out.

Thanks in advance for researching the cases, if you need more information we can setup a call to discuss the technical details.

[Reshmi-Sriram]

Missed out on replying here, thanks for your inputs! We are working on these feature enhancements for GA :)

[JeroenvdBurg]

Missed out on replying here, thanks for your inputs! We are working on these feature enhancements for GA :)

thanks! any update on the enhancements ?

[JeroenvdBurg]

hi @Reshmi-Sriram

Great to see the new updates as described in #1066. Will check out the standalone feature and share our findings soon.

Do you have also have an update regarding SWA cli ? Would it be possible to have the standalone feature and then run swa start command?

[Reshmi-Sriram]

Hey @JeroenvdBurg,
Thanks for the suggestion! We are currently exploring the SWA CLI support for Next.js SSR as well as features like standalone. We hope to provide updates on the same as soon as we can!

[denysbilozor]

@Reshmi-Sriram Hi, could you please write any updates about Cold Start of static web app? up to 10 seconds server response

[Michaelkire]

Hello @Reshmi-Sriram good to see you and your team have made great progress on the SWA with NextJS :)

I'm also curious about ISR, storage between servers and also ISR On-Demand revalidation, which seems to not be working,
When do you plan to have On-Demand Revalidation working? It is sort of a key function in order to being able to cache for longer than a few minutes, and thus gain a huge performance boost.

For now I have to probably utillize caching on Cloudflare and invalidate that instead, which kinda goes against what the ISR is supposed to do for us.

[thomasgauvin]

Hi folks, we rolled out major improvements to our Next.js support on Static Web Apps with support for RSC/App Dir/Server Actions, please take a look at announcement #1428. Closing this discussion, let's keep the conversation going in #1428!