TIL: Using next/headers will opt your route into dynamic rendering.

In hindsight, this feels pretty obvious. But, I spent 20 minutes trying to track down why exactly a page wasn't pre-rendering like I had expected it to. I have some code in one of my pages that throws an error page if you're requesting the page from any IP other than our home IP (this is for a household info screen):

const header = headers();
const ip = header.get('x-forwarded-for');

if (!['1.2.3.4', '::1'].includes(ip || '')) {
  return notFound();
}

Sure enough, removing that reverts back to Next.js's typical app-router caching behavior.

The docs are also quite clear on this, which is nice:

headers is a Dynamic API whose returned values cannot be known ahead of time. Using it in will opt a route into dynamic rendering.

Reply by email