💭 클라이언트 vs 서버: 로그인된 유저 정보는 어디서 처리해야 할까?Next.js와 같은 프레임워크를 사용하다 보면 로그인된 유저 정보를 어디서 처리해야 할지 고민이 많다.클라이언트에서 전역 상태로 관리할 수도 있고, 서버에서 유저 정보를 가져와 렌더링 할 수도 있는데 그렇다면, 어떤 방식이 더 나을까? 이 부분에 대해서는 CSR(클라이언트 사이드 렌더링) 방식과 SSR(서버 사이드 렌더링)를 비교하며 그 해답을 정리해 봤다. 📌 1. 기존 CSR 방식에서는 왜 클라이언트에서 처리했을까?Next.js 등장 이전에는 CSR 중심의 앱(React)에서는 서버라는 개념이 사실상 존재하지 않았다.앱에서는 모든 로직과 렌더링을 브라우저에서 처리했고, 로그인된 유저 정보 또한 클라이언트에서 Zustand,..

🧠 라우터 캐시란?라우터 캐시는 사용자가 페이지를 탐색할 때 해당 경로의 RSC Payload (Server Component 결과)를 캐싱한다.방문한 경로 세그먼트는 캐싱사용자가 이동할 가능성이 높은 경로는 미리 가져옴(prefetch) 효과:즉각적인 뒤로/앞으로 탐색: 방문한 경로가 라우터 캐시에 저장되므로, 사용자가 뒤로 가기 또는 앞으로 가기 버튼을 눌렀을 때 페이지가 즉시 로드빠른 새 경로 이동: 경로 세그먼트가 미리 가져와지면, 새 경로로의 탐색이 훨씬 빠르게 이루어진다. 이는 특히 부분 렌더링(Partial Rendering)과 결합되어, 페이지의 특정 부분만 업데이트되어도 전체 페이지를 다시 로드할 필요가 없어진다.상태 유지: 이동 중에도 전체 페이지를 다시 로드하지 않으므로, Reac..

서버 함수(서버 액션) 정의react 공식문서2024년 9월까지 모든 서버 함수를 "서버 액션"이라고 불렀습니다. 서버 함수가 액션 속성으로 전달되거나 액션 내부에서 호출되면 서버 액션이 되지만, 모든 서버 함수가 서버 액션인 것은 아닙니다. 위의 내용을 바탕으로 해석해 보면 서버 함수는 큰 개념이고, 서버 액션은 그 안의 특수한 실행 방식이다. 현재 서버 함수는 폼 action 뿐만 아니라 클라이언트 이벤트 핸들러에서도 호출되어 다양하게 사용되고 있다.서버 함수(Server Function): 서버에서 실행되는 모든 함수서버 액션(Server Action): 서버 함수 중에서 `` 을 통해 호출되는 함수 사용하는 방식은 아래의 공식문서를 참고https://nextjs.org/docs/app/buildi..

1️⃣ CSR(Client-Side Rendering) 정의: 초기 페이지 요청 시 서버에서 빈 HTML과 전체 JavaScript 파일(React App)을 번들 형태로 전송하고, 브라우저는 JavaScript(React App)를 실행하여 HTML을 동적으로 생성하는 렌더링 방식이다. 과정: 렌더링 주체: 클라이언트 장점:향상된 UX 제공: 초기 페이지 요청 이후, 페이지 이동 시에는 서버에 새로운 HTML을 요청하지 않고, 전달받은 자바스크립트를 기반으로 동적으로 렌더링 하여 빠른 전환이 가능서버 부하 감소: 초기 페이지 요청 이후, 대부분의 렌더링 작업을 클라이언트 측에서 처리하므로 서버 부하가 줄어듦 단점:초기 로딩 지연: 첫 페이지 로드 시, 필요한 모든 자원(HTML, CSS, JavaScr..

📝 순서초기 HTML을 서버에서 생성해 브라우저에 전송하여 검색 엔진 최적화(SEO)와 빠른 FCP(First Contentful Paint) 제공한다.서버 컴포넌트는 서버에서만 실행시켜, js.bundle에는 포함시키지 않아 번들 크기를 줄여 빠른 TTI(Time to Interactive) 제공한다.초기 페이지 이후, 페이지 이동은 CSR(Client Side Rendering) 방식으로 처리하여, 빠른 페이지 전환과 부드러운 UX를 제공한다. Rendering 과정 🚊 브라우저 초기 요청 단계 🔵 1. 서버에서 사전 렌더링 (SSR + RSC 시작)2-1. 서버 컴포넌트 실행서버에서 우선적으로, 서버 컴포넌트(RSC)가 실행이 과정에서 데이터 페칭, 계산 등 서버 사이드에서 필요한 로직을 ..

이 글의 목적: 프로젝트 이미지 최적화 과정에서  next.js/image를 사용하였고, next.js/image의 실제 작동 원리까지 알고 싶어 이 글을 작성해본다.  ✨✨ NEXT.JS의 이미지 최적화1. [Next.js/Image의 내용 및 기능]에 대한 설명은 아래의 링크를 통해 확인 가능합니다.!! next/Image 컴포넌트란?next/Image 컴포넌트란?  표준 HTML `img`태그를 확장한 것으로, 이미지를 자동으로 최적화한다. 이 컴포넌트는 서버 사이드에서 자동으로 이미지 크기를 조정하고, 최적의 포맷을 선택하여 불필요leejungoo.tistory.com  📂 최적화 파일next.js/image를 사용한다고 해서 모든 이미지 파일이 최적화되는 것은 아니다.실제 [레스터 이미지 형식..