SSR, CSR, SSG, ISR 이해해보기..

🐕 SSG는 뭐임...

CSR, SSR은 어느정도 알고 있다고 생각하는데 Next.js 생태계로 들어가보면

처음 보는 단어들이 튀어나옵니다 SSG는 뭐고 ISR은 뭔가 싶어요

fullname으로 보면 이해가 쉬울 것 같아 찾아보니 SSG는 "Static Site Generation"을 뜻한다고 합니다.

직역하면 정적 사이트 생성으로 해석할 수 있겠네요 SSG와 ISR은

서버사이드 렌더링 환경에서 성능과 사용자 경험을 개선하는 데에 사용하는 일반적인 기술입니다.

웹사이트의 콘텐츠들을 빌드 시점에서 사전 구축하여 정적인 HTML 페이지의 형태로 사용자에게 제공하는 것

이라고 요약을 할 수가 있겠네요

 

SSG는 빌드 시점에 페이지를 생성해두는 것

정도로 이해하고 넘어가겠습니다. 엄밀한 개념은 다를 수 있지만요..

이렇게 SSG를 이용하면 서버가 각 사용자 요청에 대하여 새 페이지를 생성할 필요가 없기 때문에

웹사이트의 속도와 효율성을 크게 향상시킬 수 있습니다.

또한 사전에 만들어둔 페이지를 CDN(Contents Delivery Network)에 제공해 둘 수도 있으니

사용자가 웹 사이트를 로드하는 데에 걸리는 시간도 획기적으로 단축될 것입니다.

 

그러니까 클라이언트가 매번 페이지를 요청할때마다 HTML 파일로 빌드하고 보내주는 작업을 생략할 수 있게

미리 정적인 HTML 형태로 만들어두고 그걸 CDN에 뿌려두면 클라이언트는

CDN에서 바로 HTML을 받아올 수 있다는 개념...인 것 같은데 그럼 훨씬 효율적이긴 하겠네요

기존에는 이런 느낌으로 클라이언트 측의 요청에 따라 html을 보내주었는데

이런 방식을 사용하게되면 서버측의 리소스가 많이 든다는 문제점이 있습니다.

왜 서버측의 리소스가 많이 소요될까요?

그것은 리액트로 작성된 파일을 사용자의 요청이 있을때마다 매번 HTML로 변환해서 보내주는 비효율이 있기때문입니다.

 

그렇다면 동적으로 변하는 요소가 있는게 아닌 언제나 같은 "정적"인 페이지라면

그냥 미리 하나 만들어 두고 그걸 보내주면 안될까요?

그런 논리에서 만들어진게 SSG라고하네용.. that's correct

이 과정에서 정적으로 빌드해둔 HTML을 CDN에 캐싱해두는 등의 

최적화도 진행할 수 있다고 하는데 아무튼 요런 느낌

그런데 우리의 모든 페이지는 정적으로만 표현할 수 있지 않습니다.

예컨대 쿼리값을 기반으로 동적인 라우팅을 해야하는 상황도 존재할 수 있어요

 

그렇다면 어떻게 해야 할까요?

1. 동적으로 생성될 수 있는 모든 경우의 수에 대한 페이지를 미리 정적으로 만들어둔다.

2. 동적으로 라우팅 해야하는 경우는 그냥... 동적으로 라우팅한다

 

거창해보이지만 결국 한다 안한다 두가지로 정리할 수 있겠죠..?

 

아니면 비슷한 문제로 이런 경우가 있을 수 있어요

SSG 페이지에서 표현되야 할 데이터가 동적으로 변경되는 경우엔 어떡할까요?

SSG는 빌드 타임에 정적 파일을 생성해두기 때문에 이후에 데이터가 변경되어도

빌드를 새로하지 않는 이상은 페이지에 반영되지 않습니다.

 

그렇다면 이런 경우엔 어떻게 해결할 수 있을까요?

글쎄요.. 아마 이 문제때문에 server 컴포넌트랑 client 컴포넌트를 나눠둔게 아닐까 싶은데

잘 모르겠군요 더 공부해보아야 겠습니다.

---

👻SSR

그런데 앞서 살펴본 SSG의 문제점 (빌드타임 이후 데이터가 변경되어도 반영되지 못함)은

SSR의 문제점으로 해결할 수 있다는 것 눈치 채셨나요?

요청이 올때마다 서버측에서 페이지를 만들어 반환하는 SSR은 미리 만들어둔 페이지를 보내는

SSG 보다 느릴 수 밖에 없지만 대신 항상 최신의 정보를 보여줍니다.

 

물론 그런 와중에도 자바스크립트 파일을 통해 클라이언트 측에서 직접 화면을 그려야하는

CSR보다는 SSR이 빠르다는 것..

하지만 서버사이드렌더링은 페이지를 그리는것까진 잘 할 수 있지만

이벤트 등 페이지와 사용자간의 상호작용을 하기위해서는 hydrate라는 과정이 선행되어야 합니다.

 

뭐 수분공급..수분유지 이런 느낌으로 번역되는 단어인데 제 생각에는

건조한 (정적인) HTML 파일에 생기를 불어넣어주는... 약간 고런너낌으로 hydration이라고 부르는게 아닐까 생각해요

뭐냐면 미리 렌더링 해둔 HTML 페이지에 이벤트 핸들러같은 자바스크립트 코드를 연결시켜주는 것입니다.

자바스크립트를 통해 사용자와 상호작용이 가능하니까 만들어진 HTML에 맞는 자바스크립트 코드를 넣어주면

상호작용도 잘 할 수 있겠죠?

---

😙CSR

 Next.js는 CSR도 사용합니다. SSR, SSG를 한다고해서 CSR을 아예 안하는것도 아닌거죠

그럼 언제 CSR을 사용하는 것을 추천할까요?

Next.js에서는

1. SEO가 필요하지 않은 경우(비밀 페이지)

2. pre-rendering이 필요 없는 경우

3. 데이터의 업데이트가 잦은 경우

등에서 CSR을 추천합니다.

---

🤐ISR

ISR은 (Incremental Static Regeneration)의 준말입니다.

앞서 SSG는 빌드 타임 이후 변경된 데이터가 반영되지 못한다는 문제가 있었습니다.

그래서 Next.js는 사이트를 빌드한 이후에도 정적페이지를 생성하거나 업데이트할 수 있는 기능을 제공해요

ISR은 모든 페이지를 재빌드할 필요없이 각 페이지를 정적으로 생성합니다.

 

ISR을 구현하는 방법은 12 이하 버전에서는 getStaticProps , getServersideProps 등의 함수를 이용했지만

13부터는 위 함수들을 버리고 fetch와 cache 메커니즘을 사용하도록 유도하고 있다고하네요

fetch / cache 전략은 다음과 같은 느낌으로 사용합니다.

  const res = await fetch(
    `https://api.themoviedb.org/3/${
      genre === 'fetchTopRated' ? 'movie/top_rated' : 'trending/all/week'
    }?api_key=${API_KEY}&language=en-US&page=1`,
    { next: { revalidate: 10000 } },
  );
  
  const data = await res.json();
  const results = data.results;

기존에는 getStaticProps에 revalidate값을 주는 식으로 사용했지만

지금은 이렇게 fetch의 두번째 인자에 넘겨주는 객체에 next 키값을 통해 설정해주는 것 같네요

revalidate는 재확인을 할 시간을 의미합니다.

기본적으로 모든 정적인 페이지를 매번 보여주는 것은 비효율적일거에요.

그럴바엔 SSG를 사용하는게 아니라  SSR을 하는거나 다름없으니까요

따라서 next.js는 기본적으로 페이지를 캐싱해둡니다.

하지만 그런 경우 빌드타임에서 생성된 정적파일을 계속 사용하게되고

그러면 빌드 이후 데이터 변경이 일어나도 페이지에 반영이 되지 않는 문제가 있어요

그렇기 때문에 revalidate 옵션을 통해 캐시가 너무 오래되어

데이터가 변경되었을 확률이 높다고 개발자가 판단하는 시간이 되면

페이지를 새로 빌드하도록 하게하는 것입니다.

 

즉 기존의 SSG는 빌드했을때만 정적페이지를 생성한다면

ISR을 통해 빌드할때도 정적페이지를 생성하고 revalidate에 설정한 시간이 지났을때에도

추가적으로 정적페이지가 재생성되도록 할 수 있다는 것입니다.

 

(revalidate가 유효시간이 끝난후 클라이언트측의 요청이 있어야 새로 빌드한다,

해당 시간마다 재생성한다. 등 의견이 갈려있는 것으로 보이는데 현재 상황은 어떤지 모르겠네요)

---

🐶레퍼런스

https://nextjs.org/docs/basic-features/data-fetching/overview

Data Fetching: Overview | Next.js

https://careerly.co.kr/qnas/1723?fa=search-result&fromArea=tab-all 

nextjs 13 getStaticProps 질문

https://velog.io/@sj_dev_js/Next.js-%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B1%B0%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83

Next.js 에 대한 거의 모든 것

---

이해했다고 생각할 때가 가장 무서울 때다.

처음 만나는 개념이 많기도하고 13으로 인해 대격변이 있어서 더 헷갈리네요