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:
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.