사전과제
1. SSR과 CSR에서의 주요 차이점은 무엇인가요?
CSR과 SSR은 유저가 브라우저에서 보는 화면인 "UI를 어디서 만들어 주는지"에 따라 구분한다.
1. 웹페이지 로드 시간
웹 페이지 로드 시간은 요청이 서버로 전송되는 시점과 브라우저에서 요청이 렌더링되는 시점 사이에 걸리는 시간입니다. 이는 웹사이트나 웹 애플리케이션의 사용자 경험(UX)과 관련하여 중요한 측면 입니다. CSR과 SSR의 웹 페이지 로드 시간은 두 가지 시나리오에서 다릅니다.
첫 페이지 로드 시간
: 사용자가 처음으로 웹사이트를 진입할 때 소요되는 평균 시간을 나타냅니다.
SSR이 CSR보다 빠르다.
- CSR : 기본 HTML, CSS 및 필요한 모든 스크립트를 한 번에 로드한 다음 HTML을 브라우저에서 사용할 수 있는 콘텐츠로 컴파일합니다.
- SSR : 첫번째 페이지 로드 시간에 있어서 일반적으로 더 적은시간이 걸립니다.
첫 페이지 이후 로드 시간
: 한 페이지에서 다른 페이지로 이동하는 데 걸리는 평균 시간
CSR이 SSR보다 빠르다.
- CSR : 처음에 스크립트를 로드했으므로 시간이 짧아지고 성능이 향상됩니다.
- SSR : 첫 페이지 로드시 전체 요청 주기가 반복됩니다.
2. 캐싱의 영향
CSR이 SSR보다 큰 이점이 있다.
- CSR : 게으른 모듈 로딩이 필요하지 않은 한 실제로 CSR 기반 웹 애플리케이션은 인터넷 없이도 실행될 수 있습니다.(데이터용 API를 호출하지 않는 한) 일단 로드되면 앱은 더 이상 서버에 요청을 보낼 필요가 없습니다.
- SSR : 항상 서버에 대한 요청이 전송되어 느리다.
3. 검색엔진 최적화(SEO)에 미치는 영향
비즈니스 웹사이트에서 검색 엔진 최적화는 중요하며, CSR을 사용할 때는 페이지 메타데이터 변경에 대한 추가 노력이 필요합니다. CSR에서는 JavaScript 실행에 따라 메타데이터가 동적으로 생성되므로 ReactJS나 Angular와 같은 라이브러리를 사용하여 각 페이지에 메타데이터를 설정해야 합니다. 반면에 SSR을 사용하면 페이지 메타데이터가 항상 정확하게 전달되어 검색 엔진 최적화에 더 유리합니다.
2. React와 Next.js중 어떤 상황에서 각각을 선택해야 하나요?
React (CSR)
create-react-app로 만든 React.js 앱은 CSR(Client-Side-Rendering)
Next.js (SSR)
creat-next-app로 만든 Next.js 앱은 SSR(Server-Side-Rendering)
1. 동적 콘텐츠 로딩
서버는 높은 컴퓨팅 성능과 빠른 네트워킹 속도를 갖춰 콘텐츠를 빠르게 가져올 수 있으며, 클라이언트는 성능이 제한돼 동적 콘텐츠 렌더링이 더 오래 걸릴 수 있습니다. 이 때, 웹 사이트에 반복적인 동적 콘텐츠 렌더링이 필요한 경우 Next.js(SSR)이 React(CSR)보다 더 효과적입니다.
2. 웹 애플리케이션 UX v/s 웹 사이트 UX
거의 동일해 보이지만 웹 애플리케이션과 웹 사이트는 서로 다른 웹 콘텐츠 형식입니다. 웹 애플리케이션은 회계, CRM, 인사 관리, 프로젝트 관리 등과 같은 목적으로 사용할 수 있는 완전한 애플리케이션입니다. 반면 웹 사이트는 비즈니스에 대한 정보를 제공하는 콘텐츠입니다.
웹 애플리케이션은 사용자가 웹 애플리케이션에서 데이터 입력을 수행하고 보고서를 생성하기 때문에 웹 사이트에 비해 훨씬 더 많은 사용자 상호 작용을 포함합니다. 사용자 상호 작용이 더 많은 시나리오에서는 클릭이 오래 걸리지 않도록 하는 것이 중요합니다. 따라서 React(CSR)은 Next.js(SSR)에 비해 웹 애플리케이션에 더 잘 작동합니다.
반면에 웹 사이트의 경우 일반적으로 캐싱이 렌더링 속도를 높이는 역할을 하므로 클릭할 때마다 새 웹 페이지가 로드되어도 고객은 괜찮습니다. 또한 SSR은 크롤러에 대한 올바른 메타데이터도 보장합니다. 이는 React(CSR)에 비해 웹사이트에 Next.js(SSR)을 더 좋게 만듭니다.
3. PWA를 구현할 때 Service Worker의 역할은 무엇인가요?
Progressive Web App (PWA)를 구현할 때, Service Worker는 중요한 역할을 수행합니다. Service Worker는 브라우저의 백그라운드에서 동작하는 스크립트로, 웹 페이지와는 별도로 독립적으로 실행됩니다. 여러 가지 기능을 제공하며 PWA의 핵심적인 부분 중 하나입니다. 다음은 Service Worker의 주요 역할입니다:
1. Offline 기능 제공
Service Worker는 웹 애플리케이션이 오프라인 상태에서도 작동할 수 있도록 지원합니다. 캐싱을 통해 필요한 리소스를 로컬에 저장하고, 사용자가 오프라인 상태일 때 해당 리소스를 로드하여 애플리케이션이 작동할 수 있도록 합니다.
2. 자원 캐싱
Service Worker는 웹 애플리케이션의 자원들을 캐싱하여 성능을 향상시킵니다. 사용자가 웹 페이지를 방문할 때 필요한 리소스를 미리 캐싱하면, 빠른 로딩 속도와 더 나은 사용자 경험을 제공할 수 있습니다.
3. Push 알림
Service Worker를 사용하면 서버로부터 푸시 알림을 받을 수 있습니다. 이를 통해 사용자에게 중요한 정보나 업데이트를 실시간으로 전달할 수 있습니다.
4. 백그라운드 동기화
사용자가 애플리케이션을 사용하지 않는 동안에도 Service Worker를 활용하여 백그라운드에서 데이터를 동기화할 수 있습니다. 이를 통해 애플리케이션이 항상 최신 데이터를 유지할 수 있습니다.
5. 보안 강화
HTTPS를 통한 보안 연결을 요구하므로, Service Worker를 통해 애플리케이션의 보안 수준을 높일 수 있습니다.
Service Worker는 이러한 기능들을 통해 PWA의 핵심 특성 중 하나인 오프라인 지원과 높은 성능을 실현하는데 기여합니다.
4. SSR, CSR, SPA, PWA, Electron등 다양한 전략이 있는데, 각 전략들은 어떤 상황에 사용되는 것이 적합하며 비즈니스에 어떤 이점을 가져다줄까요?
1. SSR (Server-Side Rendering)
특징: 서버에서 초기 페이지 렌더링을 수행하고 완성된 HTML을 클라이언트에게 전송하는 방식.
적절한 상황: 검색 엔진 최적화(SEO)가 중요한 경우, 초기 로딩 성능이 중요한 경우.
비즈니스 이점: 검색 엔진에서 페이지가 잘 색인되므로 SEO에 유리하며, 초기 로딩 속도를 개선하여 사용자 경험을 향상시킬 수 있음.
2. CSR (Client-Side Rendering)
특징: 브라우저에서 JavaScript를 사용하여 동적으로 페이지를 렌더링하는 방식.
적절한 상황: 사용자 경험을 강조하고자 하는 경우, 초기 로딩 속도가 상대적으로 중요하지 않은 경우.
비즈니스 이점: 빠른 네비게이션 및 상호 작용, 클라이언트 측에서 동적인 컨텐츠 업데이트가 가능하므로 사용자 경험 향상.
3. SPA (Single Page Application):
특징: 전체 애플리케이션을 하나의 페이지로 로드하고, 동적으로 콘텐츠를 갱신하는 방식.
적절한 상황: 사용자 경험 강조, 빠른 네비게이션 및 상호 작용이 필요한 경우.
비즈니스 이점: 뛰어난 사용자 경험, 서버에 부담이 적어지는 등의 장점.
4. PWA (Progressive Web App):
특징: 모바일 및 데스크톱에서 사용할 수 있는 웹 애플리케이션으로, 오프라인에서도 작동할 수 있고, 푸시 알림 등을 지원함.
적절한 상황: 오프라인 사용이 중요하거나, 앱 스토어에 의존하지 않고 사용자에게 접근하고자 하는 경우.
비즈니스 이점: 오프라인 지원, 푸시 알림 등을 통한 사용자 참여 촉진, 앱 스토어의 의존성 감소.
5. Electron
특징: 크로스 플랫폼 데스크톱 애플리케이션을 개발하기 위한 오픈 소스 프레임워크.
적절한 상황: 데스크톱 애플리케이션을 개발하고자 하는 경우.
비즈니스 이점: 데스크톱 플랫폼에서 동작하며, 웹 기술을 사용할 수 있어 개발 및 유지보수가 편리하며, 다양한 운영체제에서 실행 가능.
링크
멋져요