title: Problem with time when I navigate in my nextjs project
body: <p>I have a doubt in my nextjs project.</p>
  
  <p>I added a new route inside my header calls <code>/files</code> and I don't know why takes a long time to load the data when I want to return to the home.</p>
  
  <p>I console.log the request I and notice calls to my API and my INDEX twice, but I'm not sure if it's a problem.</p>
  
  <p>The endpoint with the data is a little slow, but I believe that if I call it inside my <code>pages/index</code> getInitialProps, the data it's loaded in server at the beginning, I am right? and if I am right why is it taking so long to show me the data again?</p>
  
  <p>Here is my code!</p>
  
  <p>Header</p>
  
  <pre><code>import React, { Component } from "react";
  
  class Header extends Component {
  
    render() {
      return (
        &lt;&gt;
          &lt;Navbar collapseOnSelect expand="lg" bg="light" variant="light"&gt;
              &lt;Navbar.Toggle
                aria-controls="responsive-navbar-nav"
                style={{ outline: "0", display: 'none' }}
              /&gt;
              &lt;Navbar.Collapse id="responsive-navbar-nav"&gt;
                &lt;Nav className="mr-auto"&gt;&lt;/Nav&gt;
                &lt;Nav&gt;
                  &lt;Link href="/" passHref&gt;
                    &lt;Nav.Link&gt;
                      Home
                    &lt;/Nav.Link&gt;
                  &lt;/Link&gt;
                  &lt;Link href="/files" passHref&gt;
                    &lt;Nav.Link&gt;
                      Files
                    &lt;/Nav.Link&gt;
                  &lt;/Link&gt;
                &lt;/Nav&gt;
              &lt;/Navbar.Collapse&gt;
          &lt;/Navbar&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default Header;
  </code></pre>
  
  <p>pages/index</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  
  /* Others */
  import Error from "./_error";
  import { getDataLatestEvents } from "../helper/api";
  
  /* Components */
  import MyComponent from "../components/MyComponent";
  
  /* Bootstrap Components */
  import Row from "react-bootstrap/Row";
  
  
  const Index = props =&gt; {
    console.log('index*************')
    const [contentData, setData] = useState([]);
    const res = props.data.data.data;  
  
    useEffect(() =&gt; {
      setData(res);
    }, [props]);
  
    if (props.statusCode !== 200) {
      return &lt;Error statusCode={props.statusCode} /&gt;;
    }
  
    return (
      &lt;&gt;
        &lt;Row&gt;
          &lt;StyledContainer&gt;
            &lt;MyComponent
              data={contentData}
            /&gt;
          &lt;/StyledContainer&gt;
        &lt;/Row&gt;
      &lt;/&gt;
    );
  };
  
  Index.getInitialProps = async ({ res }) =&gt; {
    try {
      let req = await getDataLatestEvents();
      return { data: req, statusCode: 200 };
    } catch (e) {
      res.statusCode = 503;
      console.log(`error /pages/index: ${e}`);
      return { data: null, statusCode: 503 };
    }
  };
  
  export default Index;
  </code></pre>
  
  <p>helper/api</p>
  
  <pre><code>import fetch from "isomorphic-unfetch";
  const BASE_URL = "https://myendpoint/api";
  
  
  export async function getDataLatestEvents() {
    const res = await fetch(`${BASE_URL}/eventos?latest`);
    let data = await res.json();
    console.log('API*************')
    return { data: data};
  }
  </code></pre>