Next.js의 CSR 이해: 클라이언트 측 렌더링 설명

CSR(클라이언트 측 렌더링)은 클라이언트 측에서 페이지를 렌더링하는 방법으로, 서버에서 실행되지 않습니다. CSR은 본질적으로 SPA(Single Page Application)와 동일하므로 SPA가 무엇인지, 어떻게 작동하는지 잘 알고 있다면 이미 CSR을 이해하고 있는 것입니다. 하지만 SPA가 무엇인지, 어떻게 기능하는지 잘 모르시는 분들을 위해 아래에서 설명드리겠습니다.

이 글에서는 SPA가 무엇인지, 어떻게 작동하는지 설명하겠습니다. 그다음에는 Next.js의 CSR과 비교하여 Next.js 프로젝트에서 CSR을 구현하는 방법을 보여드리겠습니다.

SPA란 무엇인가요?

SPA(단일 페이지 애플리케이션)는 상호작용할 때마다 새 HTML 페이지를 로드하는 대신 필요에 따라 콘텐츠를 동적으로 다시 작성하는 단일 HTML 페이지로 구성됩니다.

MPA는 어떻게 작동하나요?

SPA를 이해하기 전에 먼저 MPA에 대해 알아야 합니다. 이에 대해 알아봅시다:

SPA가 대중화되기 전에는 다중 페이지 애플리케이션(MPA) 접근 방식을 사용하여 웹사이트를 구축했습니다. 그렇다면 MPA는 어떻게 작동했나요? 개발자로서 홈 페이지("/")와 정보 페이지("/about")라는 두 페이지로 구성된 웹 사이트를 만들고 싶다고 가정해 보겠습니다. 다중 페이지 방법을 사용하여 이를 구축하려면 각 경로에 대해 두 개의 별도 HTML 파일("/"에 대한 main.html 및 "/about"에 대한 about.html)을 생성해야 합니다.

각 HTML 파일에는 해당 페이지에 대한 특정 HTML, CSS 및 JavaScript 코드를 작성해야 합니다. 그러나 머리글 및 바닥글과 같은 코드의 일부 부분은 두 페이지 모두에서 동일합니다. 머리글과 바닥글이 동일하더라도 개발자는 각 HTML 파일에서 이를 반복해야 합니다.

프로젝트가 완료되어 서버에 배포되면 서버는 요청된 모든 리소스와 함께 전체 HTML 페이지를 사용자에게 보냅니다. 예를 들어, 사용자가 홈페이지를 처음 방문하면 서버는 준비된 main.html 파일을 전송하고 사용자는 잠시 기다린 후 즉시 콘텐츠를 볼 수 있습니다. 이 방법은 검색 엔진 크롤러가 귀하의 웹사이트를 방문할 때 사전에 완전히 렌더링되므로 HTML 파일의 모든 콘텐츠를 볼 수 있기 때문에 SEO에 좋습니다.

그러나 사용자가 '/about'과 같은 다른 페이지로 이동하면 프로세스가 다시 시작됩니다. 서버는 모든 리소스(CSS, JS 등)와 함께 about.html 파일을 보냅니다. 사용자는 페이지가 로드될 때까지 한 번 더 기다려야 하며, 인터넷 연결이 느리면 대기 시간이 길어집니다. 더욱 비효율적인 점은 사용자가 머리글과 바닥글이 변경되지 않은 경우에도 동일한 코드를 다시 다운로드해야 한다는 것입니다. 머리글 및 바닥글과 같은 코드 반복은 오늘날의 웹 개발 방식에서 낭비적이고 비효율적입니다.

SPA는 어떻게 작동하나요?

이제 MPA(다중 페이지 애플리케이션)의 작동 방식을 이해했으므로 SPA의 작동 방식을 살펴보겠습니다.

요청할 때마다 페이지 로딩이 지연되고, 코드가 반복되며, 매번 전체 DOM을 다시 빌드해야 하기 때문에 이러한 문제를 해결하기 위해 SPA가 도입되었습니다.

당신이 "/"와 "/about"이라는 두 가지 경로가 있는 웹사이트를 만드는 개발자라고 상상해 보세요. SPA 프레임워크에는 index.html이라는 HTML 파일이 하나만 있습니다. 각 경로에 대해 별도의 HTML 파일을 만드는 대신 각 페이지에 대한 구성 요소를 만들고 동적으로 로드합니다. 예를 들어, 각 경로마다 하나씩 세 개의 구성 요소를 생성하고 이를 index.html로 가져옵니다.

SPA에서는 사이트의 재사용 가능한 섹션(예: 머리글 및 바닥글)을 자체 구성요소로 분리할 수도 있습니다. 각 페이지에 동일한 머리글 및 바닥글 코드를 작성하는 대신 함수 작동 방식과 유사하게 필요한 경우 이러한 구성 요소를 가져오기만 하면 됩니다. 이렇게 하면 반복이 줄어들고 개발이 더 쉬워집니다.

SPA 프로젝트가 서버에 배포되면 서버는 더 이상 페이지의 콘텐츠를 렌더링하지 않습니다. 대신 구성 요소가 포함된 JavaScript 번들과 함께 index.html 파일을 제공합니다. 렌더링은 클라이언트 측 브라우저에서 이루어집니다.

사용자가 사이트를 처음 방문하면 서버는 필요한 JavaScript 파일과 함께 index.html 파일을 보냅니다. JavaScript가 완전히 다운로드되고, 구문 분석되고, 실행된 후에 전체 DOM이 구성되므로 MPA에 비해 대기 시간이 더 길어질 수 있습니다.

그러나 초기 페이지가 로드되면 SPA에서는 페이지 간 이동이 훨씬 빠릅니다. 예를 들어, 사용자가 /에서 /about으로 이동하는 경우 브라우저는 전체 페이지를 다시 로드할 필요가 없습니다. 머리글 및 바닥글과 같은 공통 요소가 이미 로드되어 있으므로 브라우저는 변경되는 특정 콘텐츠(예: /about 페이지 콘텐츠)에 대해서만 JavaScript를 가져옵니다. DOM은 전체 페이지 새로 고침 없이 동적으로 업데이트되므로 사용자는 기존 웹 사이트가 아닌 앱과 상호 작용하는 것처럼 느낄 수 있습니다. 이는 더욱 원활하고 "앱과 유사한" 경험을 제공합니다.

그러나 SPA에는 특히 SEO와 관련하여 단점이 있습니다. 초기 index.html 파일에는 최소한의 콘텐츠(대부분의 데이터는 JavaScript를 통해 로드됨)가 포함되어 있으므로 검색 엔진 크롤러는 빈 페이지를 보고 콘텐츠를 색인화하는 데 어려움을 겪을 수 있습니다. 이것이 바로 SPA의 SEO가 기존 MPA에 비해 어려울 수 있는 이유입니다.

CSR은 SPA 방법과 동일합니까?

예, CSR(클라이언트 측 렌더링)은 렌더링 방법입니다. 즉, 구성 요소를 브라우저에 표시할 수 있는 형식으로 변환하여 사용자가 페이지를 볼 수 있도록 하는 프로세스를 의미합니다. 이해해야 할 핵심은 CSR이 전적으로 브라우저에서 발생한다는 것입니다. React와 Next.js 모두 CSR은 동일한 방식으로 작동하며 클라이언트 측 렌더링에 있어서는 둘 사이에 차이가 없습니다.

예를 들어 CSR에서는 처음으로 웹사이트를 방문하면 서버가 최소한의 콘텐츠가 포함된 index.html 파일을 보냅니다. 하지만 여기에 문제가 있습니다. 이 파일에는 아직 전체 콘텐츠가 포함되어 있지 않습니다. 실제 콘텐츠는 필요한 모든 구성 요소 파일(JavaScript, CSS 등)이 다운로드된 후 브라우저에서 렌더링됩니다. 그런 다음 React는 DOM 트리(Document Object Model)를 구축한 후 실제 DOM의 경량 복사본과 같은 가상 DOM을 생성합니다.

DOM과 가상 DOM이 설정되면 사용자는 페이지를 볼 수 있습니다. 이 렌더링 프로세스는 브라우저에서 발생하며 모든 구성 요소를 표시 가능한 페이지로 변환합니다.

이제 사용자가 한 페이지에서 다른 페이지로 이동하면(가령 from / to /about) React는 새 페이지에 대한 새 가상 DOM을 구축합니다. 이전 가상 DOM과 새 DOM을 비교하고 차이점을 찾아 해당 변경 사항을 실제 DOM에 적용합니다. DOM을 비교하고 업데이트하는 이 프로세스는 효율적으로 이루어지며 모두 브라우저에서 발생합니다.

요약하자면 CSR은 React와 Next.js 모두에서 동일한 방식으로 작동합니다. 렌더링은 브라우저에서 이루어지며 React는 가상 DOM을 사용하여 DOM 업데이트를 효율적으로 처리하므로 사용자 경험이 원활하고 빠릅니다.

Next.js에서 CSR을 구현하는 방법은 무엇입니까?

컴포넌트에서 getStaticProps 또는 getServerSideProps와 같은 서버측 메서드 대신 useEffect와 같은 클라이언트측 메서드를 사용하는 경우 CSR(클라이언트측 렌더링) 메서드에 따라 페이지가 클라이언트에서 렌더링됩니다. 이는 초기 HTML이 로드된 후 브라우저가 렌더링을 처리한다는 의미입니다.

또한 SWR 또는 TanStack Query와 같은 라이브러리를 사용하면 CSR도 활성화됩니다. 이러한 라이브러리는 페이지가 로드된 후 클라이언트에서 데이터 가져오기를 처리하기 때문입니다. 이렇게 하면 구성 요소가 브라우저에서 렌더링되고 데이터 업데이트가 서버 측 개입 없이 클라이언트 측에서 원활하게 이루어집니다.

결론

CSR은 클라이언트에서 프로젝트를 렌더링하는 방법으로 SPA(Single Page Application) 정의와 본질적으로 동일합니다. React는 렌더링을 위해 CSR을 사용하며 이는 MPA(다중 페이지 애플리케이션)와 SPA의 주요 차이점 중 하나입니다. Next.js도 React를 기반으로 구축되었기 때문에 CSR을 사용하지만, SEO를 개선하고 사용자 경험을 향상시키기 위해 Next.js에는 SSG, ISR, SSR을 추가했습니다. SSR, ISR 및 SSG에 대해 읽을 수 있습니다. 내 최신 기사를 계속 업데이트받고 싶다면 내 웹사이트(https://saeed-niyabati.ir)를 팔로우하세요. 읽어주셔서 감사합니다! 이제 안녕!

위 내용은 Next.js의 CSR 이해: 클라이언트 측 렌더링 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!