Next.js Multiple Domains

With Next.js, you can combine the benefits of static with dynamic server-rendered content. For example, let's say you have multiple domains and want to serve a different static page for each domain.

Currently, the getStaticProps API does not support header matching. Fortunately, we can utilize stale-while-revalidate in combination withgetServerSideProps. Let's assume we have two domains:

• multi-domain-first.vercel.app
• multi-domain-second.vercel.app

pages/index.js uses getServerSideProps to forward the request header to the React component, as well as setting a response header. This cache-control header uses stale-while-revalidate to cache the server response. This allows you to generate static pages for any number of host headers.

You're current viewing the host multi-domain-second.vercel.app.

This value is considered fresh for one second (s-maxage=1). If a request is repeated within the next second, the previously cached value will still be fresh. If the request is repeated between 1 and 60 seconds later, the cached value will be stale but still render (stale-while-revalidate=59).

In the background, a revalidation request will be made to populate the cache with a fresh value. If you refresh the page, you will see the new host shown.