How to handle a large public/data file in nextjs

Question

More specifically, what's the best way to handle the data fetching for a particular page in my application. My components relies on a ~50mb json file, which is a basically an array of cities and states that allows the users to search through.

Right now I just fetch the data in the main component in a useEffect. To my knowledge nextjs see this as a page that should be client side rendered since I have no getStaticProps or getServerSideProps.

The component also display users data that is fetched from firestore once the component checks the user is authenticated. Once the data is fetched, the components uses state to track the interaction and performs no more reads, only writes to the database.

Currently, the page takes 3-4 seconds to load each time the component is rendered because of this file. I was wondering what the best way to cut down on the loading time of this page/componenet?

Ive looked at getServerSideProps to fetch the data file, but since I'm also fetching user data on the client side would that negate the server side render? Incremental static generation doesn't seem like a good fit because the data is fetched only once.

Or would it be better to remove the json file somehow and have the Search Component call an API that does it on the backend? If so I'm not quite sure how I would go about doing that.

I know a general question like this isn't the best place on Stack overflow, but I haven't quite found something that deals with the problem I'm facing. Maybe I'm just not looking in the right place. I'm not looking for an exact solution, just a link to documentation, a general overview, or anything that I could look farther into. Any help would be greatly appreciated!