update

src/app/tags/page.tsx

@@ -0,0 +1,26 @@
+import { Tag } from '../../models/tag';
+import { getTags } from '../../api/tags';
+import { getRequestContext } from '../../utils/requestContext';
+import { Renderer } from './renderer';
+
+export default async function Page(ctx: any) {
+  const { props } = await get(ctx);
+  return <Renderer {...props} />;
+}
+
+export async function get(ctx: any) {
+  const response: Response = await getTags(getRequestContext(ctx));
+  // ctx.res.statusCode = response.status;
+
+  let tags: Array<Tag> = [];
+  if (response.status === 200) {
+    tags = await response.json() as Array<Tag>;
+  }
+
+  return {
+    props: {
+      statusCode: response.status,
+      tags: tags
+    }
+  }
+}

src/app/tags/index.tsx → src/app/tags/renderer.tsx

@@ -1,13 +1,15 @@
+'use client';
+
 import HeadMetaComponent from '../../components/headmeta';
 import CoverWithNavigationComponent from '../../components/cover/withNavigation';
 import TagsComponent from '../../components/tags';
-import { Tag } from '../../models/tag';
 import { defaultRobotsMeta } from '../../../config';
-import { getTags } from '../../api/tags';
-import { getRequestContext } from '../../utils/requestContext';
 import PlanePage from '../../components/planePage';
 
-export default function Page({ statusCode, tags }) {
+export const Renderer: React.FunctionComponent<{
+  statusCode,
+  tags
+}> = ({ statusCode, tags }) => {
   if (statusCode !== 200) {
     return <PlanePage
       title={statusCode.toString()}
@@ -35,20 +37,3 @@ export default function Page({ statusCode, tags }) {
     </>
   )
 }
-
-export async function getServerSideProps(ctx: any) {
-  const response: Response = await getTags(getRequestContext(ctx.req));
-  ctx.res.statusCode = response.status;
-
-  let tags: Array<Tag> = [];
-  if (response.status === 200) {
-    tags = await response.json() as Array<Tag>;
-  }
-
-  return {
-    props: {
-      statusCode: response.status,
-      tags: tags
-    }
-  }
-}