5

I want to fetch data using getInitialProps. I use isomorphic-unfetch lib.

import fetch from 'isomorphic-unfetch'

...My Component Page...

Component.getInitialProps = async () => {
  const res = await fetch(<path>, {method: 'GET', headers: {
    'Authorization': `bearer ${typeof Storage !== 'undefined' && localStorage.getItem('my_token')}`,
  }})
  const data = await res.data
  return {stuff: data}
}

It works accurately on client side however it returns 401 on server side. I think the problem is localStorage. LocalStorage is not accessible from the server. As I understand it, I need to wait until page has mounted. How to solve this problem?

Supplementary question, can I use the axios instead of isomophic-unfetch?

Arthur
  • 3,056
  • 7
  • 31
  • 61
  • 2
    Please check this SO. LocalStorage is an HTML5 implementation and not NodeJS. https://stackoverflow.com/questions/10358100/how-to-access-localstorage-in-node-js – aksappy Nov 14 '19 at 18:57
  • @aksappy, yeah, I've read this question. But is it possible to check on client side is `localStorage !== undefined` and then fetch data? It would be easier to use cookies.. – Arthur Nov 14 '19 at 19:04
  • If you wish to store something that is accessible from the Front-end and the back-end, you should use cookies. – Nicolas Nov 14 '19 at 19:05
  • 1
    To answer your supplementary question, yes. – Seth Nov 14 '19 at 19:08
  • @Nicolas, I use jwt and store it in localStorage so I can't use cookies – Arthur Nov 14 '19 at 19:08
  • @Seth, thanks. The main question has a higher priority :D – Arthur Nov 14 '19 at 19:09
  • @Arthur you could use Cookies instead, to store your JWT. it's as capable and accessible from the Server. If you don't want to do that, you might have to pass your JWT as a header to each request. checkout [this question](https://stackoverflow.com/questions/27067251/where-to-store-jwt-in-browser-how-to-protect-against-csrf) for more info on how to store your tokens. – Nicolas Nov 14 '19 at 19:10
  • Are you willing to wait until the page is mounted or is it a requirement that your data is accessible when statically rendered? – Seth Nov 14 '19 at 19:13
  • @Seth, yeah, it is not a problem if I wait a while. Ok, data, it's not difficult for me:D – Arthur Nov 14 '19 at 19:15
  • try with window.localStorage – Franklin'j Gil'z Nov 14 '19 at 19:22
  • 2
    Then I would suggest _not_ using `getInitialProps`, since it's a next.js-specific hook to enable data fetching for server-rendered/statically rendered pages. Just use the traditional `componentDidMount` approach. Alternatively, if you're using react-hooks, then make your request within a `useEffect` hook and set the data with `useState`. Though, this does kind of defeat the purpose of using next.js to begin with. – Seth Nov 14 '19 at 19:23
  • 1
    @Seth, ah, ok. Thank you for help! – Arthur Nov 14 '19 at 19:27
  • 1
    If you did want the benefit of pre-rendered pages, then you most likely have to leverage cookies as a storage medium for your JWT token. – Seth Nov 14 '19 at 19:29

0 Answers0