Fetch data on both client and server side in NextJS

I need to fetch data with a third-party API in some of my components in the NextJS project

I want the server to pre-render the component using that API for SEO. but after that while user is interacting with the app, the component props should fetch on the client-side.

I'm able to implement this behavior by using NextJS getInitialProps method. but in official NextJS documentation it's recommended to use getStaticProps or getServerSideProps .

I want to know What is the recommended way to do this.