I need to set Cache-Control
header with a dynamic value in getInitialProps
method. I tried the below.
if(context.res){
context.res.setHeader('Cache-Control','My-Cache-Control');
context.res.setHeader('My-Header','My-Value');
}
But it looks looks like NextJs is overriding the header value before sending the response. Below is the cache-control
header value in response header in browser.
Cache-Control: no-store, must-revalidate
My-Header: My-Value
Let me know if anything is missing.
Make sure the returned object from getInitialProps is a plain Object and not using Date , Map or Set . For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router .
js - You can not use getInitialProps with getServerSideProps.
Addition of getServerSideProp and getServerSideProp is greatly desirable, since getInitialProps will be deprecated and most likely deleted from next. js .
Is there a difference between getInitialProps and getServerSideProps ? The main difference between the legacy getInitialProps and the newer getServerSideProps is how the function is used during transitions, when users click on a Link to visit different parts of your site.
Cache-Control
headers are overridden in development, so that pages do not get cached by the browser.
It will work in production (next build && next start
).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With