In Next.js 13.4 and beyond, with app router (<code class="language-">/app
</code>), everything is static by default.
And static pages are great but sometimes we may not want static pages, rather we want it to be dynamic.
Developers will now have to explicitly opt-in to functionality in order to make the page dynamic.
When we refer to dynamic pages, we’re really talking about rendering the page every request.
The reason we may want this behavior is because the data on our page may change per request.
Some potential use cases:
<ul>
<li>
User related Page (Some sort of gated Dashboard - we definitely don’t want to cache this)
</li>
<li>
Latest content on a page
</li>
<li>
Serving different versions of the pages (At request time)
</li>
<li>
And many more
</li>
</ul>
So, dynamic pages are great because it gives us a lot of flexibility while the app is running.
One way to opt-in to dynamic pages is by simply using request time information.
What are those information... you may ask ?
Request time information:
<ul>
<li>
<code class="language-">cookies
</code> - <a href="https://nextjs.org/docs/app/api-reference/functions/cookies" target="_blank" rel="nofollow noopener noreferrer">Next.js: cookies</a>
</li>
<li>
<code class="language-">headers
</code> - <a href="https://nextjs.org/docs/app/api-reference/functions/headers" target="_blank" rel="nofollow noopener noreferrer">Next.js: headers</a>
</li>
<li>
<code class="language-">searchParams
</code> - <a href="https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional" target="_blank" rel="nofollow noopener noreferrer">Next.js: searchParams</a>
</li>
</ul>
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/nextjs-13-4-dynamic-functions-request-info.png" alt="Next.js 13.4: Opting in to Dynamic functions using request Information" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Next.js 13.4: Opting in to Dynamic functions using request Information</blockquote>
 </div>
</div>
Next.js will notice that you are referencing some request time information then it will make your whole route dynamic.
Let’s take a look at a few examples.
<h3 id="cookies"><a href="#cookies" aria-hidden="true" tabindex="-1"></a>Cookies</h3>
Opt into dynamic rendering by referencing a cookie value.
Here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

import { cookies } from 'next/headers'

export default function Page() {
 const userGroup = cookies.get('usergroup')
 return (
 /* Page content */
 )
}
</code></pre></div>
<h3 id="headers"><a href="#headers" aria-hidden="true" tabindex="-1"></a>Headers</h3>
Opt into dynamic rendering by referencing a header value.
Here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

import { headers } from 'next/headers'

export default async function Page() {
 const version = headers.get('X-Feature-Version')
 return (
 /* Page content */
 )
}
</code></pre></div>
<h3 id="searchparams"><a href="#searchparams" aria-hidden="true" tabindex="-1"></a>SearchParams</h3>
Opt into dynamic rendering by using the <code class="language-">searchParams
</code>.
Here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

async function getComment(id: number) {
 return fetch(`https://jsonplaceholder.typicode.com/comments/${id}`)
 .then((response) =&gt; response.json())
}

export default async function DogPage(props) {
 const commentId = props?.searchParams?.commentId ?? '1'
 const comment = await getComment(parseInt(commentId))
 return (
 /* Page Section*/
 )
}
</code></pre></div>
By simply referencing cookies, headers and searchParams (in props), it lets next.js know that this will be a dynamic page that needs to be re-rendered every request.
And... that’s really all there is for opting into dynamic rendering!
If you find this post helpful, be sure to share it! 👍

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Next.js 13.4: Dynamic Functions