The code below can be found in Nextjs13 I'm using an app router, I'm also using /src. What's wrong with keep calling getData?

Question

'use client';
import styled from 'styled-components';

import { Container } from '@/components/Atoms';
import authController from '@/controller/authController';

async function getData() {
    const res = await authController.getAllUser();

    return res;
}

export default async function Page() {
    const data = await getData();

    return (
        <Container>
            <Table>
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>이메일</th>
                </tr>
                {data?.map(data => {
                    return (
                        <tr key={data.id}>
                            <td>{data.phoneNumber}</td>
                            <td>{data.childAge}</td>
                            <td>{data.region}</td>
                        </tr>
                    );
                })}
            </Table>
        </Container>
    );
}

const Table = styled.table`
    border-collapse: collapse;
    width: 100%;
    th,
    td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    th {
        background-color: #f2f2f2;
        color: #333;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    tr:hover {
        background-color: #e2e2e2;
    }
`;

I don't know why I keep getting data as I become a re-render.

please help me..

I referred to the document below

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching