Next.js: fetch inside getInitialProps being executed client side

[burgerzzz]

I have the following page, pages/article.js:

import React from 'react';
import Head from 'next/head';
import 'isomorphic-fetch';

import Page from '../layouts/gethelp.v3';
import Link from '../components/Link';

export default class extends React.Component {
  static async getInitialProps () {
    // eslint-disable-next-line no-undef
    const res = await fetch(`https://site.com/article/27`, {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Authorization': 'Basic dXNlcm5hbWU6cGFzc3dvcmQ='
      }
    });

    const json = await res.json();

    return { article: json }
  }

  render() {
    const {
      summary,
      body
    } = this.props.article;

    return (
      <Page>
        <div className="container">
          <h3>{summary}</h3>
          <p dangerouslySetInnerHTML={{__html: body}}></p>
        </div>
      </Page>
    );  
  }
}

I have an index.js page as well:

import Page from '../layouts/gethelp.v3';
import Link from '../components/Link';

export default () => (
  <Page>
    <div className="articles">
      <h2>Articles</h2>

      <hr />

      <ol>
        <li><Link href="/article">Article</Link></li>
      </ol>
    </div>
  </Page>
);

When I navigate directly to /article (by typing the URL or hitting refresh on that page), the page loads fine and the fetch request is completed on the server, as I can't see anything in the network log on the client.

However, if I'm on the index page and I click on the link pointing to /article, then I get the errors below.

If I try passing the credentials through the URL, ie; user:[email protected], then I receive the following error, showing it's being executed on the client:

Update:
Navigating directly to /article loads the content on the server and passes to the client, as expected, but navigating to / (index.js) from a link on /article and then navigating back via the browser back button causes the following errors as well.

[mikenikles]

Hey @burgerzzz, this looks like you need to deal with CORS settings on the server-side. Do you have control over the backend? If so and you use Node.js, have a look at https://github.com/expressjs/cors.

[burgerzzz]

@mikenikles Do you mean on the API side? That's not the issue. The reason I'm confused is because the communication succeeds and I get a response when the request is executed "server-side" (ie; executed via getInitialProps via next.js). I get a response both when using credentials through the URL and via Basic Auth.

The issue is the article page executes getInitialProps on the client side, which is very bad, obviously because you wouldn't want your "server side" code to be executed on the client.

[arunoda]

@burgerzzz We do that, when you navigate your page in the client side.
That's why we do it the client side only when navigating via client side.

As @mikenikles said, cors might be the issue.
Anyway, you can always check for the client and server in the getInitialProps and do anything you like.

Some info about data fetching can be found here: https://learnnextjs.com/basics/fetching-data-for-pages

[burgerzzz]

@arunoda so do I need to not use ? How do I navigate via the server side? It's obviously not secure to share server side code on the client. Can you give an example of what you mean (I can check for the client and server and do anything I like?)

I went through the example, https://learnnextjs.com/basics/fetching-data-for-pages/fetching-batman-movies, and there's nothing that points me in any direction or another different then where I'm at now.

[sergiodxa]

It's not insecure to fetch data from your API client side, every piece of code in your Next.js app should be universal, that mean, always think you code is going to be executed either server and client side.

If you want to only navigate server side then use normal links (<a>) instead of next/link, that way it's going to reload the page, but if you do that then the usage of React doesn't make any sense, use Django, Rails, Laravel, Express, etc. and create a simple app with server routes and pages reloads.

The whole point of using React and Next.js is having a server rendered page for the first access and client rendered pages (with data fetch) for client navigation.

[burgerzzz]

Okay, I understand @sergiodxa, I will move my insecure API requests into an API middle layer.

[nathanqueija]

@burgerzzz Did you get it to work? Do you have an example? I am facing the same situation.

[lacymorrow]

I'm having this error as well, I receive the TypeError: Fetch when browsing to links from the client side.

I have an API call in getInitialProps which I think is the culprit and CORS may be the issue. How can I go about allowing the client-side to access my API endpoint?

project is lacymorrow/init-next