How can I safely replace getInitialProps with getServerSideProps / getStaticProps

Question

The following sentence is very familiar to all of us: You should not use getInitialProps, but getServerSideProps instead. I have already build my app using getInitialProps and now I'm facing the following question: "Should I replace getInitialProps to getServerSideProps?", and if so, how should I do it in the right way without damaging my app?

Today, I'm using getInitialProps in a few important places:

1. In my custom _app.js for react-redux:

class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        return {
            pageProps: {
                ...(Component.getInitialProps
                    ? await Component.getInitialProps(ctx)
                    : {})
            }
        };
    }

    render() {
        const { Component, pageProps, store } = this.props;
        return (
            <>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </>
        );
    }
}

export default withRedux(initStore)(withReduxSaga(MyApp));

2. In a few HOC for pages: check that the user is authenticated (otherwise redirect), initialize redux store if a user is authenticated, fetching user info.

How can I replace getInitialProps with getServerSideProps?

Any advice would be appreciated, Thanks