Next.js
풀스택 웹 애플리케이션 구축을 위한 React 프레임워크
주요 기능
서버 사이드 렌더링(SSR)
-
기존 React는 CSR(Client-Side Rendering) 방식으로 동작함.
CSR이란? 클라이언트 측에서 페이지를 렌더링하는 방식.
-
CSR은 페이지 이동 속도가 빠르지만 처음에 페이지를 렌더링하기 위해 필요한 JS 파일을 먼저 다운로드하기 때문에 초기 로딩 속도가 느림. 또한, 초기 HTML 파일에 콘텐츠가 포함되어 있지 않기 때문에 SEO에 불리함.
SSR은 서버 측에서 페이지를 렌더링하는 방식임.
-
미리 만들어진 HTML 파일을 가져오기 때문에 초기 로딩 속도가 빠르고 SEO에 유리함. 대신 페이지 이동 속도가 느리다는 단점이 있음.
정적 사이트 생성(SSG)
빌드 시, 각 페이지의 HTML을 생성하고, 해당 페이지 요청이 올 경우에 이미 생성한 HTML을 반환하는 방식
- SSR처럼 서버에서 완성된 HTML을 받아오지만 서버에서 페이지를 계속해서 재생성하는 것이 아니라 빌드 시 만들어낸 HTML을 보여주는 것.
Next.js에서는 CSR, SSR, SSG 방식 모두 사용 가능
참고
- https://velog.io/@ka0son/%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%82%BC%ED%98%95%EC%A0%9C-CSR-SSR-SSG-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
- https://velog.io/@jhyun_k/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-vs-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-SSR%EA%B3%BC-CSR
