1. CSR과 장단점
CSR (Client-side Rendering)은 웹 애플리케이션의 렌더링을 클라이언트 측에서 처리하는 방식을 말합니다. 클라이언트가 서버로부터 초기 HTML 파일을 받은 후, 웹 페이지의 구조와 레이아웃을 표시하고, JavaScript를 사용하여 데이터를 동적으로 로드하고 렌더링합니다. 클라이언트는 필요한 데이터를 요청하고, 서버는 JSON 또는 XML과 같은 데이터 형식으로 응답합니다. 그리고 클라이언트는 이 데이터를 가지고 페이지를 업데이트하고, 필요한 부분만 다시 렌더링합니다.
CSR의 장점:
빠른 초기 로딩: 페이지의 초기 렌더링에 필요한 최소한의 HTML과 CSS만 서버로부터 받아와 빠르게 표시됩니다.
좋은 사용자 경험: 데이터의 일부만 변경되더라도 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하므로, 사용자 경험이 원활하게 유지됩니다.
클라이언트 측 렌더링: 클라이언트 측에서 JavaScript를 사용하여 동적으로 컨텐츠를 로드하고 렌더링할 수 있으므로, 풍부한 상호작용이 가능합니다.
CSR의 단점:
초기 로딩 속도: 초기에 필요한 HTML과 CSS 이외의 데이터를 로드하기 위해 추가적인 네트워크 요청이 필요하므로 초기 로딩 속도가 느릴 수 있습니다.
SEO (검색 엔진 최적화) 문제: CSR은 초기 HTML에 모든 컨텐츠가 포함되어 있지 않기 때문에, 일부 검색 엔진은 페이지의 컨텐츠를 인덱싱하기 어려울 수 있습니다. 이를 극복하기 위해 추가적인 조치가 필요합니다.
2. SPA에서 SSR이 필요한 이유
SPA에서 SSR이 필요한 이유는 다음과 같습니다:
SEO 개선: 검색 엔진은 초기 로딩 시점의 HTML을 기준으로 페이지를 인덱싱하므로, SSR을 통해 초기 컨텐츠를 포함한 HTML을 제공하여 SEO를 개선할 수 있습니다.
소셜 미리보기: 링크를 공유할 때 소셜 미리보기에 적절한 제목, 설명, 이미지 등을 포함한 메타데이터를 제공하기 위해 SSR이 필요합니다.
초기 로딩 속도 개선: SSR을 통해 초기 렌더링을 서버 측에서 처리하여, 클라이언트가 HTML을 받은 후 바로 컨텐츠를 표시할 수 있어 사용자 경험을 개선할 수 있습니다.
3. Next.js에서 npm run start를 하면?
Next.js에서 yarn start (또는 npm run start) 스크립트를 실행하면 server.js 파일이 실행됩니다. 이 파일은 Next.js 프로젝트의 핵심 서버 역할을 담당하며, 기본적으로 서버를 시작하고 요청에 대한 라우팅 및 처리를 담당합니다. server.js 파일은 Next.js의 내부 구현 로직을 담고 있으며, 주요 기능은 다음과 같습니다:
HTTP 서버 시작: server.js 파일은 HTTP 서버를 시작하고, 클라이언트의 요청을 대기합니다.
라우팅: 요청된 URL에 따라 적절한 Next.js 페이지 컴포넌트로 라우팅합니다.
렌더링: 요청된 페이지 컴포넌트를 렌더링하고, 필요한 데이터를 미리 로드합니다.
초기 HTML 생성: 렌더링된 페이지 컴포넌트의 HTML과 초기 상태를 생성합니다.
클라이언트 및 서버 측 번들링: Next.js는 클라이언트 측 번들과 서버 측 번들을 생성하고, 필요한 코드를 번들링하여 클라이언트에 제공합니다.
서버 측 렌더링: 초기 HTML 및 초기 상태를 클라이언트에 전달하여 서버 측 렌더링을 수행합니다.
페이지 전환 및 상태 관리: Next.js는 클라이언트 측에서 페이지 전환을 처리하고, 상태 관리를 지원합니다.
server.js 파일은 Next.js의 핵심 동작을 제어하고, 애플리케이션의 시작점입니다. 해당 파일을 통해 서버와 클라이언트의 상호작용, 페이지 라우팅, 렌더링, 상태 관리 등을 제어하며, Next.js 애플리케이션의 기반이 되는 서버 로직을 구현합니다.
