Next.js는 React 기반의 프레임워크로, 클라이언트 사이드 렌더링뿐만 아니라 서버 사이드 렌더링(SSR)을 위한 기능도 제공합니다. SSR은 웹 애플리케이션의 초기 로딩 속도를 향상시키고 검색 엔진 최적화(SEO)를 개선하는 데 도움이 됩니다. 이번 포스트에서는 Next.js에서 서버 사이드 렌더링이 작동하는 원리에 대해 살펴보겠습니다.
1. Next.js의 빌드 단계
Next.js 애플리케이션은 빌드 단계에서 라우트 정보를 수집하고 각 라우트에 대한 컴포넌트 파일을 프리렌더링합니다. 이때 라우트 정보는 pages 디렉토리 내의 파일과 폴더 구조를 기반으로 생성됩니다. 이 과정에서 Next.js는 각 페이지 별로 서버 사이드 렌더링이 가능한지 여부를 결정합니다.
2. 서버 사이드 렌더링 요청의 처리
웹 브라우저에서 서버 사이드 렌더링이 필요한 페이지에 접근하면, Next.js는 해당 페이지 컴포넌트를 서버에서 실행하여 초기 렌더링 결과를 생성합니다. 이후, 이 결과를 웹 브라우저에 전송합니다. 이 과정에서 페이지에 필요한 데이터를 가져오기 위해 서버의 API나 데이터베이스와 같은 외부 리소스에 접근할 수도 있습니다.
3. 클라이언트 측에서의 재사용
웹 브라우저에서 페이지가 로드된 후에는 Next.js는 해당 페이지를 클라이언트 모드로 전환합니다. 이후에는 클라이언트 측에서 페이지를 조작하고 상태를 업데이트합니다. 단, 클라이언트 측에서의 렌더링은 초기 로딩 시에 이미 서버 사이드에서 렌더링된 결과를 기반으로 진행됩니다. 이는 사용자가 웹 애플리케이션과 상호작용하는 동안에도 서버 사이드 렌더링의 이점을 유지할 수 있도록 합니다.
마무리
Next.js의 서버 사이드 렌더링은 초기 로딩 속도와 SEO 개선에 큰 도움을 주는 기능입니다. Next.js는 빌드 단계에서 라우트 정보를 수집하고 프리렌더링하여 서버 사이드 렌더링을 가능하게 합니다. 서버 사이드 렌더링 요청이 발생하면 해당 페이지를 서버에서 렌더링하고 초기 렌더링 결과를 클라이언트에 전달합니다. 이후 클라이언트 모드에서는 페이지를 조작하고 상태를 업데이트할 수 있습니다.
이 글은 Next.js의 서버 사이드 렌더링 작동 원리에 대한 간략한 소개였습니다. Next.js의 공식 문서와 예제 코드를 참고하시면 더 자세한 내용을 확인하실 수 있습니다.
참고 자료: