Frontend frameworks have evolved to make use of the server to provide optimal hosting for frontend applications. From hybrid rendering modes to API routes and backend-for-frontend patterns, frontend frameworks such as Next.js, Nuxt.js, SvelteKit, and others have become capable of building full-stack applications. With Azure Static Web Apps, you can host these frontend frameworks on our distributed static asset host and serverless managed functions, providing you with the best experience for hosting frontend web applications on Azure.
In this article, we’ll dive into hybrid rendering frameworks and how these are hosted on Azure Static Web Apps, as well as give an insight into the ongoing work to bring more frameworks to Azure Static Web Apps.
Why these frontend frameworks were created
At their core, these frameworks build upon the client-side rendering frameworks that we are familiar with from the JAMStack era; Vue.js, React, Angular, Svelte are all complemented by their corresponding meta-framework (Vue.js has Nuxt, React has Next.js and Remix, Angular has Analog.js, Svelte has SvelteKit…).
Why were frontend meta-frameworks created? Simply put, client-side rendering frameworks outgrew their initial intended usage requiring new rendering modes, and did not have solutions for common needs such as routing, data fetching, and backend solutions. This led to an increase in complexity for building frontend web applications and a proliferation of frontend libraries and tools. So, meta-frameworks were created to solve these issues, providing a single framework with all the required tools included to build frontend web applications.
How hybrid rendering frameworks work
At their core, these meta-frameworks are servers that execute the frontend rendering on the server, enabling the responses to be search engine optimized with values prepopulated. Then, these HTML pages are hydrated, meaning that JavaScript execution is added to provide the fluid interaction we’ve grown to appreciate from client-side rendering/single-page applications.
However, since these meta-frameworks span the client-server boundary, they also provide us with additional server-side functionality, such as the ability to write API routes or server functions which are integrated into these meta-frameworks through their own custom remote procedure call (RPC) implementation.
With this functionality, these frontend frameworks can be used to build out full-stack applications. But you may be wondering how these frameworks can be hosted on Azure Static Web Apps. After all, these frontend frameworks require servers to provide their server-side functionality (hybrid rendering, API routes, etc.), and they are far from being static!
How these frameworks are hosted on Azure Static Web Apps
This is where Azure Static Web Apps’ managed functions feature comes in. Serverless APIs are essential to building full-stack applications on Azure Static Web Apps, especially in the context of JAMStack applications, where a single-page application (React, Vue.js, Angular, Svelte, Blazor) calls APIs. This is why Azure Static Web Apps provides managed functions, a feature that allows you to specify Azure Functions code within your application so that Static Web Apps can host this Function on your behalf. Requests to your Static Web Apps’ /api route are then proxied to the Function to receive the API response. This is a sample of a full-stack application, following the JAMStack pattern deployed to Azure Static Web Apps:
React + Functions full-stack application: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/build-a-full-stack-react-application-with-...
Managed functions can also be used by these hybrid-rendering meta-frameworks to provide server-side functionality. Here’s how they do it: in most cases, these meta-frameworks build their server into 2 separate bundles: 1 bundle of static assets that gets deployed to Azure Static Web Apps’ global static host, and 1 bundle of Azure Functions code that gets deployed to Azure Static Web Apps’ managed functions. Then, the meta-framework creates a staticwebapp.config.json file in order to indicate to Static Web Apps’ what should be the proper routing across static assets and Functions. This step is unique to each framework, and it's best to look into the details of each framework to learn more about how they deploy to Static Web Apps. For instance, Next.js is uniquely hosted on a SWA-managed App Service to ensure feature compatibility.
For instance, in this screenshot, we can see that Nuxt.js builds the server into .output/public for static files and .output/server for Functions files. SvelteKit and Nitro-based frameworks have similar outputs.
When hosting these frontend frameworks on Azure Static Web Apps, we benefit from Azure Static Web Apps' simple hosting model, global distribution of static assets, and serverless scale for server-side operations, providing optimized hosting for frontend applications. Moreover, these frontend frameworks can be further empowered using Static Web Apps' built-in authentication, preview environments, and distributed functions, to provide you and your team with a great developer experience!
Try out hybrid-rendering on Azure Static Web Apps
Many hybrid-rendering frameworks work today on Azure Static Web Apps. We’ve created guides to show you how you can get started building server-side rendering, full-stack applications with Azure Static Web Apps (and the best part is that there’s a free plan to try it out!)
Nuxt.js full-stack app: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/build-a-full-stack-server-rendered-nuxt-si...
Next.js full-stack app: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/build-full-stack-next-js-apps-with-azure-s...
SvelteKit full-stack app: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/deploy-full-stack-server-side-rendered-sve...
There’s also a lot of ongoing work within the open-source community to bring even more hybrid rendering frameworks to Azure Static Web Apps. While this is work is still in development, if you want to contribute to the efforts, here’s where you can get started:
Remix: scandinavianairlines/remix-azure-functions: A Remix.run adapter for Azure Functions and Azure Static..., derkoe/remix-azure-functions: Remix Adapter for Azure Functions and Static Webapps (github.com), feat: add `@remix-run/azure-functions` package by aaronpowell · Pull Request #2521 · remix-run/remix...
Nitro-based frameworks (SolidStart, Analog.js): Azure · Nitro (unjs.io)
Conclusion
All in all, deploying hybrid rendering frameworks on Azure Static Web Apps provides optimized hosting for frontend web applications. Today, many customers are deploying these hybrid rendering frameworks on Azure Static Web Apps, and some are actively developing adapters for new frontend frameworks that they are adopting. We’re actively improving the Static Web Apps service to be the best host for your frontend web applications, and with recent announcements such as distributed functions, Static Web Apps continues to push the developer experience for frontend web app hosting forward.
Come discuss with us about these hybrid-rendering frameworks on the Static Web Apps community GitHub, we are always looking forward to hear about your experience with Static Web Apps. And get started building with Azure Static Web Apps!