프론트엔드 개발자의 대규모 트래픽 처리?? 🤔

[@tunar1102]

너무너무 유익했습니다ㅎㅎ 좋은 영상 감사드립니다!

[@eddie_the_traveler]

안녕하세요 동료님! 영상 시청해주셔서 감사합니다. 너무너무 유익했다니.. 🥹 제가 오히려 감사의 말씀을 드리고 싶네요. 영상을 올릴까 말까 고민을 했던 시간이 너무 아깝게 느껴지네요. 차라리 더 빠르게 공개를 할걸 이라는 생각이 들게 만들어주신 동료님께 오히려 감사합니다. 영상을 올리기 전까지도 정말 많은 고민을 했거든요. 앞으로도 재밌고 유익한 영상으로 찾아뵐게요! 다시 한번 영상 시청해주셔서 감사합니다. 그럼 좋은 저녁 되세요~!!!

[@귀찮아-h8k]

server 부하 작업을 이렇게 쉽게 풀어서 영상까지 ㅎㅎ 너무 좋은 영상입니다 감사합니다

[@eddie_the_traveler]

수..쉽게 풀었다니 ㅠㅠㅠ 너무 좋네요. 제가 쉽게 풀었다기 보다 동료님의 실력이 출중하셔서 일거예요!!! 오히려 이렇게 어려운 영상을 좋아해주셔서 감사합니다 🙇🏻‍♂️🙇🏻‍♂️🙇🏻‍♂️ 다음에 더 좋은 영상으로 자주 찾아뵐게요~~!

[@이민찬-w3v]

이런 내용 너무 좋네요.. 재밌게 잘봤습니다 ㅎㅎ

[@eddie_the_traveler]

우와 민찬님~~ 오랜만이네요! 재밌게 잘 보셨다니 오히려 제가 감사하네요. 앞으로도 좋은 영상으로 찾아뵐게요~ 그럼 좋은 저녁되세요!

[@윤성훈-g2t]

좋은 영상 만들어주셔서 감사합니다. 이해가 잘가도록 정말 쉽게 만드셨네요. 설명하는 능력이 좋으신거 같아요. 다음영상은 꼭 이 내용을 이어서 다른 해결방법들을 알려주셨으면 좋겠습니다

[@eddie_the_traveler]

안녕하세요 동료님. 어머나,, 걱정을 많이 했는데, 이렇게 좋아해주셔서 감사합니다. 🙇🏻‍♂️ 제가 설명을 잘 했다기 보다 동료님께서 아시는게 많아서 쉽다고 느끼셨던거 같아요. 원래 계획은 없었는데,, 2탄을 한번 제작을 해볼게요. 스포를 하나 하자면 "사이드 프로젝트 나라 여행기"를 지금 찍고 있어서 조금 시간이 걸릴진 모르겠어요. 다른 여행기도 좋은 내용으로 찾아뵐 예정이니 많은 관심 부탁드립니다! 그럼 다시 한번 영상 시청해주셔서 감사합니다. 그럼 좋은 저녁 되세요!

[@후니쨩-w4d]

개발공부하는 입장에서 너무너무 좋은영상입니다 !! 이해 너무 잘되요!! ㅎㅎ

[@eddie_the_traveler]

안녕하세요 예비 동료님! 만나서 반갑습니다. 너무 이해가 잘된다니... 눙물... 🥹 정말 감동입니다. 개발을 공부하시는 입장이심에도 불구하고 이런 내용을 이해하실수 있는 후니쨩님은 도대체 누구세요.... ~예전의 저였다면 영상 바로 껏을텐데...~ 더 좋은 영상으로 찾아뵐게요! 그럼 좋은 저녁 되세요~~!

[@광광-o2g]

스트레스 테스트를 이렇게 편하게 할 수 있다니; 요즘 진짜 좋아졌네요! 방금 막 해봤는데 리포트가 쌈뽕하게 잘 나옵니다 굳굳

[@eddie_the_traveler]

오오오오오 직접 실습까지 해봐주셔서 너무 좋네요!! 근데 요즘 세상이라뇨 ㅠㅠㅠㅠ... 대 선배님이신거예요...? 🙇🏻‍♂️🙇🏻‍♂️🙇🏻‍♂️🙇🏻‍♂️🙇🏻‍♂️

[@신지수-s7n]

너무 좋아요 더 주세요 필살기!!!!

[@eddie_the_traveler]

안녕하세요 동료님! 저의 영상 관심가져 주셔서 감사합니다! 심지어 너무 좋으시다니 감동입니다 🥰 앞으로 더 좋은 영상으로 찾아뵐 수 있도록 할게용! 🙇🏻‍♂️ 날씨가 많이 추워졌네요. 항상 건강 유의하시고 행복한 일만 가득하세요! 다시 한번 영상 시청해주셔서 감사합니다.

[@vbn0213]

도움 많이 됩니다 감사합니다 코드를 같이 보여주시니까 훨씬 직관적으로 잘 이해가돼요

[@eddie_the_traveler]

헛... 너무 어려운 영상이 아닐까 고민이 많이 되었는데 ㅠㅠ 그래도 쉽게 받아드려 주셔서 감사합니다. 도움이 되셨다니 제가 더 감사한걸요..? 🥹 항상 더 좋은 영상으로 찾아뵐게요~~! 그럼 좋은 저녁 되세요!

[@상체충-f5s]

너무 좋네요 ㅎㅎ감사합니다.

[@eddie_the_traveler]

어머 상체충님~ 또 뵙게 되어 반갑네요! 영상이 많이 도움되셨으면 좋겠네용!!! 다음에 더 좋은 내용과 재밌는 내용으로 찾아뵐게요! 그럼 좋은 저녁 되세요~!

[@kijhossnine]

더빙이 야무지시네용

[@쿵푸허술]

ㅋㅋㅋㅋ 먼말인가 했네

[@eddie_the_traveler]

이번에 (부끄) 새로운 방법으로 (부끄) 영상을 제작해봤는데요 (부끄) 좋아해주셨던거 (부끄) 맞죠? (부끄)

[@kijhossnine]

@@eddie_the_traveler 항상 잘 보고있습니다 ㅎㅎ 좋은 영상 감사합니다!

[@ddorabang]

영상 너무 재미있어요. 에디는 무적이고 캐시는 신이야!

[@eddie_the_traveler]

안녕하세요 도라방스님~~ 오랜만에 뵙네요! 허걱.. 이렇게 극찬을 해주시다뇨! 영상을 찍고 공개를 할까말까 고민했던 시간이 바보같이 느껴지게 해주셔서 감사합니다. 항상 제 채널에 관심 가져주셔서 감사해요. 앞으로도 더 좋은 영상으로 찾아뵙겠습니다! 그럼 좋은 저녁되세요!!

[@inhwaseo1142]

좋은 팁 알려주셔서 감사합니다!

[@eddie_the_traveler]

안녕하세요 동료님! 영상이 도움 되셨다면 제가 더 감사하죠! 영상 시청해주셔서 감사합니다!

[@AppleWind]

진로 고민 끝에 웹 개발자를 하기로 결정한지 몇 주 되지 않은 대학교 4학년입니다. 다 이해할 수는 없지만, 내용이 흥미롭고 잘 설명해주셔서 재밌게 보았습니다. 여러가지 동기부여가 되었습니다. 감사합니다.

[@eddie_the_traveler]

허걱.... 이 영상에 동기 부여를 받는 예비동료님의 정체가... 궁금합니다!!! 웹 개발자로 진로를 정하셨군요! 축하드려요. 꼭 꽃길만 걸으시면서, 취업까지 바로 되셨으면 좋겠네요!! 개발자로 취업하시면 제 채널에 자랑하러 오셔야해요!

[@박정빈-t3q]

도움이 됩니다!! 감사합니다

[@eddie_the_traveler]

안녕하세요 동료님!!! 도움이 되셨다니...! 제가 고민 고민을 몇개월을 했는데... 찍어놓고도 공개를 누를까 말까를 정말 많이 고민했는데...!! 그냥 일찍 공개를 할걸 그랬나봐요 ㅠㅠㅠ. 도움이 되셨다니 오히려 제가 더 감사합니다. 앞으로도 재밌고 유익한 영상으로 찾아뵐게요~~! 다시 한번 영상 시청해주셔서 감사합니다. 🙇🏻‍♂️ 그럼 좋은 저녁되세요~~~!

[@greatsumini]

영상 핵잘만드시네요

[@eddie_the_traveler]

헛... 제가 오히려 감사합니다;; 영상 공부를 한게 도움이 되었나보네요 ㅠㅠㅠㅠ 이렇게 알아주셔서 제가 오히려 감사합니다 흑흑흑흑

[@AlwaysWeb]

전자상거래는 가장 대표적인 ssr 활용 사례가 아닐까 싶음. seo 장점도 있고 수 많은 트래픽을 csr로만 처리하면 과도한 번들 용량과 느린 렌더링 시간으로 인해 사용자 이탈이 발생하고 그로 인해 매출에 영향이 가장 빠르게 감. csr에서 부드러운 로딩 경험을 위해 스켈레톤 UI도 인기가 많지만 답답한 느낌을 주는 건 매한가지임. 이제 next에서는 "use cache"를 만들고 있던데 지시문이 벌써 3개가 된... ㅜㅜ

[@toothlesskid042]

감사합니당 ㅎㅎ

[@eddie_the_traveler]

어머 이빨없는 아이님!! 오랜만이네요~~ 시험은 잘 끝나신거 맞죠~?

[@toothlesskid042]

@@eddie_the_traveler네 ㅎㅎ 근데 또 기말고사 기간이네요ㅜㅜ

[@eddie_the_traveler]

앗... 빨리 기말고사 끝나셨으면 좋겠네요!

[@ahahwgqye12]

캐시에 대해 항상 궁금했던 점이 결국 캐시된 데이터와 실제 서버에서 조회되는 값이 달라지는 순간이 생길텐데 이땐 어떻게 하나요? 애초에 캐시된 데이터와 서버에서 가져오는 데이터를 비교하면 그냥 서버에서 가져와 보여주는 것과 다름이 없을테고 특정 주기 (예를 들어 10분) 으로 캐시 갱신 주기를 설정하면 실제 서버에서 데이터는 달라졌는데 9분남짓 기존 캐시데이터가 렌더링되어 오류로 보일 수 있는 것 아닌가요? (죄송합니다 초보라)

[@eddie_the_traveler]

안녕하세요 동료님. 좋은 질문을 남겨주셔서 감사합니다. 초보라고 생각이 들지 않았어요. 저 또한 이런 고민을 했었기 때문에 고민을 한 흔적을 남길 수 있게 도와주셔서 감사합니다. 🙇🏻‍♂️ 말씀주셨던 것처럼 보통 캐쉬는 덜 급변하는,,, 덜 민감한 데이터에 적용이 되곤 합니다! 말씀 주신 상황을 "서버 데이터 불 일치 현상"이라고 보통 부릅니다:서버 데이터는 AAAB로 내려오는데, 프론트의 캐쉬는 AAA로 되어있는 현상을 말하죠. 상황에 따라 다르겠지만, 여기서 말씀 주신것은 생각해볼 점은 있어요. 사실 개발자 입장 + 관심 있는 사람의 입장에서 보면 달라졌다고 인지하겠지만, 실 사용자 입장에서는 별로 그렇게 크게 신경을 쓰지 않는다는 점이예요. 동료님께서 보시는 지금 이 유튜브만 봐도 알 수 있어요. 영상을 올리고 나서 조회수가 어떤 화면에서 보느냐에 따라 다른 것을 알 수 있어요: kin.naver.com/qna/detail.naver?d1id=13&dirId=13040101&docId=475131635 물론 이상하게 느껴져서 말하는거 아니야? 라고 하실 순 있는데, 이러한 사실을 아는건 보통 "실제로 유튜브에 동영상을 올린 사람" 혹은 "해당 영상 조회수에 관심있는 사람" 입니다: kin.naver.com/qna/detail.naver?d1id=1&dirId=10905&docId=475852507 오류처럼 느낄 수도 있지만, 대부분의 사람은 그 불일치 현상이 특별하지 않은 이상은 그렇게 까지 관심이 없습니다 ㅠ... 그렇다면... 아예 방법이 없느냐? 라고 물으신다면 "방법이 없지는 않아요." 이 부분은 제가 2탄에서 설명할 부분이어서 "프론트엔드 대규모 트래픽 - 2탄"의 설명을 봐주시면 좋을거 같아요...! 좋은 질문을 남겨주셔서 감사합니다...! 보통은 댓글로 답변을 다 드리는데, 좋은 질문을 해주셔서 다음 영상으로 넘기게 되네요. 그럼 좋은 하루 되세요!

[@sangwookim1201]

부하 테스트를 어떻게 하나 싶었고 어떻게 대처하나 알고싶었는데 정말 감사합니다.

[@eddie_the_traveler]

안녕하세요 동료님! 영상 시청해주셔서 감사합니다!!! 그리고 영상이 도움이 되셨다니 너무 좋네요..! 항상 도움이 되는 영상들로 찾아뵐게요!! 그럼 좋은 저녁되세요!

[@sdfasdfsdfds]

개발초보자 입장에서는 데이터만 fetch해서 csr로 하는게 제일 좋은거같네요 seo에 불리하다곤 해도 서버터지거나 반응속도가 늦어지는것보단 나은거 같네요

[@김하겸-s5v]

문제는 기업이나 다양한 업체들은 전부 seo에 유리한걸 원하니깐 의미가 없음 개인사이트를 만들어도 seo에 유리한 사이트가 수익의 핵심이니깐

[@jung-holee3675]

방문자가 없으면 사이트를 운영하는 의미가 없으므로 seo도 충분히 고려되어야 합니다. 저런 기법이 있다는 걸 기억하고 필요할 때 적용하면 됩니다. 언제까지 초보자만 하실 수는 없잖아요.

[@sdfasdfsdfds]

@@jung-holee3675 당연히 seo도 고려가 되야지요 로그인 없이 보여지는 부분이 정적페이지면 csr에서도 충분히 프리렌더링을 이용할 수 있고요

[@eddie_the_traveler]

어머,, 이런 토론 너무 좋네요....! ❤️ 저의 답변은 "프론트엔드 대규모 트래픽 - 2탄"에서 한번 풀어볼게용

[@nope7594]

1. next 14버전에서 해당 내용 관련하여 default로 캐시하는 기능을 넣었다가 욕만 먹고 15버전에서 다시 원복시킨 것으로 알고 있는데, 2가지 방법 말고 다른 방법은 없을까요?? 2. 추가적으로 궁금한게 revalidate 30초 동안은 최신이 아닌 outdated 된 페이지가 전달되기에 클라이언트 사이드에서 react-query 를 활용하여 해당 페이지 데이터가 outdated 된 거라면 추가 렌더하는 작업까지 연결하고 싶습니다. ISR에서 html을 stringify하면 캐시된 페이지에 react-query hydration (혹은 props로 전달하는 initialData)까지 담겨져 있을까요? 감사합니다!

[@eddie_the_traveler]

안녕하세요 동료님. 영상 시청해주셔서 감사합니다. 그리고 좋은 질문 남겨주셔서 감사해요. # Q1. next 14버전에서 해당 내용 관련하여 default로 캐시하는 기능을 넣었다가 욕만 먹고 15버전에서 다시 원복시킨 것으로 알고 있는데, 2가지 방법 말고 다른 방법은 없을까요?? 이 말은 어떤 말씀이신지 제가 정확하게 이해한지 잘 모르겠습니다. 14버전에서 default 옵션이 15버전에서 원복 시킨게 맞아요. 그래서 nextjs.org/docs/app/building-your-application/caching 요 방법들을 사용하면 됩니당! # Q2. 추가적으로 궁금한게 revalidate 30초 동안은 최신이 아닌 outdated 된 페이지가 전달되기에 클라이언트 사이드에서 react-query 를 활용하여 해당 페이지 데이터가 outdated 된 거라면 추가 렌더하는 작업까지 연결하고 싶습니다. 혹시 이 말씀을 주신걸까요? 👉 ISR 30초 적용 -> 30초 동안에 data에 변화가 일어남 -> 이건 어떻게 해야함? 이 맞을까요? 이게 맞다면, 가능합니당! 이 내용은 여기에서 설명하기에는 조금 부족할거 같아요 ㅠㅠ... 프론트엔드 대규모 트래픽 처리 2탄(현재 제작중...)에서 해당 내용을 다루고 있으니 그 영상을 참고해주시면 될거 같아요! # Q3. ISR에서 html을 stringify하면 캐시된 페이지에 react-query hydration (혹은 props로 전달하는 initialData)까지 담겨져 있을까요? 넘겨줬었다면, 전부 담겨 있는게 맞아요. page router의 경우에는 html에 최하단쪽 쯤에 script로 "__NEXT_DATA__"가 넣어져있을텐데, props쪽에 넣어져 있을거예요. app router에서도 잘 찾아보시면 "__next_f.push"에 말씀하신 hydration, props로 전달하는 정보들이 담겨 있어요. 아마도 이 말씀을 주신이유는 next(page, app router)의 실제 동작 원리도 같이 궁금해 하실거 같아요. 여기에 그 내용을 모두 적기에는 너무 길어질거 같아요 ㅠㅠ. 이 부분도 추후에 영상 제작할 예정이라서, 그때 참고해주시면 될거 같아요! 왠만하면 질문 주신 내용을 다 댓글로 적어드리려고 노력하는데, 질문의 수준이 좋아서..제가 내용을 댓글에 적지 못하는 글이 많네용 ㅠㅠ.. 🙇🏻‍♂️ 그럼에도 도움이 되셨길 바랍니다. 그럼 좋은 하루되세요!

[@bug_house]

영상 재밌게 보았습니다 역시 에디님 😊 다만 영상을 보면서 몇가지 궁금한점이 생겼어요! 캐싱을 일정시간동안 해두고 데이터가 있다면 SSR을 통해서 그리는거라고 하셨는데요 만약 30초 이내에 데이터가 바뀌었고 그사이에 유저가 새로고침을 하면 최신 정보가 반영이 안되는건지 궁금합니다 추가로 에디님이 설명하신 두 발식이 햇살리는데 ISR방식에서 revalidate주기로 저장하는것과 fetch에서의 revalidate랑 같은역할을 하는 것 처럼 보이는데 어떤 차이점이 있는건가요?

[@eddie_the_traveler]

안녕하세요 버그하우스님! 우와,,, 좋은 질문 주셔서 감사합니다 > 캐싱을 일정시간동안 해두고 데이터가 있다면 SSR을 통해서 그리는거라고 하셨는데요 만약 30초 이내에 데이터가 바뀌었고 그사이에 유저가 새로고침을 하면 최신 정보가 반영이 안되는건지 궁금합니다 네 맞아요. 정말 핵심을 찔러주셨네요. 이게 캐슁의 단점이기도 합니다. 최신화된 데이터를 못보는게 단점이죠. 그래서 캐쉬를 사용하는 상황은 조금 더 많은 상황이 고려되어야 하기도 해요. 말씀해주신 데이터 갱신이 민감한 상황이라면, 캐쉬를 쓰는게 오히려 독이 될 수 도 있어요. > 추가로 에디님이 설명하신 두 발식이 햇살리는데 ISR방식에서 revalidate주기로 저장하는것과 fetch에서의 revalidate랑 같은역할을 하는 것 처럼 보이는데 어떤 차이점이 있는건가요? ISR 방식은 페이지 자체를 캐슁 해놓는 방식이고 fetch는 서버 데이터만 캐쉬처리 하는 방법입니다. 각각의 방식의 가장 큰 차이점은 cache-hit일때 "html을 서버에서 그리냐 안그리냐"의 차이에요. 📌 fetch에서의 cache-hit일때: 1) '/' 요청 2) '/'에 필요한 데이터를 json 호출 2-1) '/'에 필요한 데이터가 캐슁되어 있기 때문에 바로 응답 3) 필요한 데이터를 통해 html을 stringify함 4) 사용자에게 내려줌 📌 ISR일때 cache-hit: 1) '/' 요청 2) '/' 캐쉬된 페이지 있어서 바로 페이지 내려줌 그럼 여기서 하나 궁금증이 드실텐데, html을 stringify를 하는게 그렇게 오래 걸려? 라고 물어보신다면, 아마 대략 200ms 내외 혹은 그것보다 훨씬 빠른 처리 속도일텐데, 이것도 페이지를 어떻게 구성을 하고 있느냐에 따라 달라요. 굉장히 짧은 시간처럼 느껴질 수 있지만 이것도 대규모 트래픽일때는 부하가 됩니다. 왜냐하면 nextjs 프로젝트는 node 서버에서 구동을 하고 있고, node 서버는 싱글 스레드이기 때문에 원래 요청이 처리가 되지 않았다면 다른 요청을 처리할 수가 없어서 pending 이 걸려버려요. 끊임없이 html을 stringify를 해야하는데, 이렇게 html을 조립하는 것도 자칫 부하로 이어질수 있거든용. ㅠㅠㅠ... 그래서 스트래스 테스트를 통해 정말 부하가 걸리는게 맞는지, 요청을 다 수행할 수 있는지를 테스트를 돌려보면서 찾아내고 개선을 해야하는 거 였어요! 오늘도 정말 좋은 질문 남겨주셔서 감사해요 버그하우스님! 그럼 도움이 되셨길 바라면서...! 글을 마쳐보겠습니다. 그럼 좋은 저녁되세요!

[@bug_house]

@@eddie_the_traveler답변감사합니다. csr일때가 뭔가 가장 편했던 것 같네요ㅋㅋㅋ

[@hello-1024-wellcome]

궁금한게 있습니다! fetch와 isr방법이외에도 리액트쿼리방법도 있지않나요?? 하이드레이션을 사용해서하면 서버사이드 환경에서도 사용이가능하고 빠르게 불러올수있구여 fetch와 isr을 사용하는것보다 기능과 옵션또한 더 많고여!

[@eddie_the_traveler]

안녕하세요 동료님! 영상 시청해주셔서 감사합니다. 그리고 수준 높은 질문 감사합니다! 질문 주신 것처럼 > fetch와 isr방법이외에도 리액트쿼리방법도 있지않나요?? 이 방법도 존재합니다! 앞서 말씀드렸던 fetch의 방식과 동일하게 캐슁을 해볼 수 있고, 옵션으로 조작이 가능하죠. 해당 영상에서 tanstack/react-query까지 다루진 않은 이유는 next의 기본적인 기능에 초점을 두고 싶어서 였어용. 그래서 말씀하신것처럼 react-query를 사용하는 방법은 "fetch의 캐쉬를 이용하는 전략과 동일"합니다! > 하이드레이션을 사용해서하면 서버사이드 환경에서도 사용이가능하고 빠르게 불러올수있구여 이 말씀은 결국 SSR을 한다는 것인데, 이게 ISR과는 차이가 있어용. 말씀주신 방법을 제 나름의 플로우로 표현 하자면, SSR은 1) '/' 요청 2) next 서버에서 필요한 데이터 요청(이때 react-query 사용) 3-1) 요청 완료된 데이터로 HTML을 그림 3-2) react-query의 QueryClient에서 json 응답을 string으로 변환 3-3) 변환한 데이터를 html에 삽입 4) client 사이드 일때 html에서 삽입된 응답을 Hydration 컴포넌트에서 불러와 QueryClient에 데이터 적용 대략적으로 이런 방식일텐데, 대규모 트래픽일때 문제가 되는 부분은 "3-1과 3-2"입니다. 영상에서 잠깐 언급하고 지나갔는데 싱글 스래드에서 CPU 집약적인 작업을 진행하면, 그 뒤에 작업들이 pending이 되요. HTML을 string으로 만들어주는 작업도 대규모 트래픽에서는 꽤 큰 작업이고 react-query에서 데이터 요청을 보내고 받는 그 200ms 내외의 시간 조차 부하로 이어집니다. 그래서 ISR로 바꿔보면 cache-hit일때의 경우는 "3-1"과 "3-2" 작업이 생략이 됩니다. 1) '/' 요청 2) next 서버에서 캐쉬된 페이지가 있는지 찾아봄 3) 만약 유효한 데이터라면 캐쉬된 페이지를 내려줌 (여기에 data는 이미 포함이 되어있음) 신나서 글을 쓰다보니 길어졌네요 ㅠㅠ.. 도움이 되셨으면 좋겠네요. 다시 한번 영상 시청해주셔서 감사합니다 🙇🏻‍♂️ 그럼 좋은 저녁 되세요!

[@hello-1024-wellcome]

@@eddie_the_traveler 와.. 정말 너무나 감사합니다!! 다시한번 영상 정주행 하고 내용정리겸 블로그에 작성해야겠습니다. 진짜 다시 한번 너무 감사합니다. 글을 읽었는데 진짜 머리가 번뜩 하고 깨달음이 온것만 같은 기분입니다. 구독박겠습니다 좋은 양질의 컨텐츠 너무나 감사드립니다.

[@BaranSeong]

nextjs 는 기본적으로 서버컴포넌트로 생성하면 ssg 로 프로젝트가 빌드 될때 html을 만들어 두는데 그럼에도 서버 부하가 많이 생기나요??? 단순히 만들어져있는 html을 클라이언트에게 건내주는일인데.. 부하테스트 같응걸 해본적이 없어서 궁금하네요

[@kimjun8]

staletime 옵션이나 캐시컨트롤에 의해 ssg가아닌 ssr로 동작할수도있고 이는 클라이언트 요청에대한 서버의 처리로 이어지기때문에 부하가 언급되는것같아요

[@eddie_the_traveler]

어떻게 하면 잘 설명드릴수 있을까... 를 1시간 동안... 고민하며 쓰고 지우기를 계속 반복했네요. 아무래도 실제 데이터를 보고 싶어하시는 거 같아서 관련해서 글을 찾아봤어요: fe-developers.kakaoent.com/2024/240418-optimizing-nextjs-cache/ 저보다 더 훌륭하신 개발자분이 실제 현업 데이터로 공개 + 글을 적어두신게 있어 공유드립니다! 제가 설명드리는 것보다 100배 1000배 더 잘 적어주셨어서, 더 이해가 가실거 같아요! 도움이 되시길 바라면서.. 영상 시청해주셔서 감사합니다!

[@애쓰봇]

요즘 서버사이드 랜더링이 새로운 기술? 뭔가로 강조 되고 있는데 ㅎㅎㅎ 우리 같은 옛날 개발자들은 무슨 느낌이냐면 마치 핸드폰 밧데리를 분리해서 따로 충전하게 하면 좋지 않을까요? 이런 느낌임. 원래 웹개발은 그냥.. 서버에서 앞에 아파치나 nginx두고 php,jsp,asp뭐 이런거 써서 대충 html말아가지고 던지는 거였음.

[@구루루루구]

그거랑 지금 ssr은 전혀 궤가 다른데 ㅋㅋㅋㅋ

[@bes4448]

@@구루루루구전혀까진 ㅋㅋ

[@무명-u4q]

기술은 원형으로 도는게 아니라 나선형으로 발전하죠 요즘의 서버 렌더링이 과거에 템플릿 통해 만들어진 html 던져주는 방식과 방향성 면에서 통하는 면이 있지만 디테일이 막상 많이 다르죠 게다가 서버 렌더링만 하는게 아니라 컴포넌트별로 렌더링 방식이 다른 하이브리드라..

[@eddie_the_traveler]

맞아요.. 예전에 비하면 정말 많이 복잡해졌죠.. 그리고 단어도 너무 헷갈리는거 같아요... 애쓰봇 동료님께서 말씀주신건 SSR이고 언잉 동료님께서 말씀주신건 SSR with hydration이라는 명칭이더라구요. 그리고 최신 react, next.js 버전에서는 server component 라고 부릅니다. 이 세개가 비슷해 보이긴 해도 무명 동료님께서 말씀주셨던 것처럼 디테일이 다릅니다. 애쓰봇이 말씀주신 SSR은 MPA(multi page app)고 언잉 동료님께서 말씀주신건 SPA(single page app) 이어서 다르고.. 최신 react, next.js 버전에서의 server component는 SPA + streaming의 개념에서 조금 씩 차이가 있어요. 이 영상에서 하고 싶은 이야기중에 하나는 기술을 쓸때는 "약점과 강점"을 알고 그걸 잘 활용하자! 였어용. 사실 애쓰봇 동료님께서 말씀해주신 것처럼 jsp와 같은 것들로도 훌륭한 프로젝트를 만들어낼 수 있어요. 항상 최신 기술이라고 좋은 면만 있진 않거든요. 많은 분들이 요즘 next.js를 학습을 하시고 많은 프로젝트를 진행중 이신데, 이러한 단점을 모르고 있었다면, 나중에 그걸 극복하기에는 이미 유저들은 다 떠나갔을 거 같아요 ㅠㅠ... :( 다시 한번 영상에 관심 가져주셔서 감사합니다! 더 좋은 영상으로 찾아뵐게요! 그럼 좋은 저녁 되세요~~!

[@나그네-b9d]

중간중간 악가 못알아 듣겠는데...부하가 걸린다고 데이타 접근에 캐싱을 사용하자는 전략은 근본적으로 반다네.

[@eddie_the_traveler]

안녕하세요 동료님. 영상 시청해주셔서 감사합니다. 저도 동료님께서 말씀하신 부분에 전적으로 공감이 갑니다. 영상 더보기에서도 말씀드렸던 것처럼 단순 부하 문제로 해당 주제를 말씀드렸던건 아니었어용. 포트폴리오에 적기 좋은 주제이기 때문에 이야기를 나눠봤던거 였어요. 그리고 여러가지 방법들중 가장 빠르고 효과적으로 문제를 해결할 수도 있는 방법이기도 합니다. TTI, FCP, TPS,.. 와 같은 수치들에 최적화 및 공부를 하기 좋은 주제기도 하죠. "개발자에게 기술은 도구로써 취급 되어야 한다." 저는 이 말을 굉장히 좋아해요. 그리고 왜 이런 기술을 사용하셨어요? 라는 질문을 받을때를 가장 좋아해요. 많은 분들이 next.js를 공부하시고 좋다고만 알고 계시지만, 이 서버가 얼마나 쉽게 죽을 수 있는지는 잘 모르시는 분들이 많아 해당 영상을 제작하게 되었습니다 ! 기술의 장점과 단점을 명확하게 알고 있어야 특정 상황에 최선의 기술을 사용한다고 믿거든요. 영상을 이해하기 힘드셨겠지만 그래도 도움이 되셨길 바라면서 글 줄여볼게요. 다시 한번 영상 시청해주셔서 감사합니다! 그럼 좋은 저녁 되세요~!

[@lilililillllIIll]

이거 좋은내용이네요 싱글 스레드는 cpu 집약적인 작업에는 적합하지않죠 그럼 pm2 같은걸로 클러스터 모드로 늘리면 되겠네 해도 되지만 이것도 문제가 생기는게 로드 밸런싱이 적절히 처리가 되지않을수 있고 라우트로 다른 요청이 일어나면 다른 인스턴스로 요청이 전환되어 상태가 유지가 되지않을수도있지요 그래서 언급해주신거처럼 레디스 같은거 붙여서 상태를 공유하는 전략까지 생각해야하는데 ㅎㅎ 여튼 프론트도 빡시네요

[@eddie_the_traveler]

프론트는 웁니다 ㅠㅠ

[@12ii12ii1]

뤼발리데잍ㅋㅋㅋ

[@eddie_the_traveler]

이건 제가 못 따라가는거 같은데 😅,,, 혹시 어떤 부분이 웃기셨던걸까요..?

[@temp-tt8fw]

리벨리데이트 .. 로 읽을줄알았슴다

[@chrislee8446]

CSR 만세

[@eddie_the_traveler]

흠흠,, 저도 CSR 참 좋아하는데요... 라떼이야기를 한번 하자면... 이렇게 복잡한거 없이...그냥 막 알짤딱깔센으로 간단하게 했었는데 말이죠......

[@orangeFrog24]

감사합니다!

[@eddie_the_traveler]

안녕하세요 동료님! 영상이 도움이 되셨다면, 제가 더 감사하죠! 영상 시청해주셔서 감사합니다!