CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
말 그대로 클라이언트 단에서 렌더링을 한다는 것.전체 페이지의 렌더링을 서버가 아닌 클라이언트(브라우저)에서 처리함.
CSR의 작동 방식
- 클라이언트가 서버에 페이지 요청
- 서버는 초기 HTML 문서와 JS, CSS를 응답으로 보내줌
- 클라이언트는 받은 HTML 문서를 해석하고, JavaScript를 실행하여 동적으로 페이지를 생성합니다.
- 클라이언트는 서버에 필요한 데이터를 요청하고, 데이터를 받은 후에 페이지를 완전히 렌더링합니다.
CSR의 장점:
- 사용자 경험(UX): CSR은 페이지가 로드되는 초기 시점에 필요한 최소한의 HTML과 CSS만 전송하기 때문에 초기 로딩 시간이 짧아집니다. 사용자는 빠른 페이지 로딩으로 인해 더 나은 사용자 경험을 얻을 수 있습니다.
- 서버 부하 감소: 서버는 초기 HTML 문서와 정적 파일만 전송하고, 페이지 렌더링을 클라이언트에게 위임하므로 서버의 부하가 감소합니다. 트래픽이 많은 웹 애플리케이션의 경우, 서버의 성능 향상과 확장성을 높일 수 있습니다.
- 재사용 가능한 코드: CSR은 클라이언트 측에서 동작하기 때문에, 서버와 독립적으로 프론트엔드 코드를 개발할 수 있습니다. 이는 재사용 가능한 코드의 작성과 개발 프로세스의 효율성을 높여줍니다.
CSR의 단점:
- 초기 로딩 시간: CSR은 초기에 필요한 HTML, JavaScript 및 CSS 파일을 모두 다운로드해야 하기 때문에 초기 로딩 시간이 길어질 수 있습니다. 따라서, 초기 로딩 시간이 중요한 경우에는 CSR보다는 다른 렌더링 방식을 고려해야 할 수 있습니다.
- 검색 엔진 최적화(SEO): CSR은 초기 HTML에 대부분의 콘텐츠를 동적으로 삽입하기 때문에, 일부 검색 엔진에서는 페이지의 콘텐츠를 인식하는 데 어려움을 겪을 수 있습니다. 이는 SEO에 영향을 줄 수 있습니다. 이러한 문제를 해결하기 위해 추가적인 조치가
SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
SPA(Single Page Application)는 클라이언트 측에서 전체 페이지를 동적으로 렌더링하는 웹 애플리케이션입니다.
SPA는 초기 로딩 후에는 클라이언트와 서버 간의 데이터 교환을 통해 필요한 부분만 업데이트하여 페이지를 갱신합니다. 이러한 접근 방식은 CSR(Client-side Rendering)로 인해 좋은 사용자 경험을 제공하지만, 일부 상황에서는 SSR(Server-side Rendering)이 필요할 수 있습니다
- 검색 엔진 최적화 (SEO): SPA는 초기 로딩 시에 빈 페이지를 전송하고, 그 후에 JavaScript를 사용하여 동적으로 콘텐츠를 렌더링합니다. 그러나 일부 검색 엔진은 JavaScript를 실행하지 않거나 제한적으로 실행하기 때문에, SPA의 콘텐츠를 인덱싱하는 데 어려움을 겪을 수 있습니다. 이로 인해 검색 엔진에서 웹 앱의 콘텐츠가 제대로 인식되지 않을 수 있습니다. SSR을 사용하면 서버에서 초기에 완전한 페이지를 렌더링하여 검색 엔진이 콘텐츠를 쉽게 찾고 인덱싱할 수 있습니다.
- 초기 로딩 속도 개선: SPA는 초기에 필요한 JavaScript, CSS 및 데이터를 모두 다운로드해야 하므로 초기 로딩 속도가 상대적으로 느릴 수 있습니다. 사용자는 초기 로딩 시간이 길어지면서 페이지가 텅 빈 상태로 보일 수 있습니다. SSR은 서버에서 초기 HTML을 생성하여 사용자에게 빠른 초기 로딩 속도와 완전한 페이지를 제공할 수 있습니다. 이후에는 클라이언트에서 동적으로 상호작용할 수 있습니다.
- 검색 엔진 이외의 환경에서의 렌더링: 일부 환경에서는 JavaScript가 제한되거나 비활성화되어 있을 수 있습니다. 예를 들어, 웹 크롤러, 소셜 미리보기, 웹 페이지 캐싱 등의 경우에는 JavaScript가 실행되지 않을 수 있습니다. SSR은 이러한 환경에서도 콘텐츠를 제대로 렌더링하여 보여줄 수 있습니다.
Next.js 란?
React 기반의 프레임워크로, CSR(Client-side Rendering)과 SSR(Server-side Rendering)을 모두 지원하는 기능을 제공합니다. 따라서 Next.js는 CSR과 SSR을 유연하게 조합하여 사용할 수 있습니다.
Next.js는 기본적으로 SSR을 위해 설계되었지만, 페이지 단위로 CSR을 적용할 수도 있습니다. Next.js에서 CSR을 사용하려면 페이지 컴포넌트에 getInitialProps 메서드나 getServerSideProps 메서드를 사용하여 데이터를 서버로부터 불러오는 로직을 작성할 수 있습니다. 이로써 초기 페이지 로딩 시에 필요한 데이터를 서버에서 가져와 렌더링할 수 있습니다.
CSR과 SSR의 조합은 Next.js의 핵심 기능 중 하나입니다. Next.js는 페이지를 자동으로 분할하고 필요에 따라 CSR 또는 SSR을 적용하여 최적의 성능을 제공합니다. 이를 통해 초기 로딩 속도 개선과 검색 엔진 최적화를 동시에 달성할 수 있습니다.
Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
https://github.com/vercel/next.js/ (Next.js Github 레포지토리)
_document.js, _app.js, getServerSideProps 같은 요소들에 대해 설명을 요구하는 과제가 아닙니다.
오히려 Next.js 코드 베이스 내부를 살펴보라는 의미입니다.