TwentyTwentyOne

✅ Next.js의 CSR, SSR, ISR 차이점 완벽 정리Next.js를 사용하는 이유 중 하나는 다양한 렌더링 방식을 상황에 맞게 선택할 수 있다는 점입니다.면접에서 “CSR, SSR, ISR 차이점이 뭔가요?”라고 물으면, 장단점과 선택 기준까지 연결해서 답변하는 것이 중요합니다.이번 글에서는 CSR, SSR, ISR 개념부터 실무 적용 사례까지 완벽하게 정리합니다.📌 1. CSR (Client Side Rendering)✅ 정의**브라우저(Client)**가 JavaScript를 받아서 실행 후 화면을 렌더링하는 방식HTML 파일에는 최소한의 구조만 있고, 브라우저가 JS를 해석해 실제 콘텐츠를 만듦✅ 흐름브라우저가 빈 HTML과 JS 파일 수신JS가 실행되면서 데이터 fetch최종적으로 화면..

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 API 호출 및 데이터 페칭 최적화1. Next.js에서 API 호출이 중요한 이유쇼핑몰 애플리케이션에서는 상품 목록, 주문 내역, 사용자 정보 등을 백엔드에서 가져와야 합니다.Next.js에서는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 방식을 선택하여 최적의 데이터 페칭 전략을 적용할 수 있습니다.✅ 데이터 페칭 최적화의 핵심 목표SEO 최적화 (SSR/SSG 활용)빠른 로딩 속도 (캐싱, 데이터 프리페칭)사용자 경험 향상 (로딩 상태 관리, SWR 사용)💡 이 챕터에서는 Next.js에서 API를 최적화하여 데이터를 ..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js 개요 및 특징이번 글에서는 Next.js의 개념과 특징, 그리고 React와의 차이점을 설명합니다.✅ Next.js가 무엇인지 이해하고, 기존 React와 비교하여 어떤 점이 다른지 살펴보겠습니다.📌 1. Next.js란?✅ Next.js 개념Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 것이 핵심 특징입니다.Vercel에서 개발하였으며, SEO 최적화, 성능 개선, 개발 편의성을 강화한 React의 업그레이드 버전으로 볼 수 있습니다.✅ Next.js의 주요 특징서버 사이드 렌더링 (SSR) → 서버에서 데이터를 받아 페이지를 렌더링한 후 클라이언트에 전달정적..