Dealing with SSR Cashing (NextJS)

Chris_Heinzlast year

12

• 

  thisisnotchrislast year

  @Chris_Heinz Good morning! Another use recently solved caching issues they had with SSR / Next + Payload

  
  

  
  

  Let me know if anything in this thread could be a possible solution:

  https://discord.com/channels/967097582721572934/1100027091296190644
• 

  Chris_Heinzlast year

  Thanks for reaching out @thisisnotchris . Unfortunately the thread did not really help. I tried the official example from nextjs

  https://github.com/vercel/next.js/tree/canary/examples/ssr-caching

  . Setting the response header manually within getServerSiveProps

  
  

    res.setHeader(
      'Cache-Control',
      'public, s-maxage=10, stale-while-revalidate=59'
    )

  
  

  then I logged the current Time in the same component to check if caching is working in production. As I am seeing a change in the logged time when I refresh the page I assume that there is no caching happeing. From the next docs: "Note: Your deployment provider must support caching for dynamic responses. If you are self-hosting, you will need to add this logic yourself using a key/value store like Redis. If you are using Vercel, Edge Caching works without configuration."

  
  
  

  So I guess the problem is me hosting on northflank without handling caching by myself. So the question is, is there a better option for hosting witch cache control out of the box or alternatively an easy way to handle caching by myself. I also tried using cacheable-response package

  https://www.npmjs.com/package/cacheable-response

  which worked for the first two refreshs and afterwards I am getting a blank page returned from the server ...

• 

  thisisnotchrislast year

  hmmm

  
  

  
  

  This may require some help from the Payload team

• 

  Chris_Heinzlast year

  I know that it is not directly a payload issue but more specify to nextjs anyway as a lot of people are using them in combination and even using the official next-custom-server template from payload. I was expecting more people to have similar problems. I also found this project which might offer a solution and I will try it out when I got more time tomorrow.

  https://github.com/next-boost/next-boost/tree/master

  . They also got some examples with express.

  
  

  
  

  Somehow I also couldn’t make it work with next-boost my last option would be to set up a redis cache which feels pretty much like overengineering for a simple landing page. I’m kind of stuck at the moment and would love to hear an opinion from someone who contributed to the template. Hope it is okay to tag you here @jarrod69420 🙂

• 

  jarrod69420last year

  I would imagine setting the headers would do the trick. Does it work with a standard nextJS template deployed?

• 

  Chris_Heinzlast year

  Thought the same. I just tried to deploy it the headers are set but the content of the page is not getting cached

  https://p02--next-cache-demo--jtxc9fggxygw.code.run/
  

  
  

  I tried to deploy the same code to vercel

  https://starter-dun-zeta.vercel.app/

  where caching works as expected so I guess I need to handle caching all by myself or rather use the more recent next-payload repo. I wonder where others deploy the next-custom-server template and if cashing works for other hosting providers out of the box...

• 

  jarrod69420last year

  I’ve deployed on digital ocean before without problems. But I have not tested this cache header scenario

• 

  Chris_Heinzlast year

  I deployed my site (with payload) as a digital ocean app where SSR caching works out of the box!