Get user's credential before rendering to prevent showing empty username.

nextjs_SSR_bug_sample_home_page.jsx

/* /page/home.jsx */
import axios from '@util/axios'

const Home = ({ user }) => {
  return (
    <h1>{user.name}</h1>
  )
}

Home.getServerSideProps = async ({ req }) => {
  // Set shared cookie for 
  Cookies.shared = Cookies.new(req.headers.cookie)

  const { data } = await axios.get('https://mock.bugfree.app/api/me')
  return {
    props: {
      user: data,
    },
  }
}

export default Home

------

/* /util/axios.js */
import Cookies from './cookie'
import originalAxios from 'axios'

export const axios = originalAxios.create()

// Customized axios with interceptor to add Authorization content to header for every requests.
axios.interceptors.request.use(config => {
  config.headers = {
    authorization: `Bearer ${Cookies.shared.get('user-token')}`,
    ...config.headers,
  }

  return config
})

export default axios

------

/* /util/cookie.js */
import Cookies from 'universal-cookie'

export const cookie = {
  new(cookieString) {
    return new Cookies(cookieString)
  },
  set shared(value) {
    this._cookie = value
  },
  get shared() {
    if (!this._cookie) {
      this._cookie = new Cookies()
    }
    return this._cookie
  },
}
export default cookie