식당에 가면 음식을 주문하고 서빙받습니다.
사장님은 양질의 음식과 서비스를 제공하려 노력합니다.
그러나 아무리 음식이 맛있어도 서비스가 별로면 재방문 의사가 사라집니다.
요식업은 적재적소의 서비스를 통해 고객 만족을 창출해 내야합니다.
개발자 역시 일종의 서비스직이라고 생각합니다.
성능 좋고 편리한 앱을 개발해 고객 만족을 창출해야합니다.
Next.js 는 하이브리드 렌더링을 통해 이러한 가치 창출을 도와줍니다.
한식당의 비유를 통해 Next.js의 하이브리드 렌더링을 가볍게 이해해보려합니다.
당신은 단골 한식당에 갔습니다
1. SSG - Static Site Generation
점원이 메뉴판을 가져다줬다.
오랜만에 왔는데도 메뉴판은 그대로다.
김치찌개를 시켰다.
- SSG는 서버에서 페이지를 미리 렌더링하여 사용자에게 제공합니다.
- 메뉴판이 항상 똑같이 보이는 것은 정적이며, 변경되지 않는 콘텐츠를 의미합니다.
2. ISR - Incremental Static Generation
가게 입간판에 오늘의 추천메뉴가 써있다.
어제 지나칠 때는 분명 된장찌개 였는데 오늘은 김치찌개로 바뀌어있다.
김치찌개 시키길 잘했다.
- 매일 새로운 추천 메뉴를 업데이트하는 것처럼, ISR은 사전에 렌더링된 페이지를 캐싱하고 일정한 시간 간격으로 업데이트합니다.
- 변경된 부분만 업데이트되며, 나머지 부분은 이전 상태를 유지합니다.
- 사용자는 새로운 정보를 기다리지 않고도 빠르게 업데이트된 콘텐츠를 볼 수 있습니다.
3. CSR - Client Side Rendering
한참을 기다렸다.
식탁은 텅텅 비어있다.
반찬이라도 가져다주지..
조금 뒤 점원이 김치찌개와 반찬 그리고 수저까지 한번에 서빙을 해준다.
단골이라 내가 좋아하는 반찬으로 챙겨주느라 준비가 안되어 있었고 한번에 나온거라고 한다.
한번 왔다가니 모든 세팅이 끝났다.
맛있게 먹었다.
- 주문을 하고 음식을 받을때까지 식탁이 비어 있는 것처럼, CSR은 초기 로딩 시에 빈 화면을 보여줍니다.
- 그 후 서버에서 데이터를 받아와 동적으로 페이지를 업데이트하고, 사용자는 이에 따라 화면을 볼 수 있습니다.
- 초기 서빙(로딩)이 느릴 수 있지만, 수저(JS)까지 가져다줬기에 그 후 온전한 식사(동작)까지 가능합니다.
- CSR은 SSR에 비해 TTV (Time to View)는 느리지만 TTV과 TTI (Time to Interact)가 동일합니다.
4. SSR - Server Side Rendering
후식으로 아이스크림을 시켰다.
김치찌개와 다르게 주문하자마자 나왔다.
근데 스푼을 안줬다.
손으로 먹으라는건가..
잠시 뒤 스푼을 가져다줘서 맛있게 먹었다.
- SSR은 요청이 들어올 때마다 서버에서 페이지를 렌더링하여 클라이언트에게 제공합니다.
- 사용자는 즉시 완전한 페이지를 볼 수 있으며, 초기 로딩 시간이 빠릅니다.
- 그러나 서버에서 처리되므로 서버 리소스가 필요합니다.
- 주문한 아이스크림이 즉시 나오지만 스푼이 빠져있는 것은 온전한 동작까지 가능하지 않은 Pre-rendering 상태로 전달 받는것을 의미합니다.
- SSR은 TTV는 CSR에 비해 빠르지만, TTV와 TTI의 시간 차이가 있습니다.
