title: NextJs useEffect triggers every time I route
body: <p>I am building a nextjs blog app.</p>
  <p>In the current blog layout, I managed to fetch data on my sidebar (I need it to show my &quot;recent posts&quot; there) using the useEffect/fetch (because getInitialProps works only under Pages) but it triggers whenever I route between pages. (it goes blank for a sec and reloads the post titles)</p>
  <p>Is there a way to disable this behaviour after the initial load and create a constant or smth? I used the &quot;[]&quot; method but still no luck:</p>
  <pre class="lang-js prettyprint-override"><code>  const [posts, setPosts] = useState([])
  
    useEffect(()=&gt;{
      const fetchData = async () =&gt; {
        const res = await fetch('/api/posts');
        const {data} = await res.json();
        setPosts(data)
      }
      fetchData()
    }, []);
  </code></pre>
  <p>Or is there a better way to fetch data on my sidebar? This is the only solution I managed to make it work but it is half-working.</p>