디시인사이드 같은 커뮤니티 사이트에 Next.js의 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 설계
1. 서버 사이드 렌더링(SSR) - 인기글/갤러리 메인 페이지
서버 사이드 렌더링은 페이지를 서버에서 미리 렌더링해서 완성된 HTML을 보내주는 방식이에요.
- 비유 대상: 디시인사이드의 인기글 목록, 갤러리 메인 페이지
- 이유: 인기글은 많은 사람이 동시에 방문하는 페이지입니다. 빠르게 로딩되어야 하며 검색 엔진 최적화(SEO)도 중요
SSR을 사용하면 서버가 데이터를 미리 가져와 렌더링해서, 페이지를 로드하는 즉시 내용이 보이는 장점이 있습니다.
2. 클라이언트 사이드 렌더링(CSR) - 개별 게시글 상세 페이지
클라이언트 사이드 렌더링은 페이지를 먼저 불러온 후, 클라이언트(브라우저)가 JavaScript로 데이터를 가져와 렌더링하는 방식입니다.
- 비유 대상: 개별 게시글의 상세 페이지 (예: 글을 클릭했을 때 게시글 보기)
- 이유: 개별 게시글은 사용자마다 다른 내용을 확인하기 위해 새로 요청할 필요가 있어요. CSR을 사용하면 빠르게 첫 화면(기본 레이아웃)을 보여주고, 이후에 게시글 데이터를 비동기적으로 가져와 채워넣습니다.
이 방식은 페이지 전환 속도가 빠르고, 네트워크 트래픽을 줄일 수 있지만, SEO에 불리할 수 있다는 단점이 있어요.
3. 정적 사이트 생성(SSG) - 공지사항 페이지
**정적 사이트 생성(Static Site Generation)**은 빌드 시점에 HTML을 미리 만들어 배포하는 방식입니다.
- 비유 대상: 공지사항 페이지
- 이유: 공지사항 페이지는 자주 변경되지 않는 정적인 콘텐츠입니다. SSG를 사용하면 서버 부담이 줄고 빠르게 로딩됩니다.
예를 들어, 디시인사이드의 공지사항은 업데이트가 적기 때문에 미리 렌더링해두면 효율적입니다.
렌더링 방식 요약
| 페이지 / 기능 | 렌더링 방식 | 이유 |
| 최신 게시글 목록 | SSR | 항상 최신 데이터를 보여주기 위해 서버가 즉시 데이터를 렌더링 |
| 인기 게시글 (변동 적음) | SSG | 고정된 데이터, 빌드 시점에 렌더링해서 빠르게 제공 |
| 페이지네이션 / 검색 필터 | CSR | 비동기적으로 데이터를 가져와 클라이언트에서 렌더링, 서버 부담 감소 |
서버 사이드 렌더링(SSR) - 최신 게시글 목록
- 비유 대상: 특정 갤러리의 최신 게시글 목록 (예: "웃긴대학 갤러리" 게시판 최신 글 목록 페이지)
- 이유:
- 최신 글 목록은 빈번하게 업데이트되므로, 항상 최신 데이터를 보여줘야 합니다.
- 사용자가 페이지에 접속할 때마다 서버가 최신 게시글 데이터를 가져와 렌더링한 후 완성된 HTML을 제공하는 것이 좋습니다.
- SEO가 중요한 경우에도 유리합니다. 검색 엔진이 서버에서 미리 렌더링된 HTML을 읽을 수 있어 검색 노출에 도움이 되기 때문이죠.
예시 상황: 사용자가 "갤러리 최신 글" 버튼을 눌렀을 때 즉시 최신 게시글 목록이 보이는 페이지입니다.
SSR?
특정 갤러리의 최신 게시글 목록은 SSR이 가장 적합합니다. 최신 데이터를 보여줘야 하면서 SEO도 중요한 경우가 많기 때문이죠.
반면, 인기글처럼 고정된 게시글 목록은 SSG를 사용하면 성능이 더 좋고 효율적입니다.
페이지네이션이나 필터링된 데이터는 CSR을 통해 더 빠르고 유연하게 사용자에게 제공할 수 있습니다.
- 서버 부하: 요청이 있을 때마다 서버가 데이터를 가져오므로 트래픽이 많은 경우 서버 부담이 커질 수 있습니다.
- 응답 시간: API 호출이나 데이터 처리 시간이 길어지면 페이지 로딩 시간이 느려질 수 있습니다.
다른 대안 - ISR (Incremental Static Regeneration)
만약 최신 게시글을 너무 자주 갱신할 필요가 없고, 약간의 지연이 허용된다면 ISR를 고려할 수 있습니다. ISR을 사용하면 정적 페이지를 빌드해놓고, 지정된 시간마다 재생성할 수 있습니다.
결론
- 최신 게시글을 항상 실시간으로 보여줘야 한다 → getServerSideProps 사용 (SSR)
- 조금의 지연이 허용되며 서버 부하를 줄이고 싶다 → getStaticProps와 ISR 사용
SSR과 ISR 비교
| 데이터 변경 빈도 | 자주 변경됨 | 가끔 변경됨 |
| 최신 데이터 반영 | 실시간 (항상 최신 상태) | 설정된 시간 간격 (예: 60초마다) |
| 서버 부하 | 요청이 들어올 때마다 서버 요청 필요 | 재생성 시점에만 서버 요청 필요 |
| 페이지 로딩 속도 | 느릴 수 있음 (실시간 렌더링) | 빠름 (정적 페이지 반환) |
- 글 내용이 자주 바뀌고 즉시 반영이 필요 → SSR (getServerSideProps) 사용
- 글 내용이 가끔 바뀌고 약간의 지연이 허용 → ISR (getStaticProps + revalidate) 사용
'Next.js' 카테고리의 다른 글
| Client와 Server 컴포넌트의 상태 관리 (0) | 2024.12.18 |
|---|---|
| Next.js 14 프로젝트 구조 및 아키텍처 설계 (1) | 2024.12.18 |
| Next js 데이터 패칭 방식 (0) | 2024.12.17 |