make request on page load

pages/api/hello.ts

-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string;
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: 'John Doe' })
-}

pages/private-tags.tsx

@@ -2,8 +2,17 @@ import React from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head'
 
+import fetch from 'api/utils/fetch';
+
 import PrivateTags from 'ui/pages/PrivateTags';
 
+export async function getServerSideProps() {
+  const response = await fetch('/account/v1/user/tags/address')
+  const data = await response.json()
+
+  return { props: { data } }
+}
+
 const PrivateTagsPage: NextPage = () => {
   return (
     <>

ui/pages/PrivateTags.tsx

@@ -8,7 +8,6 @@ import {
   TabList,
   TabPanel,
   TabPanels,
-  Button,
 } from '@chakra-ui/react';
 
 import Page from 'ui/shared/Page/Page';
@@ -16,16 +15,10 @@ import PrivateAddressTags from 'ui/privateTags/PrivateAddressTags';
 import PrivateTransactionTags from 'ui/privateTags/PrivateTransactionTags';
 
 const PrivateTags: React.FC = () => {
-
-  const handleClick = React.useCallback(async() => {
-    await fetch('/api/account/private-tags/address');
-  }, [])
-
   return (
     <Page>
       <Box h="100%">
         <Heading as="h1" size="lg" marginBottom={ 8 }>Private tags</Heading>
-        <Button onClick={ handleClick }>click</Button>
         <Tabs variant="soft-rounded" colorScheme="blue" isLazy>
           <TabList marginBottom={ 8 }>
             <Tab>Address</Tab>