🧐 CSR, SSR, SSG, ISR 개념 정리 ( Next.js )

Next.js를 기반으로 CSR, SSR, SSG, ISR에 대한 개념을 정리한 작성한 포스트입니다.

✨ CSR ( Client-Side-Rendering )

클라이언트 측 렌더링입니다. ( 사용자가 사용하는 브라우저에서 렌더링을 한다는 의미 )

1. CSR 동작 순서

1. 브라우저에서 서버에게 URL + Method에 맞는 파일/데이터를 요청한다.
2. <div id="root"></div>와 필요한 파일들에 대한 요청을 포함하는 HTML을 반환합니다.
3. HTML을 파싱하는 도중에 필요한 JavaScript파일을 요청하고 파싱합니다. ( <script src="xx.js" /> )
4. 해당 JavaScript를 파싱해서 <div id="root"></div>를 채워 넣습니다. ( ReactDOM.render(_, document.querySelector("#root")) )

동작 순서와 함께 CSR을 살펴보면 브라우저에서 서버에게 요청하는 순간에 웹페이지에 정보가 채워지며 렌더링되게 됩니다.
이 말은 서버에게 요청하기 전에는 HTML이 비어있는 상태 즉, <div id="root"></div> 상태입니다.
겉으로 보면 이게 무슨 문제인가 생각할 수도 있지만, SEO측면에서는 사용자가 웹페이지에 들어가기전에 크롤링해서 필요한 데이터를 찾아야하는데 해당 사이트에는 빈 HTML만 들어가 있으니 가져올 정보가 없다고 판단합니다. ( 구글 검색엔진은 제외 )
따라서 검색 엔진은 해당 사이트를 검색의 우선순위에서 완전히 제외시켜버리게 되는 것입니다.
또한 HTML요청과 응답, JavaScript요청과 응답, JavaScript파싱 이라는 과정이 있어서 앞 두 개의 과정 ( HTML요청과 응답, JavaScript요청과 응답 )에서는 빈 화면이 보이게 되고, JavaScript파싱에서는 대부분 스피너가 보이게 됩니다.

2. CSR 정리

1. SEO가 안된다. ( 검색 엔진에 노출되지 않는다. )
2. JavaScript파싱 과정에 다른 처리를 해줘야 한다. ( 렌더링 과정에 시간이 걸리기 때문에 유저에게 렌더링중임은 인식시켜주기 위함 )

✨ SSR ( Server-Side-Rendering )

서버 측 렌더링입니다. ( 브라우저에서 요청한 서버에서 완성된 HTML을 응답한다는 의미 )

1. SSR 동작 순서

1. 브라우저에서 서버에게 URL + Method에 맞는 파일/데이터를 요청한다.
2. 서버에서 getServerSideProps()를 실행하고 얻은 데이터로 HTML을 채워서 응답한다.
3. 브라우저는 완성된 HTML을 파싱해서 바로 화면에 렌더링한다.

동작 순서와 함께 SSR을 살펴보면 서버에게 요청하는 순간 서버측에서 getServerSideProps()를 실행합니다.
getServerSideProps()에서는 웹페이지를 렌더링하는데 필요한 데이터들을 요청하고 응답하는 과정을 처리합니다.
필요한 데이터를 받아서 HTML을 완성하고 응답합니다. ( 이미 완성된 상태로 응답되기 때문에 SEO에 좋음 )
브라우저에서 받은 HTML을 파싱해서 화면에 렌더링합니다. ( 단, 서버에서 완성하는 시간이 필요하므로 응답 시간이 CSR보다 오래 걸림 )

2. SSR 정리

1. SEO가 된다. ( 검색 엔진에 노출된다. )
2. 첫 렌더링이 CSR보다 오래 걸린다. ( 서버에서 완성하는 시간이 필요하기 때문 )
3. 서버에 부담이 될 수 있다. ( 요청할 때마다 새로운 HTML을 생성함 )

✨ SSG ( Static-Site-Generation )

정적 사이트 생성입니다.

1. SSG 동작 순서

1. Next.js를 build할 때 getStaticSideProps()를 실행한다.
2. getStaticSideProps()를 실행해서 얻은 데이터를 이용해서 미리 HTML을 생성한다.
3. 브라우저에서 서버에게 URL+Method에 맞는 파일/데이터를 요청하면 바로 완성된 HTML을 응답한다.

2. SSG 정리

1. SEO가 된다. ( 검색 엔진에 노출된다. )
2. 첫 렌더링이 빠르다. ( 이미 완성된 HTML을 그대로 전송 )
3. 변화에 대한 변경이 없다. ( 빌드 시 완성해버려서 빌드 이후에 DB가 수정되더라도 그 수정된 데이터가 업데이트되지 않는다. )

✨ ISR ( Incremental-Static-Regeneration )

정적인 사이트를 다시 생성합니다.

1. ISR 동작 순서

1. Next.js를 build할 때 getStaticSideProps()를 실행한다.
2. getStaticSideProps()를 실행해서 얻은 데이터를 이용해서 미리 HTML을 생성한다.
3. 추가적으로 getStaticSideProps()에서 설정한 revalidate 혹은 unstable_revalidate()를 이용해서 특정 시점에 다시 정적 페이지를 재생성한다.
4. 브라우저에서 서버에게 URL+Method에 맞는 파일/데이터를 요청하면 바로 완성된 HTML을 응답한다.

2. ISR 정리

1. SEO가 된다. ( 검색 엔진에 노출된다. )
2. 첫 렌더링이 빠르다. ( 이미 완성된 HTML을 그대로 전송 )
3. 변화에 대한 변경이 가능하다. ( revalidate 혹은 unstable_revalidate()를 사용하면 원하는 지점에 다시 페이지를 재생성할 수 있습니다. )