CSR(Client-Side Rendering, 클라이언트 사이드 렌더링) "클라이언트 측에서 모든 거 만든다."
CSR은 클라이언트 측에서 JavaScript를 이용하여 동적으로 웹 페이지를 렌더링하는 방법입니다. 사용자가 페이지를 요청하면, 브라우저에서 JavaScript 파일을 다운로드하고 실행하여 페이지를 렌더링합니다. CSR은 초기 로딩 속도가 느리지만, 페이지를 로딩한 후에는 빠른 페이지 전환과 상호작용을 제공합니다. 예를 들어, React, Vue와 같은 프론트엔드 라이브러리와 프레임워크를 사용하는 경우 CSR을 적용할 수 있습니다.
SSR(Server-Side Rendering, 서버 사이드 렌더링) "서버에서 HTML,JS,CSS 만들어서 클라이언트 측에게 전송한다."
SSR은 서버 측에서 웹 페이지를 렌더링하는 방법입니다. 사용자가 페이지를 요청하면, 서버에서 HTML 파일을 생성하고 브라우저에 전송합니다. 이 때, HTML 파일에는 초기 상태와 동적으로 생성되는 데이터가 모두 포함됩니다. SSR은 초기 로딩 속도가 빠르지만, 서버 자원이 많이 사용되고, 페이지 전환 시에는 느린 로딩 속도를 가지는 단점이 있습니다. 예를 들어, Next.js와 같은 SSR을 지원하는 프레임워크를 사용하는 경우 SSR을 적용할 수 있습니다.
SSG(Static Site Generation, 정적 사이트 생성) "서버에서 HTML 정적 파일 뚝딱 만들어서 빌드 시에 사전에 렌더링 해둔다."
- SSR과의 차이점은 SSG는 동적파일(JS)를 취급하지 않고, 정적 파일만 제공하지만, SSR는 동적 파일과 정적 파일 모두를 제공합니다.
- SSG은 서버 측에서 사전에 렌더링된 HTML 파일을 사용하여 웹 페이지를 제공하는 방법입니다. 빌드 시점에 모든 페이지를 사전에 렌더링하고, HTML 파일을 생성합니다. 이렇게 생성된 HTML 파일은 CDN(Content Delivery Network)에 캐시되어 빠르게 로딩됩니다. SSG은 초기 로딩 속도가 매우 빠르며, 검색 엔진 최적화(SEO)에도 유리합니다. 예를 들어, Gatsby와 같은 정적 사이트 생성기를 사용하는 경우 SSG을 적용할 수 있습니다.
- SSG의 예시로는, 블로그나 정적인 웹 페이지의 경우 SSG를 적용하여 페이지를 생성하고, 동적인 기능이 필요한 웹 애플리케이션의 경우 SSR 또는 CSR을 적용할 수 있습니다.
pre-rendering(서버 HTML 기반-정적) vs 일반적인 웹사이트의 렌더링(JS 기반-동적)
Pre-rendering은 웹 페이지나 애플리케이션을 최초 로딩 시점에 서버 측에서 미리 렌더링하여 사용자에게 더 빠르게 제공하는 기술입니다.
일반적으로 웹 페이지나 애플리케이션은 사용자의 브라우저에서 JavaScript를 이용하여 동적으로 렌더링됩니다. 이 때, 브라우저에서 JavaScript 파일을 다운로드하고 실행하는 과정에서 로딩 시간이 소요됩니다. 이러한 로딩 시간을 최소화하기 위해, pre-rendering은 서버 측에서 렌더링된 HTML, CSS, JavaScript 파일을 브라우저에 전송하여, 브라우저에서 렌더링을 거치지 않고 사용자에게 바로 보여줍니다.
Pre-rendering 기술은 초기 로딩 속도를 높여 사용자 경험을 개선할 수 있습니다. 특히, 모바일 기기와 같이 네트워크 연결이 느린 환경에서 사용자들이 빠르게 콘텐츠를 볼 수 있도록 해줍니다. Pre-rendering은 SEO에도 유용하며, 검색 엔진에서 크롤링하는 데 더 적합한 컨텐츠를 제공하여, 검색 노출이 개선될 수 있습니다.
ISR(Incremental Static Regeneration) , SSG(Static Site Generation)
ISR(Incremental Static Regeneration)은 Next.js에서 제공하는 정적 사이트 생성(SSG) 방식 중 하나입니다.
SSG는 빌드 시점에 모든 페이지를 생성하는 방식으로, 빌드 시점에만 데이터를 가져오기 때문에 데이터 변경이 있을 때마다 다시 빌드해야 합니다. 따라서 데이터 변경이 잦은 경우에는 SSG 방식이 적합하지 않습니다.
반면에 ISR은 SSG와 달리 빌드 시점에 모든 페이지를 생성하지 않고, 일부 페이지만 빌드하여 캐시에 저장하고, 사용자가 요청할 때마다 캐시된 페이지를 반환합니다. 이 방식은 SSG와 마찬가지로 초기 로딩 속도가 매우 빠르고 SEO에 좋은 효과를 가져올 수 있습니다.
'넥스트' 카테고리의 다른 글
| [next.js] 2. 페이지와 레이아웃 (0) | 2023.08.26 |
|---|---|
| [next.js] 1. 라우팅 경로 정의 (0) | 2023.08.26 |
| [next.js] CSR(Clinet Side Rendering) (0) | 2023.04.01 |
| [NextJS] prettier 기본 설정 (0) | 2023.03.06 |
| [Next.Js] useRouter() 훅의 프로퍼티 (0) | 2023.03.06 |
