[optimize] use next-ssr-middleware cache

.github/workflows/main.yml

@@ -15,12 +15,12 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - uses: actions/setup-node@v3
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
         with:
-          node-version: 14
+          node-version: 18
           cache: pnpm
 
       - name: Install Dependencies

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-slim
+FROM node:18-slim
 
 USER root
 

package.json

@@ -6,40 +6,41 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "file-type": "^18.5.0",
-    "idea-react": "^1.0.0-beta.1",
+    "idea-react": "1.0.0-rc.10",
     "koajax": "^0.8.4",
     "lodash": "^4.17.21",
     "mobx": "^5.15.7",
-    "mobx-i18n": "^0.3.14",
-    "mobx-lark": "^1.0.0-beta.6",
+    "mobx-i18n": "^0.3.15",
+    "mobx-lark": "1.0.0-rc.2",
     "mobx-react": "^6.3.1",
     "mobx-restful": "^0.6.5",
-    "mobx-restful-table": "^1.0.2",
+    "mobx-restful-table": "^1.0.4",
     "next": "^12.3.4",
+    "next-ssr-middleware": "^0.5.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.7.4",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^17.0.2",
-    "web-utility": "^4.0.0",
-    "webpack": "^5.85.1"
+    "web-utility": "^4.1.0",
+    "webpack": "^5.88.2"
   },
   "devDependencies": {
     "@octokit/openapi-types": "^17.2.0",
-    "@types/lodash": "^4.14.195",
-    "@types/node": "^16.18.34",
+    "@types/lodash": "^4.14.196",
+    "@types/node": "^18.17.3",
     "@types/react": "^17.0.60",
-    "eslint": "^8.42.0",
-    "eslint-config-next": "^12.3.4",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-next": "^13.4.13",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.2",
-    "lint-staged": "^13.2.2",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
+    "lint-staged": "^13.2.3",
     "next-pwa": "~5.6.0",
-    "next-with-less": "^2.0.5",
-    "prettier": "^2.8.8",
+    "next-with-less": "^3.0.1",
+    "prettier": "^3.0.1",
     "ts-node": "^10.9.1",
-    "typescript": "~5.1.3"
+    "typescript": "~5.1.6"
   },
   "prettier": {
     "singleQuote": true,

pages/api/core.ts

@@ -1,18 +1,7 @@
 import { HTTPError } from 'koajax';
-import { parseLanguageHeader } from 'mobx-i18n';
-import { DataObject } from 'mobx-restful';
-import {
-  GetServerSideProps,
-  GetServerSidePropsContext,
-  GetServerSidePropsResult,
-  InferGetServerSidePropsType,
-  NextApiRequest,
-  NextApiResponse,
-} from 'next';
-import { ParsedUrlQuery } from 'querystring';
+import { NextApiRequest, NextApiResponse } from 'next';
 
 import { VercelHost } from '../../models/Base';
-import { i18n } from '../../models/Translation';
 
 export type NextAPI = (
   req: NextApiRequest,
@@ -49,81 +38,6 @@ export function safeAPI(handler: NextAPI): NextAPI {
   };
 }
 
-export function withErrorLog<
-  I extends DataObject,
-  O extends DataObject = {},
-  F extends GetServerSideProps<O, I> = GetServerSideProps<O, I>,
->(origin: F) {
-  return (async context => {
-    try {
-      return await origin(context);
-    } catch (error) {
-      console.error(error);
-
-      const { status } = error as HTTPError;
-
-      if (status === 404) return { notFound: true, props: {} };
-
-      throw error;
-    }
-  }) as F;
-}
-
-interface RouteProps<T extends ParsedUrlQuery> {
-  route: Pick<
-    GetServerSidePropsContext<T>,
-    'resolvedUrl' | 'params' | 'query' | 'locales'
-  >;
-}
-
-export function withRoute<
-  I extends DataObject,
-  O extends DataObject = {},
-  F extends GetServerSideProps<O, I> = GetServerSideProps<O, I>,
->(
-  origin?: F,
-): GetServerSideProps<RouteProps<I> & InferGetServerSidePropsType<F>, I> {
-  return async context => {
-    const options =
-        (await origin?.(context)) || ({} as GetServerSidePropsResult<{}>),
-      { resolvedUrl, params, query, locales } = context;
-
-    return {
-      ...options,
-      props: {
-        ...('props' in options ? options.props : {}),
-        route: JSON.parse(
-          JSON.stringify({ resolvedUrl, params, query, locales }),
-        ),
-      },
-    } as GetServerSidePropsResult<
-      RouteProps<I> & InferGetServerSidePropsType<F>
-    >;
-  };
-}
-
-export function withTranslation<
-  I extends DataObject,
-  O extends DataObject = {},
-  F extends GetServerSideProps<O, I> = GetServerSideProps<O, I>,
->(
-  origin?: F,
-): GetServerSideProps<RouteProps<I> & InferGetServerSidePropsType<F>, I> {
-  return async context => {
-    const { language = '' } = context.req.cookies,
-      languages = parseLanguageHeader(
-        context.req.headers['accept-language'] || '',
-      );
-    await i18n.loadLanguages([language, ...languages].filter(Boolean));
-
-    return ((await origin?.(context)) || {
-      props: {},
-    }) as GetServerSidePropsResult<
-      RouteProps<I> & InferGetServerSidePropsType<F>
-    >;
-  };
-}
-
 export function getTarget(link: URL | string): string {
   const { origin = `https://${VercelHost}`, href = `https://${VercelHost}` } =
     globalThis.location || {};

pages/index.tsx

@@ -1,5 +1,6 @@
 import { observer } from 'mobx-react';
 import { InferGetServerSidePropsType } from 'next';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Button, Card, Col, Container, Image, Row } from 'react-bootstrap';
 
@@ -15,11 +16,14 @@ import { ProjectModel } from '../models/Project';
 import { RepositoryModel } from '../models/Repository';
 import { i18n } from '../models/Translation';
 import styles from '../styles/Home.module.less';
-import { getTarget, withErrorLog, withTranslation } from './api/core';
+import { getTarget } from './api/core';
 import { service } from './api/home';
 
-export const getServerSideProps = withErrorLog(
-  withTranslation(async () => {
+export const getServerSideProps = compose(
+  cache(),
+  errorLogger,
+  translator(i18n),
+  async () => {
     const [projects, repositories, partners, members] = await Promise.all([
       new ProjectModel().getList({}, 1, 9),
       new RepositoryModel().getList(),
@@ -38,7 +42,7 @@ export const getServerSideProps = withErrorLog(
         ),
       },
     };
-  }),
+  },
 );
 
 const { t } = i18n;

pages/member.tsx

@@ -1,21 +1,24 @@
 import { observer } from 'mobx-react';
 import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { MemberListLayout } from '../components/Member/List';
 import { PageHead } from '../components/PageHead';
 import memberStore, { MemberModel } from '../models/Member';
 import { i18n } from '../models/Translation';
-import { withErrorLog, withTranslation } from './api/core';
 
-export const getServerSideProps = withErrorLog(
-  withTranslation(async () => {
+export const getServerSideProps = compose(
+  cache(),
+  errorLogger,
+  translator(i18n),
+  async () => {
     const list = await new MemberModel().getList();
 
     return { props: { list } };
-  }),
+  },
 );
 
 const { t } = i18n;

pages/open-source.tsx

@@ -2,20 +2,25 @@ import { Loading } from 'idea-react';
 import { observer } from 'mobx-react';
 import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { GitListLayout } from '../components/Git';
 import { PageHead } from '../components/PageHead';
 import repositoryStore, { RepositoryModel } from '../models/Repository';
 import { i18n } from '../models/Translation';
-import { withTranslation } from './api/core';
 
-export const getServerSideProps = withTranslation(async () => {
-  const list = await new RepositoryModel().getList({}, 1);
+export const getServerSideProps = compose(
+  cache(),
+  errorLogger,
+  translator(i18n),
+  async () => {
+    const list = await new RepositoryModel().getList({}, 1);
 
-  return { props: { list } };
-});
+    return { props: { list } };
+  },
+);
 
 const { t } = i18n;
 

pages/project/[id].tsx

@@ -1,5 +1,6 @@
 import { observer } from 'mobx-react';
 import { InferGetServerSidePropsType } from 'next';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { Col, Container, Image, Row } from 'react-bootstrap';
 
 import { GitCard } from '../../components/Git/Card';
@@ -8,15 +9,14 @@ import { ProjectCard } from '../../components/Project/Card';
 import { Project, ProjectModel } from '../../models/Project';
 import { GitRepository, RepositoryModel } from '../../models/Repository';
 import { i18n } from '../../models/Translation';
-import { withErrorLog } from '../api/core';
 import { fileURLOf } from '../api/Lark/file/[id]';
 
 const { t } = i18n;
 
-export const getServerSideProps = withErrorLog<
+export const getServerSideProps = compose<
   { id: string },
   { project: Project; repositories: GitRepository[] }
->(async ({ params: { id } = {} }) => {
+>(cache(), errorLogger, translator(i18n), async ({ params: { id } = {} }) => {
   var repositories: GitRepository[] = [];
 
   const project = await new ProjectModel().getOne(id!);
@@ -41,7 +41,7 @@ const ProjectDetailPage = observer(
 
       <Row className="g-4 my-3">
         <Col xs={12} sm={8}>
-          <Image fluid src={fileURLOf(project.image)} />
+          <Image fluid src={fileURLOf(project.image)} alt={project.name + ''} />
         </Col>
         <Col xs={12} sm={4}>
           <ProjectCard {...project} />

pages/project/index.tsx

@@ -2,21 +2,24 @@ import { Loading } from 'idea-react';
 import { observer } from 'mobx-react';
 import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { PageHead } from '../../components/PageHead';
 import { ProjectListLayout } from '../../components/Project';
 import projectStore, { ProjectModel } from '../../models/Project';
 import { i18n } from '../../models/Translation';
-import { withErrorLog, withTranslation } from '../api/core';
 
-export const getServerSideProps = withErrorLog(
-  withTranslation(async () => {
+export const getServerSideProps = compose(
+  cache(),
+  errorLogger,
+  translator(i18n),
+  async () => {
     const list = await new ProjectModel().getList({});
 
     return { props: { list } };
-  }),
+  },
 );
 
 const { t } = i18n;