Moving the data fetch from render (useEffect) to SSR (getInitialProps)

index.js

Projects.getInitialProps = async ({ req }) => {
  // Prevent unnecessary refetching
  if (process.browser) {
    const { projects } = window.__NEXT_DATA__.props.pageProps
    if (projects && projects.length > 0) {
      return { projects }
    }
  }
  try {
    // Have the correct API url
    const pre = req
      ? `${req.headers['x-forwarded-proto'] || 'http'}://${req.headers[
          'x-forwarded-host'
        ] || req.headers.host}`
      : ''
    const result = await fetch(`${pre}/api/get-projects`)
    const { projects } = await result.json()
    return { projects }
  } catch (err) {
    return {
      projects: [],
      error: err.message || 'Unavailable. Refresh page?',
    }
  }
}