Why is getInitialProps returning a deserialized Date object from the server but the browser receives a serialized string?

[hgezim]

getInitialProps returns notifications which are fetched from an API:

  public static async getInitialProps({
    api,
  }: // store,
  AppContext): Promise<OwnProps> {
    const notifications = await this.fetchLatestNotification(api);
    console.log('NotificatioanPage -> getInitialProps -> notifications');
    notifications.forEach((list) => {
      Object.keys(list).forEach((key) => console.log(`${key} type: ${typeof (list as any)[key]}`));
    });

    return {
      api,
      notifications,
    };
  }

The logs output on the server are here:

NotificatioanPage -> getInitialProps -> notifications
id type: number
createdAt type: object
updatedAt type: object
images type: object
title type: string
body type: string
linkData type: object

createdAt and updatedAt have object as type (likely Date but that's not important).

When we look at notifications property on render, though, it's a different story:

  public render() {
    const { api, notifications } = this.props;

    console.log('NotificatioanPage -> render -> notifications');
    notifications.forEach((list) => {
      Object.keys(list).forEach((key) => console.log(`${key} type: ${typeof (list as any)[key]}`));
    });

    return (
      //...
      )
    }
  }

The log output on the browser are:

NotificatioanPage -> render -> notifications
id type: number
createdAt type: string
updatedAt type: string
images type: object
title type: string
body type: string
linkData type: object

Why are the browser logs for createdAt and updatedAt string type instead of object like we see on server?

Using Nextjs 9.0.5.