Right here we’re analyzing the various kinds of pre-rendering an internet site and its mixture with a CDN.
Static Web site Technology
Each single web page of an internet site is first constructed after which uploaded to a CDN. The perfect a part of that is that, as the web site is static, the person doesn’t need to work together with the server. The CDN can instantly return the static generated web site, so the person will get a quick response.
The drawback is that each time you need to replace the web site it’s important to construct the entire web site once more and add it to the CDN. This prices cash.
Server Facet Rendering with out CDN
Pages are constructed on demand with Server Facet Rendering. When a person requests a web page the person has to attend till the web page is constructed and returned from the server. Due to this, response time is gradual.
Each go to to a web page generates a construct. Compared to Static Web site Technology the place each web page is all the time constructed, right here solely the pages which might be visited are constructed. If nobody visits a web page, it’s by no means constructed.
The drawback is that for each request we’ve got to construct the web page.
Server Facet Rendering with CDN
On this case the primary customer of a web page requests the web page to the CDN and the CDN requests it to the server which builds it and returns it again. However for the second customer the CDN will have already got the web page at cache and might instantly return it with out producing a brand new construct.
The issue right here is that each subsequent customer goes to obtain the construct that was generated for the primary customer. What occurs if the web page is stale?
With max-age we are able to management how lengthy the web page may be cached. When the web page is stale, the CDN will request a brand new construct on the subsequent request after max-age. Relying on the type of the web page we might set a unique max-age.
We are able to mix max-age with s-maxage. The CDN will cache a web page utilizing s-maxage as a substitute of max-age whether it is current. Consumer’s browser will ignore s-maxage. This may be very helpful if we purge the web site pages within the CDN when they’re rebuilt.
As we do not have management over the person’s browser, we should always have a max-age that’s decrease than the s-maxage, in any other case, we might have an up to date model of a web page within the CDN which the person would by no means request as a result of the person’s browser had an older model which might be nonetheless legitimate based on max-age.
For instance, we might set a max-age of 1 minute or sooner or later and a s-maxage of 1 yr. This manner the person would request the web page to the CDN incessantly and the CDN would by no means request a brand new construct as a result of based on s-maxage the web page would nonetheless be legitimate. We’d replace the cache on the CDN by purging the earlier web page and importing the brand new one.
Incremental Static Web site Regeneration
Initially the entire web site is constructed and uploaded to the CDN as with Static Web site Technology. However right here if a person requests a web page the CDN will return the present cached web page and it’ll additionally request to the server a brand new construct of solely that web page. This manner, the subsequent person will get the brand new construct and the CDN will once more request a brand new one to the server.
Each person will get a quick response and solely the pages which might be requested are up to date.
This can be a approach utilized by Subsequent.js, I like to recommend studying their documentation to get a greater understanding of this.
Server Facet Rendering with Stale Whereas Revalidate
stale-while-revalidate may be added to the cache-control header. What does it do? If a request comes after max-age the CDN returns a stale model of the web page whereas the server is constructing a recent one. stale-while-revalidate specifies in seconds for the way lengthy can the stale model be returned.
The primary time a person requests a web page will probably be generated within the server and uploaded to the CDN. If a brand new request comes earlier than max-age then the CDN will simply return it. If a request comes after max-age then the CDN will return the stale model however this time it’ll request the server a brand new recent copy. Each person that requests the web page whereas it’s being constructed will get the stale model.
If after max-age a request comes and stale-while-revalidate has additionally handed, then the CDN will not return a stale model and it’ll wait till a brand new model is generated within the server.
From the person’s perspective it’s precisely the identical as Incremental Static Web site Regeneration. Solely that right here we do not have to construct the entire web site for the primary deployment, the primary customer will set off the construct of the web page that he is visiting.
