[공통] Next.js prefetch 및 ssr 서버 요청으로 인한 페이지 이동 및 로드 속도 저하 문제 수정 (#1227)

Author: ff1451

next.config.mjs

@@ -1,6 +1,7 @@
 import { withSentryConfig } from '@sentry/nextjs';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  compress: false,
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,

src/api/review/mutations.ts

@@ -9,7 +9,8 @@ interface ReviewMutationCallbacks {
 
 const invalidateStoreReviewQueries = async (queryClient: QueryClient, shopId: string) => {
   await Promise.all([
-    queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId)) }),
+    queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId), 'public') }),
+    queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId), 'auth') }),
     queryClient.invalidateQueries({ queryKey: storeQueryKeys.myReviews(shopId) }),
     queryClient.invalidateQueries({ queryKey: storeQueryKeys.detail(shopId) }),
     queryClient.invalidateQueries({ queryKey: storeQueryKeys.detailPage(shopId) }),

src/api/store/mutations.ts

@@ -9,7 +9,8 @@ interface StoreMutationCallbacks {
 
 const invalidateStoreReviewQueries = async (queryClient: QueryClient, shopId: string) => {
   await Promise.all([
-    queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId)) }),
+    queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId), 'public') }),
+    queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId), 'auth') }),
     queryClient.invalidateQueries({ queryKey: storeQueryKeys.myReviews(shopId) }),
     queryClient.invalidateQueries({ queryKey: storeQueryKeys.detail(shopId) }),
     queryClient.invalidateQueries({ queryKey: storeQueryKeys.detailPage(shopId) }),
@@ -42,7 +43,10 @@ export const storeMutations = {
     mutationOptions({
       mutationFn: (data: ReviewReportRequest) => postReviewReport(Number(shopId), Number(reviewId), data, token),
       onSuccess: async () => {
-        await queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId)) });
+        await Promise.all([
+          queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId), 'public') }),
+          queryClient.invalidateQueries({ queryKey: storeQueryKeys.reviews(Number(shopId), 'auth') }),
+        ]);
         await callbacks.onSuccess?.();
       },
     }),

src/api/store/queries.ts

@@ -27,6 +27,12 @@ interface StoreReviewListQueryParams {
   token?: string;
 }
 
+export type StoreReviewViewerScope = 'public' | 'auth';
+
+export function getStoreReviewViewerScope(token?: string): StoreReviewViewerScope {
+  return token ? 'auth' : 'public';
+}
+
 export const storeQueryKeys = {
   all: ['store'] as const,
   categories: () => [...storeQueryKeys.all, 'categories'] as const,
@@ -40,11 +46,12 @@ export const storeQueryKeys = {
   benefitCategory: () => [...storeQueryKeys.all, 'benefit-category'] as const,
   benefitList: (id: string) => [...storeQueryKeys.all, 'benefit-list', id] as const,
   relatedSearch: (query: string) => [...storeQueryKeys.all, 'related-search', query] as const,
-  reviews: (shopId: number) => ['review', shopId] as const,
-  reviewFeed: (shopId: number, sorter: string) => [...storeQueryKeys.reviews(shopId), sorter] as const,
-  reviewList: ({ shopId, page, sorter }: Omit<StoreReviewListQueryParams, 'token'>) =>
-    [...storeQueryKeys.reviewFeed(shopId, sorter), page] as const,
-  myReviews: (shopId: string) => ['review', 'my-review', shopId] as const,
+  reviews: (shopId: number, viewerScope: StoreReviewViewerScope) => ['review', viewerScope, shopId] as const,
+  reviewFeed: (shopId: number, sorter: string, viewerScope: StoreReviewViewerScope) =>
+    [...storeQueryKeys.reviews(shopId, viewerScope), sorter] as const,
+  reviewList: ({ shopId, page, sorter, token }: StoreReviewListQueryParams) =>
+    [...storeQueryKeys.reviewFeed(shopId, sorter, getStoreReviewViewerScope(token)), page] as const,
+  myReviews: (shopId: string) => ['review', 'auth', 'my-review', shopId] as const,
   myReview: (shopId: string, sorter: string) => [...storeQueryKeys.myReviews(shopId), sorter] as const,
 };
 
@@ -105,13 +112,13 @@ export const storeQueries = {
 
   reviewList: ({ shopId, page, sorter, token }: StoreReviewListQueryParams) =>
     queryOptions({
-      queryKey: storeQueryKeys.reviewList({ shopId, page, sorter }),
+      queryKey: storeQueryKeys.reviewList({ shopId, page, sorter, token }),
       queryFn: () => getReviewList(shopId, page, sorter, token),
     }),
 
   reviewFeed: ({ shopId, sorter, token }: Omit<StoreReviewListQueryParams, 'page'>) =>
     infiniteQueryOptions({
-      queryKey: storeQueryKeys.reviewFeed(shopId, sorter),
+      queryKey: storeQueryKeys.reviewFeed(shopId, sorter, getStoreReviewViewerScope(token)),
       initialPageParam: 1,
       queryFn: ({ pageParam }) => getReviewList(shopId, pageParam, sorter, token),
       getNextPageParam: (lastPage) => {

src/components/IndexComponents/IndexArticles/index.tsx

@@ -42,7 +42,11 @@ export default function IndexArticles() {
       <ul className={styles.list}>
         {articlesData?.articles.slice(0, 7).map((article) => (
           <li key={article.id} className={styles.list__item}>
-            <Link href={ROUTES.ArticlesDetail({ id: String(article.id) })} className={styles['list__item-link']}>
+            <Link
+              href={ROUTES.ArticlesDetail({ id: String(article.id) })}
+              prefetch={false}
+              className={styles['list__item-link']}
+            >
               <span className={styles['list__item-type']}>{convertArticlesTag(article.board_id)}</span>
               <span className={styles['list__item-title']}>{article.title}</span>
               {article.isNew && (

src/components/Store/StoreDetailPage/components/Review/components/AverageRating/AverageRating.tsx

@@ -7,7 +7,10 @@ import styles from './AverageRating.module.scss';
 
 export default function AverageRating({ id }: { id: string }) {
   const token = useTokenState();
-  const { data } = useSuspenseInfiniteQuery(storeQueries.reviewFeed({ shopId: Number(id), sorter: 'LATEST', token }));
+
+  const { data } = useSuspenseInfiniteQuery({
+    ...storeQueries.reviewFeed({ shopId: Number(id), sorter: 'LATEST', token }),
+  });
   const totalReviewCount = data.pages[0].total_count;
 
   const ratingObject = data.pages[0].statistics;

src/components/Store/StoreDetailPage/components/Review/components/ReviewList/ReviewList.tsx

@@ -40,13 +40,14 @@ export default function ReviewList({ id }: { id: string }) {
   const previousSortType = useDeferredValue(currentSortType);
   const currentSortLabel = typeToLabel[currentSortType];
   const token = useTokenState();
-  const { data, hasNextPage, fetchNextPage } = useSuspenseInfiniteQuery(
-    storeQueries.reviewFeed({
+
+  const { data, hasNextPage, fetchNextPage } = useSuspenseInfiniteQuery({
+    ...storeQueries.reviewFeed({
       shopId: Number(id),
       sorter: previousSortType,
       token,
     }),
-  );
+  });
   const reviews = data.pages.flatMap((page) => page.reviews);
   const { data: myReview } = useQuery({
     ...storeQueries.myReview(id, previousSortType, token),

src/components/layout/Footer/index.tsx

@@ -76,6 +76,7 @@ function Footer(): JSX.Element {
                 <li className={styles.footer__service} key={submenuInfo.title}>
                   <Link
                     href={isStage && submenuInfo.stageLink ? submenuInfo.stageLink : submenuInfo.link}
+                    prefetch={false}
                     onClick={(e) => handleClickMenu(e, submenuInfo.title)}
                   >
                     {submenuInfo.title}
@@ -117,9 +118,11 @@ function Footer(): JSX.Element {
                   아우누리 바로가기
                 </a>
               </li>
-              <Link href={ROUTES.PrivatePolicy()} className={styles.sitemap__link}>
-                개인정보 처리방침
-              </Link>
+              <li className={styles.sitemap__link}>
+                <Link href={ROUTES.PrivatePolicy()} prefetch={false}>
+                  개인정보 처리방침
+                </Link>
+              </li>
             </ul>
           ) : (
             <ul className={styles.sitemap__content}>
@@ -143,9 +146,11 @@ function Footer(): JSX.Element {
                   BCSD Lab 바로가기
                 </a>
               </li>
-              <Link href={ROUTES.PrivatePolicy()} className={styles.sitemap__link}>
-                개인정보 처리방침
-              </Link>
+              <li className={styles.sitemap__link}>
+                <Link href={ROUTES.PrivatePolicy()} prefetch={false}>
+                  개인정보 처리방침
+                </Link>
+              </li>
             </ul>
           )}
           <div className={styles['sitemap__icon-links']}>

src/components/layout/Header/PCHeader/index.tsx

@@ -242,7 +242,12 @@ export default function PCHeader({ openModal }: PCHeaderProps) {
               return (
                 <li className={styles.megamenu__menu} key={menu.title}>
                   {/* TODO: 키보드 Focus 접근성 향상 */}
-                  <Link className={styles.megamenu__link} href={href} onClick={(e) => handleMenuClick(e, menu.title)}>
+                  <Link
+                    className={styles.megamenu__link}
+                    href={href}
+                    prefetch={false}
+                    onClick={(e) => handleMenuClick(e, menu.title)}
+                  >
                     {menu.title}
                   </Link>
                 </li>
@@ -257,6 +262,7 @@ export default function PCHeader({ openModal }: PCHeaderProps) {
             <li className={styles['header__auth-link']}>
               <Link
                 href={ROUTES.AuthSignup({ currentStep: '약관동의' })}
+                prefetch={false}
                 onClick={() => {
                   sessionLogger.actionSessionEvent({
                     session_name: 'sign_up',
@@ -272,6 +278,7 @@ export default function PCHeader({ openModal }: PCHeaderProps) {
             <li className={styles['header__auth-link']}>
               <Link
                 href={ROUTES.Auth()}
+                prefetch={false}
                 onClick={() => {
                   logger.actionEventClick({
                     team: 'USER',

src/components/ui/Banner/index.tsx

@@ -7,7 +7,7 @@ import { useSwipeable } from 'react-swipeable';
 import useLogger from 'utils/hooks/analytics/useLogger';
 import useMediaQuery from 'utils/hooks/layout/useMediaQuery';
 import useBooleanState from 'utils/hooks/state/useBooleanState';
-import { setCookie } from 'utils/ts/cookie';
+import { getCookie, setCookie } from 'utils/ts/cookie';
 import styles from './Banner.module.scss';
 
 interface BannerCardProps {
@@ -63,18 +63,34 @@ function BannerCard({ handleImageLinkClick, image_url, redirect_link, isFirst }:
 interface BannerProps {
   bannersList: BannersResponse;
   bannerCategoryId: number;
-  isBannerOpen: boolean;
 }
 
 const HIDE_BANNER_DURATION_DAYS = 7;
+const HIDE_BANNER_COOKIE = 'HIDE_BANNER';
 
-function Banner({ bannersList, bannerCategoryId, isBannerOpen }: BannerProps) {
+function Banner({ bannersList, bannerCategoryId }: BannerProps) {
   const isMobile = useMediaQuery();
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const logger = useLogger();
   const [currentPageIndex, setCurrentPageIndex] = useState(0);
   const currentBanner = bannersList.banners[currentPageIndex];
-  const [isModalOpen, , closeModal] = useBooleanState(isBannerOpen);
+  const [isModalOpen, openModal, closeModal] = useBooleanState(false);
+
+  useEffect(() => {
+    if (bannersList.count === 0) {
+      closeModal();
+      return;
+    }
+
+    // 배너 노출 여부를 SSR에서 분리해 페이지 HTML 캐시를 안전하게 유지
+    const isBannerHidden = getCookie(HIDE_BANNER_COOKIE) === `modal_category_${bannerCategoryId}`;
+    if (isBannerHidden) {
+      closeModal();
+      return;
+    }
+
+    openModal();
+  }, [bannerCategoryId, bannersList.count, closeModal, openModal]);
 
   const resetAutoSlide = useCallback(() => {
     if (intervalRef.current) clearTimeout(intervalRef.current);
@@ -128,7 +144,7 @@ function Banner({ bannersList, bannerCategoryId, isBannerOpen }: BannerProps) {
       value: `${currentBanner.title}`,
     });
     if (bannerCategoryId === 1) {
-      setCookie('HIDE_BANNER', `modal_category_${bannerCategoryId}`, HIDE_BANNER_DURATION_DAYS);
+      setCookie(HIDE_BANNER_COOKIE, `modal_category_${bannerCategoryId}`, HIDE_BANNER_DURATION_DAYS);
     }
     closeModal();
   };