그린티_

서론웹 개발이랑 면접에서 기술면접에서 CSR, SSR이라는 용어가 자꾸 나옴React는 CSR이고, Next.js는 SSR도 지원한다고 함처음엔 "둘 다 HTML인데 뭐가 달라?" 싶었지만, 찾아보니 장단점이 확실히 다름그래서 CSR과 SSR이 정확히 뭐고, 언제 뭘 써야 하는지 정리해봄본론CSR (Client Side Rendering) 이해하기CSR은 렌더링을 클라이언트(브라우저)에서 함서버는 빈 HTML과 JavaScript만 보내고, 브라우저가 나머지 일을 함CSR의 흐름1. 유저가 웹사이트 접속 ↓2. 서버가 빈 HTML 파일 전송 ↓3. 브라우저가 JavaScript 다운로드 및 실행 ↓4. JavaScript가 DOM을 동적으로 생성 R..

SSR이란?사용자의 요청이 들어올 때마다 서버에서 HTML을 실시간으로 생성해서 브라우저에 전달하는 렌더링 방식브라우저가 요청하면 서버는 미리 데이터를 가져와 완성된 HTML을 생성해 응답브라우저는 HTML을 바로 렌더링 → 초기 화면 표시 속도가 빠름이후 자바스크립트를 로드해 클라이언트에서도 동작 가능하게 함 (hydration)hydration? - 서버에서 생성된 정적인 HTML에 자바스크립트 기능을 연결(활성화)하는 과정빠르게 HTML을 보여주긴 하지만 브라우저에서 Hydration이 완료되어야 실제로 클릭, 입력 등의 인터랙션이 가능해짐⸻작동 흐름브라우저 → HTML 요청 → 서버가 데이터 fetch 후 HTML 생성 → 브라우저에 응답↓브라우저는 완성된 HTML 렌더링 → JS 파일 실행 → ..

서론React로 프로젝트를 하다가 Next.js를 알게 됨 "React랑 뭐가 다르지?" 싶었는데, Next.js는 프레임워크라고 함 찾아보니 SSR, SSG, ISR 같은 렌더링 방식이 있더라 특히 SSR과 SSG가 뭐가 다른지 헷갈렸음 그래서 Next.js가 뭐고, SSR과 SSG의 차이를 정리해봄본론Next.js가 뭐야?Next.js는 React 기반의 풀스택 프레임워크 클라이언트 사이드만 하던 React에서 한 걸음 나아가서 서버 사이드도 처리할 수 있게 해줌React vs Next.jsReact는 클라이언트에서 모든 렌더링을 함브라우저 → 빈 HTML 받음 → JavaScript 실행 → 화면 렌더링Next.js는 서버에서도 렌더링할 수 있음브라우저 → 완성된 HTML 받음 → JavaScrip..