Dynamic routing with a large number of products for Azure Static Web Apps Next and React

Question

I am trying to implement dynamic routing for my Azure Static Web Apps Next and React app, but I have millions of products that I cannot pre-generate static pages for using getStaticPaths and getStaticProps. Does anyone have any suggestions for the best approach in this situation? Here is a related question I found on the topic: https://learn.microsoft.com/en-us/answers/questions/1361860/dynamic-routing-for-azure-static-web-apps-in-next

I pasted the question here so that people can understand better.

PROBLEM:

On a dynamic route with NextJS/ReactJS app. /apps/products/[id] when I refresh the page after deployment to Azure Static web app, Azure simply does not recognize it.
If I have a million products, I cannot simply register all the routes using getServerSideProps or getServerSidePaths.

What is the best alternative to the above functions? How can I continue using the above routes with Azure Static Web Apps ?

Answer 1

Regardless of the approach, caching is critical:

• Utilize Azure's global CDN to cache static assets and even HTML pages at the edge, closer to your users, for faster load times.
• For dynamic data fetching, consider client-side caching strategies to reduce redundant requests for the same data.

In conclusion, given the scale of your project, a hybrid approach utilizing ISR for the majority of your static content, supplemented with SSR, Azure Functions for API routes, and client-side data fetching for the most dynamic elements, would likely serve you best.

Azure Static Web Apps support deploying hybrid Next.js websites, which allow for dynamic, static, and incremental rendering of pages and components. This model supports all Next.js features, including dynamic routing, server components, and more. It offers the flexibility to dynamically render pages based on user requests or statically for optimal performance​

https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs

SSR and ISR for Next.js are now supported by Azure Static Web Apps, allowing for effective page rendering and dynamic content updates. SSR is appropriate for pages that need real-time data because it enables you to pre-render pages server-side for each request. However, ISR enables you to update static content after deployment without having to completely rebuild the website.​

https://techcommunity.microsoft.com/t5/apps-on-azure-blog/extending-next-js-support-in-azure-static-web-apps/ba-p/3627975

Answer 2

@Naveed Butt I will try to help answer your follow up questions.

getServerSideProps is a great option for dynamic data fetching in Next.js. It allows you to fetch data on the server and pass it to the page as props. Here's an example of how you can use getServerSideProps to fetch dynamic data for a product page:

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const { id } = params;
  const product = await fetch(`https://example.com/products/${id}`).then((res) => res.json());

  return {
    props: {
      product,
    },
  };
};

function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductPage;

In this example, getServerSideProps fetches the product data from an external API based on the id parameter in the URL. The fetched data is then passed to the ProductPage component as props.

You can also use getServerSideProps to fetch data from a database or any other data source. Just replace the fetch call with your own data fetching logic.