HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🚀
개발 노트/
🌁
Next.js
🌁

Next.js

 

Next.js란?

  • React와 같은 Single Page Application에 SSR을 적용하기 위한 프레임워크
  • 그 외에도 Code Splitting, Image Optimization, Pre-fetching 등을 지원한다.
  • Next는 단순히 SPA를 SSR 방식으로 전환하는 것이 아닌, 부분적으로 적용하는 것.
첫 페이지 로딩만 SSR 방식으로 렌더링을 하고,
나머지는 CSR 방식을 사용한다면 두 장점을 모두 흡수할 수 있다.
CSR + (SSR 또는 SSG) 전략
 

Static-Site-Generation

HTML을 빌드 타임에 각 페이지별로 생성하고,
해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다. (기본값)
SSG를 특정 데이터와 같이 해야하는 경우 getStaticProps 함수를 사용한다.
동적 경로를 사용하고 싶은 경우 getStaticPaths 함수를 사용한다.
빌드 시, JS 파일과 HTML이 미리 생성된다.
 

언제 쓰는가

  • 성능이 중요한 경우 (CDN을 통해 더 빠른 응답)
  • 정적으로 생성하여 각 요청에 동일한 문서를 반환할 수 있는 경우
      • (마케팅 페이지, 블로그 게시물, 제품의 목록 등)
notion image
 

Server-Side-Rendering

요청이 올 때마다 해당하는 HTML 문서를 그때 그때 생성하여 반환한다.
빌드 시, JS 파일만 있고 HTML은 없다.

언제 쓰는가

  • 항상 최신 상태를 유지해야 하는 경우 (요청에 따라 응답 내용이 시시각각 변하는 경우)
  • 요청마다 다른 내용 또는 형식의 HTML 문서가 반환되는 경우
      • (제품의 상세 페이지 / 분석 차트 등)
notion image
 

Client-Side-Rendering

만약 데이터의 변동이 매우 빈번하다면,
굳이 pre-rendering을 하지 말고 기존 React에서처럼 data-fetching을 통해 CSR에서 렌더링하라.
 

언제 쓰는가

  • 데이터의 변동이 매우 빈번한 경우
  • SEO 적용 또는 데이터 pre-rendering이 불필요한 경우
  • 유저 페이지
      • 개인적인 영역이면서 특정 유저에게 귀속되며,
      외부 노출이 필요하거나 SEO를 적용할 필요가 거의 없다.
      또한, 유저의 수정을 통해 즉각적으로 화면이 변동하는 페이지.
       

기타

CSR 방식

CSR 방식에서는 우선 빈 HTML 문서를 반환하고,
그 후 React로 코딩한 여러 컴포넌트들을 번들링하여 전달하며,
브라우저는 해당 js 파일을 전달받은 이후에 유저에게 보여줄 화면을 렌더링한다.
즉, CSR 방식에서는 번들링된 JS 파일을 전달 받아야 정상적인 렌더링이 가능하다.
 
 

참고자료

[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)
앞전 포스트에서 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)에 대한 개념을 살펴보았다. 자세한 내용은 여기 를 참고하자. 이번 포스팅에서는 SPA 형태의 웹 서비스에서 SSR 방식을 적용하기 위해 Next.js를 간단히 사용해보고 SSR 그리고 SSG 관점에 집중하여 기존 CSR 방식과의 차이점을 살펴보자. SPA는 기본적으로 CSR 방식을 사용하여 동작한다는 것을 저번 포스팅에서 소개했다.
[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)
https://velog.io/@longroadhome/FE-SSRServer-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-SSGStatic-Site-Generation-feat.-NEXT%EB%A5%BC-%EC%A4%91%EC%8B%AC%EC%9C%BC%EB%A1%9C
[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)
Getting Started | Next.js
Welcome to the Next.js documentation! If you're new to Next.js, we recommend starting with the learn course. The interactive course with quizzes will guide you through everything you need to know to use Next.js. If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.
Getting Started | Next.js
https://nextjs.org/docs
Getting Started | Next.js