Quiz - CSR, SSR, Hydration
1. CSR이 SEO-friendly하지 않은 이유를 브라우저 렌더링과 연관지어 설명해주세요.
- CSR은 처음에 서버로부터 리소스를 받아올 때 먼저 빈 HTML을 먼저 받아오고 그 후 JavaScritpt, CSS 파일을 받은 후에 페이지가 채워지기 때문에, 검색엔진 크롤러가 페이지에 방문했을 때 빈 페이지만 보이므로 검색 노출이 되지 않아서 SEO-friendly하지 않다고 할 수 있습니다.
1.1 SEO-friendly하게 만드는 방법에 대해 설명해주세요.
- meta 태그에 앱에 대한 정보를 작성해둡니다.
- 빈 HTML을 사용하기 보다 적절한 컨텐츠가 있는 HTML을 사용합니다.
- 서버에서 HTML을 내려주고, 브라우저에서 JS를 추가해서 인터렉티브한 페이지를 그려주는 hydration 기법을 사용합니다.
- 서버 컴포넌트를 통해 사용자와의 상호작용이나 상태 관련 로직이 없는 UI를 먼저 그려줍니다.
2. 최초 요청부터 화면에 그려지기까지 SSR의 동작 과정에 대해 설명해보세요.
- 브라우저에서 서버에 최초 GET 요청을 하면, 서버에서 요청 경로에 맞게 페이지를 렌더링해서 생성된 HTML을 응답합니다. - 브라우저에서 응답받은 HTML을 화면에 그려줍니다.
2.1 CSR과 SSR을 성능 지표로 비교해서 설명해주세요.
- CSR은 화면에 빈 HTML이 먼저 렌더링되기 때문에 TTFB가 빠른 반면에 TTI는 상대적으로 느립니다.
- SSR은 서버에서 페이지를 렌더링한 후 브라우저에 전달하기 때문에 TTFB가 상대적으로 느린 반면에 TTI는 빠릅니다.
3. hydration이란 무엇일까요?
- hydration은 서버에서 정적 페이지를 렌더링하고 문자열로 변환하여 브라우저에 넘겨주면, 브라우저에서 HTML 요소에 이벤트 리스너를 연결하여 동적 페이지로 만들어주는 것을 말합니다.
3.1 Progressive hydration에 대해 설명해주세요.
- 점진적 hydration은 모든 앱을 한 번에 hydration하는 대신에 각 node별로 hydrate하여 최소한의 JavaScript를 요청하여 처리하는 것을 말합니다.
- 점진적 hydration은 페이지에서 덜 중요한 부분의 hydration을 지연시킬 수 있습니다. 그러므로 메인 스레드 차단을 방지하고 사용자와 상호작용하기 위해 받아야 하는 JavaScript 크기를 줄일 수 있습니다.
참고
