title: Next.js Dynamic Page using useSWR
body: <p>I want to create dynamic pages based on the ID of a Saloon profile using useSWR and useRouter, but the data loads in after the pages are rendered.</p>
  <p>This is my code:</p>
  <pre class="lang-js prettyprint-override"><code>import useSWR from &quot;swr&quot;;
  import { useRouter } from &quot;next/router&quot;;
  
  const fetcher = (url) =&gt; fetch(url).then((res) =&gt; res.json());
  
  export default function FindSaloonProfile() {
    const router = useRouter();
    const { id } = router.query;
    const { data, error } = useSWR(
      id ? `/api/getSaloons` : null,
      id ? fetcher : null
    );
  
    if (error) return &lt;div&gt;failed to load&lt;/div&gt;;
    if (!data) return &lt;div&gt;loading...&lt;/div&gt;;
  
    return &lt;&gt;Hello {data.name} &lt;/&gt;;
  }
  </code></pre>
  <p>If I <code>console.log(data)</code>, it starts getting <code>undefined</code> and loads in the data afterward, but then it is too late, as the page is already rendered.</p>
  <p><a href="https://i.stack.imgur.com/pwbgb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pwbgb.png" alt="console" /></a></p>
  <p>What do I do wrong?</p>