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.
getStaticProps API does not support header matching. Fortunately, we can utilize
stale-while-revalidate in combination with
getServerSideProps. Let's assume we have two domains:
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
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 (
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.