getServerProps does not fetch the data

Question

I am working on an real estate site through a tutorial since I am learning NextJs and for apartments filter it uses getServerSide as common, the code I use is :

//to get the query parameters
import { useRouter } from 'next/router';
import Property from '../Components/property';
import { baseUrl, fetchApi } from '../utils/api';


export const getServerProps = async ({ query }) => {
const data = await fetchApi(
`${baseUrl}/properties/list?purpose=${query.purpose}`
);

 return {
   props: {
     properties: data.hits,
   },
 };
};

 const Search = ({ properties }) => {
 const { query } = useRouter();

 return (
    <Flex flexWrap="wrap" justifyContent="center">
     
     
  
    {properties.length === 0 && (
    <Image src="/images/noResult.png" alt="no result" />
    )}
  
  </Flex>
 );
};
 export default Search;

but I have got the following error always

Cannot read properties of undefined (reading 'length')
 
> 46 |       {properties.length === 0 && (
     |                  ^
 

I use the Rapidapi as backend as following

   import axios from 'axios';
   import { headers } from '../next.config';

   export const baseUrl = ' 
    https://bayut.p.rapidapi.com';
    export const fetchApi = async (url) 
    => {
  const { data } = await axios.get(url, 
   {
    headers: {
  'X-RapidAPI-Host': 
  'bayut.p.rapidapi.com',
  'X-RapidAPI-Key':
   '4e434584c8mshb5054fa05cf00bcp1ebfd5jsne2b72945b045',
   },
  });
 return data;
};