그린티_

서론웹 개발이랑 면접에서 기술면접에서 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..

서론Next.js 13 이후로 서버 컴포넌트가 도입되면서 기존의 전역 상태 관리 패턴이 그대로 통하지 않게 됐습니다.클라이언트 전용 상태 관리 라이브러리(Zustand, Jotai 등)를 서버 컴포넌트와 어떻게 조합해야 할까라는 생각에 찾아봤습니다.프로젝트를 진행하던 중 이런 상황이 마침 발생해서 직접 적용해봤습니다.우선 페이지를 이동할 때마다 큰 변화가 없는 데이터에 대한 API 호출은 비효율적이라고 생각했고 한번 불러서 저장해서 사용해보도록 했습니다.그 중 가장 간단하고 쉽게 할 수 있는 Zustand를 활용하게 됐습니다.서버 컴포넌트 vs 클라이언트 컴포넌트의 역할구분서버 컴포넌트클라이언트 컴포넌트실행 위치서버브라우저데이터 요청가능 (fetch 직접 사용)불가능 (보통 React Query 사용)상..

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..

1. next-pwa 라이브러리 설치먼저, 프로젝트에 next-pwa 라이브러리를 설치합니다:npm install next-pwa또한, PWA를 구성하려면 workbox 관련 라이브러리도 설치해야 합니다.npm install workbox-core workbox-precaching workbox-routing workbox-strategies2. next.config.js 파일 수정PWA 설정을 적용하기 위해 next.config.js 파일을 수정합니다:// next.config.jsconst withPWA = require('next-pwa')({ dest: 'public', register: true, skipWaiting: true,});module.exports = withPWA({ rea..