나는 Next.js를 비교적 최근에 접해봤다. 그래서 자연스럽게 App Router만 사용해봤고, Pages Router는 사용해본 적이 없었다. 기술 면접을 준비하면서 두 라우터 방식의 차이와 각각의 장단점을 명확히 알고, 왜 내가 App Router를 선택했는지 설명할 수 있어야 한다는 필요성을 느끼게 되었다. 그래서 이번 글에서는 Next.js의 Pages Router와 App Router의 차이점을 정리해보고, 어떨 때 사용하는 것이 좋은지 적어보고자 한다.📄 Next.js의 Page Router (Next.js 13 이전까지의 기본 방식)Pages Router는 Next.js의 전통적인 라우팅 시스템으로,pages 디렉토리의 파일 구조가 곧 애플리케이션의 라우트 구조가 되는 파일 기반 라우팅을..

🔍 서버 사이드 렌더링이란? (SSR)SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 서버에서 이루어지는 아키텍처를 의미한다. 사전적인 의미는 이렇지만, 일반적으로 현대의 SSR은 "첫 HTML 렌더링을 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리" 하는 하이브리드 형태의 SSR을 가리킨다. SSR은 첫 HTML 렌더링을 서버에서 처리하기 때문에, 사용자의 화면에 콘텐츠가 그려지는데 걸리는 시간 (FCP)이 짧다. 🚀 Next.js의 SSR 실행 과정 1️⃣ 접속 요청 - 사용자가 브라우저에서 특정 URL에 접속하면, 브라우저는 서버에 해당 URL에 대한 요청을 보낸다. Next.js는 해당 요청을 감지하고, SSR을 통해 서버에서 페이지를 렌더링할 준비..