NextJS에서의 네비게이션 소개

이번 교과서 섹션에서는 NextJS에서 링크가 어떻게 작동하는지에 대해 이야기하겠습니다.

먼저, 링크의 특별한 점이 무엇인지 논의해 봅시다. 사이트 제작의 다양한 접근 방식에서 링크를 살펴보겠습니다.

React 기반 사이트

당신에게 React 기반 사이트가 있다고 가정해 봅시다. 알다시피, React는 SPA - 사용자가 항상 하나의 페이지에 머무르는 사이트를 나타냅니다. React Router를 연결할 수 있으며, 사용자는 물리적으로는 하나의 파일에 머물면서도 다른 페이지들을 이동하는 것처럼 느낄 것입니다.

이때 사용자는 링크를 클릭하고, 다른 페이지에 도착한 것처럼 느끼겠지만, 브라우저의 사이트 페이지는 다시 로드되지 않을 것입니다 - React는 사용자가 화면에서 보는 것을 동적으로 구성할 것입니다.

이러한 방식에서 사용자는 첫 페이지 방문 시 사이트 레이아웃을 받고, 그 후 사이트의 부분들은 JavaScript를 통해 단순히 변경됩니다. 동시에 사이트는 AJAX를 통해 서버에서 데이터를 요청할 수 있습니다.

이러한 접근 방식은 호스팅의 부하를 줄여줍니다 (우리의 돈이 드는 자원들), 또한 사용자의 인터넷 채널 부하도 줄여줍니다.

그러나 이러한 접근 방식에는 단점이 있습니다 - SEO 문제입니다. 사이트에는 일련의 링크가 있고, 주소 표시줄에 무언가 변경되며, 메신저를 통해 사이트의 특정 페이지 링크를 공유할 수도 있습니다. 그러나 페이지 내용은 클라이언트에서 동적으로 생성되며 검색 엔진은 이를 처리할 수 없습니다. 따라서 이러한 사이트는 검색 결과에서 상위에 노출되지 않을 것입니다.

그러나 모든 사이트가 검색 엔진에서 상위 노출을 목표로 하는 것은 아닙니다. 만약 당신의 사이트가 그렇지 않다면, 이 방식은 당신에게 완벽히 작동할 수 있습니다.

백엔드 기반 사이트

당신의 사이트가 백엔드 언어 중 하나로 만들어졌다고 가정해 봅시다. 예를 들어, PHP로요.

이 경우, 사용자가 링크를 클릭할 때마다 사이트 페이지는 매번 완전히 로드될 것입니다.

문제는 페이지의 상당 부분이 이미 사용자에게 있다는 것입니다. 왜냐하면, 이미 알고 있듯이, 페이지에서는 일반적으로 콘텐츠와 메타데이터만 변경되고 나머지는 변경되지 않기 때문입니다.

콘텐츠만 변경되었는데 왜 나머지를 다운로드해야 할까요? 이는 서버와 인터넷 채널에 과도한 부하를 생성합니다.

또 다른 문제가 있습니다. 우리가 받는 페이지의 콘텐츠에 온라인 상점과 같은 제품 목록이 있다고 가정해 봅시다. 분명히, 각 제품은 동일한 레이아웃을 가지고 있습니다. 제품 데이터와 제품 출력 템플릿만 다운로드하는 것이 더 최적일 것입니다. 그리고 나서 클라이언트에서 각 제품을 이 템플릿에 출력할 것입니다. 그러나 우리는 반복되는 제품 레이아웃과 함께 제품들을 다운로드합니다.

요약하면, 순수 백엔드 기반 사이트의 경우 네트워크를 통해 많은 불필요한 데이터를 전송하게 됩니다.

그러나, 이 경우 우리는 SEO 문제를 겪지 않습니다. 요청된 URL에는 항상 검색 엔진이 이해할 수 있는 정적 콘텐츠가 반환됩니다.

NextJS 기반 사이트

NextJS는 두 접근 방식을 결합합니다. 사용자가 주소 표시줄에 직접 URL을 입력하면, 응답으로 페이지의 정적 콘텐츠가 전송됩니다.

그러나 사용자가 우리 사이트의 링크를 클릭하기 시작하면, 사이트 페이지는 완전히 새로 고쳐지지 않고 AJAX를 통해 사용자에게 필요한 데이터가 로드됩니다.

검색 엔진이 우리 사이트를 탐색할 때, 그것은 필요한 정적 콘텐츠를 봅니다. 사용자가 우리 사이트를 탐색할 때, 우리 사이트는 SPA처럼 행동하기 시작합니다.

그리고 가장 중요한 것은, NextJS가 이 모든 것을 자동으로 수행한다는 것입니다! 우리는 이것에 대해 걱정할 필요가 없습니다 - NextJS가 모든 것을 알아서 처리할 것입니다. 아름답죠!

다음 강의에서는 NextJS가 설명된 방식으로 작동하도록 만드는 방법을 분석할 것입니다.