title: Internal API fetch with getServerSideProps? (Next.js)
body: <p>I'm new to Next.js and I'm trying to understand the suggested structure and dealing with data between pages or components.</p>
  <p>For instance, inside my page <code>home.js</code>, I fetch an internal API called <code>/api/user.js</code> which returns some user data from MongoDB. I am doing this by using <code>fetch()</code> to call the API route from within <code>getServerSideProps()</code>, which passes various props to the page after some calculations.</p>
  <p>From my understanding, this is good for SEO, since props get fetched/modified server-side and the page gets them ready to render. But then I read in the Next.js documentation that you should not use <code>fetch()</code> to all an API route in <code>getServerSideProps()</code>. So what am I suppose to do to comply to good practice and good SEO?</p>
  <p>The reason I'm not doing the required calculations for <code>home.js</code> in the API route itself is that I need more generic data from this API route, as I will use it in other pages as well.</p>
  <p>I also have to consider caching, which client-side is very straightforward using SWR to fetch an internal API, but server-side I'm not yet sure how to achieve it.</p>
  <p><code>home.js</code>:</p>
  <pre><code>export default function Page({ prop1, prop2, prop3 }) {
          // render etc.
  }
  
  export async function getServerSideProps(context) {
    const session = await getSession(context)
    let data = null
    var aArray = [], bArray = [], cArray = []
    const { db } = await connectToDatabase()
  
    function shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex;
      while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }
      return array;
    }
  
    if (session) {
      const hostname = process.env.NEXT_PUBLIC_SITE_URL
      const options = { headers: { cookie: context.req.headers.cookie } }
      const res = await fetch(`${hostname}/api/user`, options)
      const json = await res.json()
      if (json.data) { data = json.data }
  
      // do some math with data ...
      // connect to MongoDB and do some comparisons, etc.
  </code></pre>