title: Cannot fetch data after refreshing the page in Next.js
body: <p>I am trying to create a simple Next.js page with the data fetched from backend. For fetching I am using useSWR.</p>
  <p>If I refresh the page or open it for the first time after running dev, I get a TypeScript error because the data.results (fetched object's data) object is not defined. Which made me believe that either the API is not working or the fetching functions are wrongly configured. Yet both of these are not the case.</p>
  <p>If I comment the 2 lines that have the fetched object (data.results), and refresh from browser, I can see an empty page, no surprises there. After that point if I uncomment
  console.log(<code>data.results[1].name</code>) and save the changes I can see the product's name in the browser console. Same goes for the second mention of data.results. So clearly, data fetching works because I can see the data in some situations. In this state, if I click the homepage button, then click the Prods button in the homepage to come back, it still works. It shows the data in console and also in the page. So as long as I don't refresh the the page it works.</p>
  <p>And after that(without commenting those 2 lines), if I refresh the page from the browser, I get the TypeError again.</p>
  <p><a href="https://i.stack.imgur.com/QhVz1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QhVz1.png" alt="Screenshot of TypeScript Error" /></a></p>
  <p>Before useSWR I tried, useEffect and useState for the same purpose but the same thing happened. I also used axiom but nothing changed. In conclusion, I am unable to create a simple page with the contents fetched from backend no matter how hard I tried. I feel like I am missing a fundamental knowledge. Before asking this question I went through pages of documentation but nothing.</p>
  <p>In the code below, I try to render a button to homepage and the name of the second product. I have comments near the 2 lines that I mentioned above that uses data.results. In the index.js there is only a button that links to this Prods page.</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import useSWR from 'swr'
  import Link from &quot;next/link&quot;
  import {Button} from '@mantine/core';
  
  const fetcher = async (url, headers) =&gt; await fetch(url, {'method': 'GET', headers}).then(res =&gt; res.json())
  function Prods() {
    const product_url = 'http://127.0.0.1:8000/api/product/'
    const headers = {
            'Content-type': 'application/json',
            'Authorization': `Token 9824eda0dd38b631b4aedf192899651cba91be53`
          }
    const { data, error } = useSWR([product_url, headers], fetcher)
  
    console.log(data.results[1].name) //if commented, refreshed and then uncommented it works.
    return (
      &lt;div&gt;
        &lt;Link href=&quot;/&quot; passHref&gt;
          &lt;Button className = &quot;m-1&quot;&gt;
            Homepage
          &lt;/Button&gt;
        &lt;/Link&gt;
        {/* {data.results[1].name} //if commented, refreshed and then uncommented it works. */}
      &lt;/div&gt;
    )
  }
  
  export default Prods
  </code></pre>