This post is a continuation of the previous post - <a href="https://www.jerrychang.ca/byte-sized/nextjs-13-thats-so-fetch" target="_blank" rel="nofollow noopener noreferrer">Next.js 13.4: That’s so fetch</a>.
That post was all about achieving static and dynamic pages via fetch method.
But what if you are not using fetch ?
What if... You are using something like prisma (a popular ORM) or some other library ?
This is where route segment configurations comes in.
The who now ?
Don’t worry this is a pretty new concept in Next.js 13.4.
The gist of it is you can export a variable within your route segments to change its behaviour.
What does route segments include ?
<ul>
<li>Page</li>
<li>Layout</li>
<li>Route handler</li>
</ul>
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/nextjs-13-4-route-segments.png" alt="Next.js 13.4: Route Segment" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Next.js 13.4: Route Segment</blockquote>
 </div>
</div>
And that would allow you to configure/change the behavior of these segments.
Let’s dive a little deeper into the details!
<h3 id="static-by-default"><a href="#static-by-default" aria-hidden="true" tabindex="-1"></a>Static (by default)</h3>
Just like the fetch configurations, these route segment configurations are static by default.
Here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

// You don’t need to add this - It will do this by default
export const dynamic = 'auto';

export default function Page() {
 return (
 /* Page content */
 )
}
</code></pre></div>
By default the segment will cache as much as possible, without the component going fully “dynamic” (which means it will always fetch new data).
Then if you want to make this route segment fully static, you can force it by using <code class="language-">force-static
</code>.
Here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

export const dynamic = 'force-static';

export default function Page() {
 return (
 /* Page content */
 )
}
</code></pre></div>
What Next.js will do here is it’ll render a static page by using empty values in the <code class="language-">headers
</code>, <code class="language-">cookies
</code> and <code class="language-">useSearchParams()
</code>
<blockquote class="common">
💡 Note:
This is like the getStaticProps method.
</blockquote>
📝 References:
<ul>
<li><a href="https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic" target="_blank" rel="nofollow noopener noreferrer">Next.js: Route Segement Config - dynamic</a></li>
</ul>
<h3 id="dynamic"><a href="#dynamic" aria-hidden="true" tabindex="-1"></a>Dynamic</h3>
By using this setting, we’re telling Next.js that we always want the latest data.
This is basically equivalent to <code class="language-">getServerSideProps
</code>.
So, every time someone visits this route segement (ie <code class="language-">Page
</code>), it’ll always have the latest data in the rendered page.
Here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

export const dynamic = 'force-dynamic';

export default function Page() {
 return (
 /* Page content */
 )
}
</code></pre></div>
<blockquote class="common">
💡 Note:
This is like the getServerSideProps method.
</blockquote>
📝 References:
<ul>
<li><a href="https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic" target="_blank" rel="nofollow noopener noreferrer">Next.js: Route Segement Config - dynamic</a></li>
</ul>
<h3 id="dynamic-ish"><a href="#dynamic-ish" aria-hidden="true" tabindex="-1"></a>Dynamic-ish</h3>
Like the fetch configurations, you can have static pages but configure it so it’ll update periodically.
This is really just Incremental Static Re-generation (ISR).
So, it’ll start off as a static page, then periodically, it’ll invalidate the cache and rebuild it to get the latest data.
And that is through another exported variable called <code class="language-">revalidate
</code>.
Here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

// No revalidation (Default)
export const revalidate = false;

// Always dynamically rendered 
export const revalidate = 0;

// Revalidate every day (in seconds) 
export const revalidate = 24 * 60 * 60;

export default function Page() {
 return (
 /* Page content */
 )
}
</code></pre></div>
📝 References:
<ul>
<li><a href="https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate" target="_blank" rel="nofollow noopener noreferrer">Next.js: Route Segement Config - revalidate</a></li>
</ul>
And... that’s really all there is for route segement configurations!
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: Route Segment Configurations