ssr 로 변경

wafflestudio · Sep 11, 2022 · 9f0c401 · 9f0c401
1 parent 9a79c7c
commit 9f0c401
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 85 deletions.
diff --git a/lib/util/withGetServerSideProps.ts b/lib/util/withGetServerSideProps.ts
@@ -0,0 +1,45 @@
+import { getEmailVerification } from "@lib/api/apis"
+import { GetServerSideProps, GetServerSidePropsContext } from "next"
+import { QueryClient, dehydrate } from "react-query"
+
+type GetSnuttServerSideProps = (args: {
+  context: GetServerSidePropsContext
+  queryClient: QueryClient
+}) => ReturnType<GetServerSideProps>
+
+const removeUndefined = (obj: unknown) => JSON.parse(JSON.stringify(obj))
+
+const getDehydratedQueryClient = (client: QueryClient) => {
+  return removeUndefined(dehydrate(client))
+}
+
+export const withGetServerSideProps = (
+  callback?: GetSnuttServerSideProps,
+): GetServerSideProps => {
+  const queryClient = new QueryClient()
+
+  return async (context) => {
+    const { is_email_verified: isVerified } = await queryClient.fetchQuery(
+      "email-verified",
+      getEmailVerification,
+    )
+
+    if (!isVerified)
+      return { redirect: { destination: "/verify", permanent: false } }
+
+    if (!callback)
+      return {
+        props: { dehydratedState: getDehydratedQueryClient(queryClient) },
+      }
+
+    const ret = await callback({ context, queryClient })
+
+    return {
+      ...ret,
+      props: {
+        ...("props" in ret && { ...ret.props }),
+        dehydratedState: getDehydratedQueryClient(queryClient),
+      },
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "react-dom": "^18.0.0-rc.0",
     "react-error-boundary": "^3.1.4",
     "react-modal-sheet": "^1.4.1",
-    "react-query": "^3.21.0"
+    "react-query": "^3.39.2"
   },
   "devDependencies": {
     "@svgr/cli": "^6.1.2",

diff --git a/pageImpl/mainImpl/__containers__/index.ts b/pageImpl/mainImpl/__containers__/index.ts
@@ -18,13 +18,13 @@ export function useMainEvaluationContainer(selectedTag?: TagDTO) {
     fetchNextPage,
     hasNextPage,
   } = useInfiniteQuery(
-    ["tagEvaluations", selectedTag],
+    ["tagEvaluations", selectedTag?.id ?? null],
     ({ pageParam }) =>
       getMainTagEvaluations(selectedTag?.id ?? 1, {
-        cursor: pageParam,
+        cursor: pageParam || undefined,
       }),
     {
-      getNextPageParam: (lastPage, pages) => {
+      getNextPageParam: (lastPage) => {
         return lastPage.cursor ?? undefined
       },
       enabled: selectedTag !== undefined,

diff --git a/pageImpl/mainImpl/index.tsx b/pageImpl/mainImpl/index.tsx
@@ -7,7 +7,7 @@ import {
 } from "./__containers__"
 import { Subheading02, Title01 } from "@lib/components/Text"
 import { RecentCarousel } from "./__components__/RecentCarousel"
-import React, { useEffect, useState } from "react"
+import React, { useState } from "react"
 import { ToggleButton, ToggleButtonGroup } from "@mui/material/"
 import { AppBar } from "@lib/components/Appbar"
 
@@ -22,17 +22,14 @@ import { SearchResultLoading } from "@lib/components/Miscellaneous/Loading"
 export const MainImpl = () => {
   const router = useRouter()
 
-  const [selectedTag, setSelectedTag] = useState<TagDTO | undefined>(undefined)
   const { recommendationTags } = useRecommendationTagsContainer()
+
+  const [selectedTag, setSelectedTag] = useState(recommendationTags[0])
   const { recentLectureData } = useMainLatestLectureContainer()
   const { searchResult, fetchNextPage, isFetchingNextPage, hasNextPage } =
     useMainEvaluationContainer(selectedTag)
   const { loaderRef } = useScrollLoader(fetchNextPage)
 
-  useEffect(() => {
-    setSelectedTag(recommendationTags[0])
-  }, [recommendationTags])
-
   const handleClickRecommendationTag = (
     e: React.MouseEvent<HTMLElement, MouseEvent>,
     tag?: TagDTO,

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,8 @@
-import { Suspense, useEffect } from "react"
+import { Suspense, useState } from "react"
 import type { AppProps } from "next/app"
 import Head from "next/head"
 import {
+  Hydrate,
   QueryClient,
   QueryClientProvider,
   QueryErrorResetBoundary,
@@ -10,64 +11,9 @@ import { css, Global } from "@emotion/react"
 import { appleSDGNeo } from "@lib/styles/fonts"
 import { ErrorBoundary } from "react-error-boundary"
 import { ErrorView } from "@lib/components/Error"
-import { MailVerifyImpl } from "@pageImpl/mailVerifyImpl"
-import useCookie from "@lib/hooks/useCookie"
-import { getEmailVerification } from "@lib/api/apis"
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 0,
-      suspense: true,
-    },
-  },
-})
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const [isEmailVerified, updateEmailVerifedCookie] =
-    useCookie("email-verified")
-
-  const checkEmailVerification = async () => {
-    const res = await getEmailVerification()
-    if (res.is_email_verified) {
-      updateEmailVerifedCookie("true")
-    } else {
-      updateEmailVerifedCookie("false")
-    }
-  }
-
-  useEffect(() => {
-    checkEmailVerification()
-  }, [])
-
-  if (isEmailVerified === null) {
-    return
-  }
-
-  if (isEmailVerified === "false") {
-    return (
-      <>
-        <Head>
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-          />
-        </Head>
-        <Global
-          styles={css`
-            html,
-            body {
-              padding: 0;
-              margin: 0 auto;
-              ${appleSDGNeo};
-              max-width: 768px;
-            }
-          `}
-        />
-        <MailVerifyImpl setVerification={updateEmailVerifedCookie} />
-      </>
-    )
-  }
+  const [queryClient] = useState(() => new QueryClient())
 
   return (
     <>
@@ -90,20 +36,22 @@ function MyApp({ Component, pageProps }: AppProps) {
           `}
         />
 
-        <QueryErrorResetBoundary>
-          {({ reset }) => (
-            <ErrorBoundary
-              onReset={reset}
-              fallbackRender={({ resetErrorBoundary }) => (
-                <ErrorView resetErrorBoundary={resetErrorBoundary} />
-              )}
-            >
-              <Suspense fallback={<></>}>
-                <Component {...pageProps} />
-              </Suspense>
-            </ErrorBoundary>
-          )}
-        </QueryErrorResetBoundary>
+        <Hydrate state={pageProps.dehydratedState}>
+          <QueryErrorResetBoundary>
+            {({ reset }) => (
+              <ErrorBoundary
+                onReset={reset}
+                fallbackRender={({ resetErrorBoundary }) => (
+                  <ErrorView resetErrorBoundary={resetErrorBoundary} />
+                )}
+              >
+                <Suspense fallback={<></>}>
+                  <Component {...pageProps} />
+                </Suspense>
+              </ErrorBoundary>
+            )}
+          </QueryErrorResetBoundary>
+        </Hydrate>
       </QueryClientProvider>
     </>
   )

diff --git a/pages/main/index.tsx b/pages/main/index.tsx
@@ -1,6 +1,27 @@
 import React from "react"
 import { MainImpl } from "@pageImpl/mainImpl"
+import { withGetServerSideProps } from "@lib/util/withGetServerSideProps"
+import {
+  fetchLatestLectures,
+  getMainTagEvaluations,
+  getMainTagInfos,
+} from "@lib/api/apis"
 
 export default function MainView() {
   return <MainImpl />
 }
+
+export const getServerSideProps = withGetServerSideProps(
+  async ({ queryClient }) => {
+    await Promise.all([
+      queryClient.prefetchQuery("mainTags", getMainTagInfos),
+      queryClient.prefetchQuery("latestLectures", fetchLatestLectures),
+      queryClient.prefetchInfiniteQuery(
+        ["tagEvaluations", 1],
+        ({ pageParam }) => getMainTagEvaluations(1, { cursor: pageParam }),
+      ),
+    ])
+
+    return { props: {} }
+  },
+)
diff --git a/pages/verify.tsx b/pages/verify.tsx
@@ -0,0 +1,29 @@
+import { css, Global } from "@emotion/react"
+import { appleSDGNeo } from "@lib/styles/fonts"
+import { MailVerifyImpl } from "@pageImpl/mailVerifyImpl"
+import Head from "next/head"
+
+export default function Index() {
+  return (
+    <>
+      <Head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+        />
+      </Head>
+      <Global
+        styles={css`
+          html,
+          body {
+            padding: 0;
+            margin: 0 auto;
+            ${appleSDGNeo};
+            max-width: 768px;
+          }
+        `}
+      />
+      <MailVerifyImpl setVerification={() => null} />
+    </>
+  )
+}
diff --git a/yarn.lock b/yarn.lock
@@ -4536,10 +4536,10 @@ react-modal-sheet@^1.4.1:
   dependencies:
     react-merge-refs "1.1.0"
 
-react-query@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.21.0.tgz#2e099a7906c38eeeb750e8b9b12121a21fa8d9ef"
-  integrity sha512-5rY5J8OD9f4EdkytjSsdCO+pqbJWKwSIMETfh/UyxqyjLURHE0IhlB+IPNPrzzu/dzK0rRxi5p0IkcCdSfizDQ==
+react-query@^3.39.2:
+  version "3.39.2"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"
+  integrity sha512-F6hYDKyNgDQfQOuR1Rsp3VRzJnWHx6aRnnIZHMNGGgbL3SBgpZTDg8MQwmxOgpCAoqZJA+JSNCydF1xGJqKOCA==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"