시작하기
이런 분들께 추천해요
•
SSR이 뭔지는 아는데, 왜 필요한지 설명하기 어렵다면•
Next.js를 쓰고 있지만 내부 동작이 블랙박스처럼 느껴진다면•
Hydration 에러가 나면 일단 구글링부터 한다면•
프레임워크 문서를 읽어도 “왜 이렇게 하는 건지” 감이 안 온다면이런 경험, 있으신가요?
Next.js로 프로젝트를 진행하다 보면 한 번쯤 이런 상황을 마주하게 돼요.
Error: Hydration failed because the initial UI does not match
what was rendered on the server.
Plain Text
복사
에러 메시지를 읽어봐도 “서버에서 렌더링된 것과 일치하지 않는다”는 말이 와닿지 않아요. 서버에서 뭘 렌더링한다는 건지, 왜 클라이언트와 달라야 문제가 되는 건지 명확하지 않죠.
혹은 이런 경험도 있을 거예요.
•
'use client'를 어디에 붙여야 하는지 감이 안 온다
•
getServerSideProps는 알겠는데, 이게 App Router의 뭐랑 대응되는 건지 모르겠다
•
React Server Components가 SSR이랑 뭐가 다른 건지 헷갈린다
•
분명 로컬에서는 됐는데 배포하면 안 되는 코드가 있다
이런 문제들은 겉보기에 서로 다른 것 같지만, 사실 하나의 질문으로 귀결돼요.
“이 코드가 대체 어디서 실행되는 거지?”
서버인지, 클라이언트인지, 빌드 타임인지, 런타임인지. 이 구분이 명확하지 않으면 프레임워크가 제공하는 기능들이 마법처럼 느껴져요. 문제가 생겼을 때 어디서부터 디버깅해야 할지 막막해지죠.
이 문서를 읽고 나면
이 문서는 SSR의 동작 원리를 바닥부터 설명해요. 프레임워크가 없는 상태에서 SSR을 직접 구현해보고, 거기에 하나씩 기능을 붙여볼 거예요. 그 과정에서 “왜 프레임워크가 이렇게 설계되었는지”가 자연스럽게 이해돼요.
문서를 다 읽고 나면 이런 것들이 가능해져요.
•
'use client'가 왜 필요한지, 어디에 붙여야 하는지 스스로 판단할 수 있다
•
hydration mismatch 에러가 왜 발생하는지 원인을 추론할 수 있다
•
새로운 SSR 관련 기능이 나와도 “결국 이것도 같은 원리의 변형이구나”라고 이해할 수 있다
•
프레임워크 문서를 읽을 때 “이게 내부적으로 어떻게 동작하겠구나” 감이 온다
핵심은 하나예요. SSR이 특별한 마법이 아니라, “서버에서 HTML을 만들어서 보내는 것”이라는 단순한 원리의 확장이라는 걸 체감하는 거예요.
먼저, 어떻게 여기까지 오게 됐는지 살펴볼게요.
