[Refactor] 타인 프로필 페이지 SSR 적용 및 이미지 최적화 #195
Conversation
|
🎉 구현한 기능 Preview: https://front-9hgx9arx9-beoms-projects-53e61468.vercel.app |
| @@ -20,6 +20,7 @@ const nextConfig: NextConfig = { | |||
| hostname: 'zzikzzik-bucket.s3.ap-northeast-2.amazonaws.com', | |||
| }, | |||
| ], | |||
| formats: ['image/avif', 'image/webp'], // AVIF 우선 적용 | |||
| const cookieStore = await cookies(); | ||
| const token = cookieStore.get('token')?.value || ''; | ||
|
|
||
| const queryClient = new QueryClient(); | ||
|
|
||
| await queryClient.prefetchQuery({ | ||
| queryKey: [QUERY_KEYS.USER_PROFILE, Number(userId)], | ||
| queryFn: () => getUserProfile(Number(userId), token), | ||
| }); | ||
|
|
||
| return ( | ||
| <PageContainer> | ||
| <UserProfileHeader userId={userId} /> | ||
| <UserProfileContent userId={userId} /> | ||
| <HydrationBoundary state={dehydrate(queryClient)}> | ||
| <UserProfileHeader userId={userId} /> | ||
| <UserProfileContent userId={userId} /> | ||
| </HydrationBoundary> | ||
| </PageContainer> | ||
| ); | ||
| } |
There was a problem hiding this comment.
이 경우에는 그럼 동작 순서가 어떻게 되는거에요?
전에 공부 했었는데 아작도 100%는 이해 못했어요 ㅋㅋㅋ
There was a problem hiding this comment.
저도 다시 찾아보면서 한거라 ㅋㅋㅋㅋ 일단 제가 정리해놓거는 이정도입니당
QueryClient를 생성하고, prefetchQuery를 이용해 API 요청을 미리 수행.
서버에서 가져온 데이터를 dehydrate(queryClient)를 통해 직렬화하여 클라이언트로 전달.
클라이언트에서 HydrationBoundary를 통해 데이터를 재사용, 추가적인 API 호출 없이 빠르게 렌더링.
| import axios from 'axios'; | ||
| import { API_ENDPOINTS } from '@/constants/ApiEndpoints'; | ||
|
|
||
| const apiUrl = process.env.NEXT_PUBLIC_API_URL; | ||
|
|
||
| export const getUserProfile = async (userId: number, token: string) => { | ||
| try { | ||
| const response = await axios.get( | ||
| apiUrl + API_ENDPOINTS.AUTH.USER_PROFILE(userId), | ||
| { | ||
| headers: { | ||
| token: token, | ||
| 'Content-Type': 'application/json', | ||
| Accept: '*/*', | ||
| }, | ||
| }, | ||
| ); | ||
| return response.data; | ||
| } catch (error) { | ||
| console.error('❌ API 요청 실패:', error); | ||
| throw new Error('사용자 프로필을 가져오는 중 문제가 발생했습니다.'); | ||
| } | ||
| }; |
There was a problem hiding this comment.
api 관련해서는 프로젝트 전체적으로 리펙토링이 필요할거같아요
통합되어있는 느낌이 아니라서 다음 회의 때 의논해봐야겠어요
There was a problem hiding this comment.
맞아요.. SSR의 경우에는 서버 컴포넌트에서 받아야해서 .. 멘토링시간에 물어보고 싶네요..!!
| <Image | ||
| priority | ||
| fill | ||
| sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" |
There was a problem hiding this comment.
이렇게 하는게맞는지는 모르겠네용 ㅎㅎ
감삼다!! 빌드오류 이거 어떡하죠 ㅋㅋㅋ
|
💄 Storybook: https://674fb103b6bfad504c6f0da9-glmjyslham.chromatic.com/ |
📄 타인 프로필 페이지 SSR 적용 및 이미지 최적화
📝 변경 사항 요약
내용 정리 블로그
📌 관련 이슈
🔍 변경 사항 상세 설명
타인 프로필 페이지 SSR 적용 전에 LCP 성능이 매우 안좋았고 이후 이미지가 많아지면 더욱 안좋아질 것이라고 생각하였습니다.
따라서 LCP 요소를 서버에서 미리 렌더링을 할 수 있는 SSR 방식과 이미지 최적화를 적용하기로 하였습니다.
SSR은 api 함수를 따로 만들어 token 값을 서버 컴포넌트로부터 받도록 설정
이미지 최적화는 avif 파일 형식, sizes, priority 속성을 사용
또한 이미지 화질과 크기의 개선이 필요하였습니다.
✅ 확인 사항
📸 스크린샷 (선택 사항)
TBT 성능이 안좋아서 이를 개선중에 있습니다.
기타 참고 사항
또한 빌드 오류 같은 경우는
pnpm/pnpm#9014
해당 이슈를 참고하였습니다.
1️⃣ 문제 발생 원인
GitHub Actions에서 corepack prepare pnpm@latest-10 --activate 실행 시 키 인증 오류
기존 pnpm이 충돌하여 설치 중 오류 발생
2️⃣ 해결 방법
GitHub Actions에서 Corepack을 최신 버전으로 업데이트
기존 pnpm이 존재하면 삭제 후 다시 설치
3️⃣ 왜 로컬 pnpm을 변경하지 않는가?
CI/CD에서만 발생하는 문제이므로, 로컬은 기존 버전 유지
메이저 버전 변경(pnpm v9 → v10)은 안정성을 위해 신중해야 함