Is it anti-pattern to handle getServerSideProps api requests with redux-thunk then access it's data in page with useSelector?

Question

In next.js We can request to api in getServerSideProps and pass data to page through props like this :

method 1: (next default approach)

const Page: NextPage = ({page}) => {
  return <div>{JSON.stringify(data)}</div>;
};

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

I work in large scale project So I want to manage all server and client request only using thunk and then store it to redux and use in page like this:

method 2: (with next-redux-wrapper)

import React from 'react';
import {NextPage} from 'next';
import {useSelector} from 'react-redux';
import {wrapper, State, fetchData } from '../store';

const Page: NextPage = () => {
  const {data} = useSelector(state => state);
  return <div>{JSON.stringify(data)}</div>;
};

export const getServerSideProps = wrapper.getServerSideProps(store => ({req, res, ...etc}) => {
  store.dispatch(fetchData());
});

export default Page;

I want to know which is better approach ? Is it anti-pattern to use second approach to store all pre-rendered data and client side state of app in redux?