Nextjs: How to obtain shared data in nextjs application? Writing getInitialProps in app.js defeats the purpose of using nextjs

I want to fetch translations from AWS S3 bucket and put them in the context so that my whole application can use it and not just one page. Where shall I fetch this translation data? In app.js we can't use getStaticProps or getServerSideProps, and we are not suggested to use getInitialProps (I am getting confused to use it anyway as its documentation is not very clear), I saw below snippet on web, but I am not sure where would I get the prop I am looking for and where should I fetch the end-point in getInitialProps :

import React from 'react'
import App from 'next/app'
import { appWithTranslation } from '../i18n'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  // shall I fetch my data here and provide the prop as
  // const xx = fetch('url')?
  return { ...appProps, xx }
}

export default appWithTranslation(MyApp)

It opts out of automatic static generation when used in _app.js? what does it mean? Will I not be able to use any client side code if I use getInitialProps in app.js?