When you upgrade to Next.js 13.4, you can continue as usual with the page router (<code class="language-">/page
</code>).
But what if you want to start using the app router <code class="language-">/app
</code> ?
Things like getServerSideProps and getStaticProps are now deprecated...
What now ?
You can still achieve the same behviors but just through different methods.
One of the ways to achieve these behaviors is through the fetch method.
Using Next.js’s fetch and the caching configurations we can achieve the static and dynamic rendering.
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/nextjs-13-4-fetch.png" alt="Next.js 13.4: Fetch" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Next.js 13.4: The different configurations when using fetch</blockquote>
 </div>
</div>
Let’s go through that in more detail!
<h3 id="fetch"><a href="#fetch" aria-hidden="true" tabindex="-1"></a>fetch</h3>
In the app router, all components (yes, all) will be a React Server Component (RSC) by default.
The result of that is when you run <code class="language-">next build
</code>, every page will be static.
So, the output of a page is a static HTML page.
<h4 id="1-fetch-static---default-behavior"><a href="#1-fetch-static---default-behavior" aria-hidden="true" tabindex="-1"></a>1. fetch (static - default behavior)</h4>
If you use fetch in your page component, it will just generate a static page.
here is an example:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

interface IPost {
 userId: number;
 id: number;
 title: string;
 body: string;
}

async function getPageData(): Promise&lt;IPost&gt; {
 const response: Response = await fetch('https://jsonplaceholder.typicode.com/posts');
 return response.json();
}

export default async Page() {
 const data = await getPageData();
 return (
 /* Render components with page data */
 );
}
</code></pre></div>
<blockquote class="common">
 💡 Note: 
This is like the getStaticProps method.
</blockquote>
<h4 id="2-fetch-incrementally-re-validate-the-data"><a href="#2-fetch-incrementally-re-validate-the-data" aria-hidden="true" tabindex="-1"></a>2. fetch (incrementally re-validate the data)</h4>
This will cache the data for the specified amount of time (in seconds), then perform a re-fetch for the new data.
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

// omitted code ✨

async function getPageData(): Promise&lt;IPost&gt; {
 const response: Response = await fetch('https://jsonplaceholder.typicode.com/posts', {
 next: {
 revalidate: 3600 // 60 minutes (unit in seconds)
 }
 });
 return response.json();
}
</code></pre></div>
<blockquote class="common">
 💡 Note: 
This is like the getStaticProps method with Incrementally Static Re-generation (ISR).
</blockquote>
<h4 id="3-fetch-dynamic"><a href="#3-fetch-dynamic" aria-hidden="true" tabindex="-1"></a>3. fetch (dynamic)</h4>
If you want to refresh the data every request, you can use this:
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>// page.tsx

// omitted code ✨

async function getPageData(): Promise&lt;IPost&gt; {
 const response: Response = await fetch('https://jsonplaceholder.typicode.com/posts', {
 cache: 'no-store',
 });
 return response.json();
}
</code></pre></div>
<blockquote class="common">
💡 Note: 
This is like the getServerSideProps method.
</blockquote>
Next.js will apply these effects (static or dynamic) automatically when you run build as long as you provide the caching configurations to fetch.
And... that’s it!
The best way to get familiar with these settings is to get a basic setup going, and try it yourself!
Just set it on the page, and run <code class="language-">next build
</code>, it’ll output the results.
If you find this post helpful, be sure to share it! 👍
<hr />
You may ask: well, I am not using fetch and I don’t intend on using it - what now ?
Next.js has got you covered too - the solution is called segment configurations, check out that post here.

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Next.js 13.4: That’s so fetch