[서버 사이드 렌더링 - 2단계] 빙봉(김윤경) 미션 제출합니다.

[Yoonkyoungme]

월하 안녕하세요! 벌써 우테코 마지막 미션이네요. 시간이 정말 빠르게 지나간 것 같아요😭

👀 리뷰를 통한 생각 나눔

1. SSR 환경에서 웹 브라우저는 어떤 과정으로 하이드레이션(hydration)을 진행하는지 상세히 서술하시오.

💡 작성 요령: 서버에서 렌더링된 HTML과 클라이언트 측에서 React로 다시 그려질 때 발생할 수 있는 차이점은 무엇이며, 이로 인해 생길 수 있는 문제는 어떤 것이 있는지 고민해 보세요.

SSR 환경에서 하이드레이션이 진행되는 과정

브라우저가 서버에 요청을 보내면, 서버는 미리 렌더링된 HTML을 반환합니다. 이 HTML은 서버에서 렌더링된 React 컴포넌트의 결과로, 브라우저는 이를 파싱하여 사용자에게 정적인 웹 페이지를 먼저 보여줍니다. 이후, 브라우저는 script 태그를 통해 클라이언트 측의 JavaScript 번들을 다운로드합니다. 이 시점에서는 React의 클라이언트 사이드 로직이 아직 실행되지 않아 페이지는 상호작용이 불가능한 상태입니다. 그러나 JavaScript 번들이 로드되고 hydrateRoot() 함수가 실행되면, 브라우저는 이미 렌더링된 DOM과 React 컴포넌트를 비교하여 동기화합니다. 이때부터 페이지는 SPA처럼 동적인 상호작용을 지원하게 됩니다.

서버에서 렌더링된 HTML과 클라이언트에서 React로 다시 그려질 때 발생할 수 있는 차이점과 이로 인한 문제점

하이드레이션 중 발생할 수 있는 주요 문제는 불일치(mismatch)입니다. 서버에서 렌더링된 HTML과 클라이언트에서 React가 생성하려는 DOM 구조가 다를 경우 불일치가 발생합니다. 이는 서버와 클라이언트의 데이터나 환경 차이, 시간에 따른 데이터 변경 등으로 인해 발생할 수 있습니다. 불일치가 생기면 React는 경고 메시지를 띄우고, 최악의 경우 전체 컴포넌트 트리를 다시 렌더링해야 할 수 있어 성능이 떨어질 수 있습니다. 또한 사용자 경험 측면에서 화면 깜빡임이나 레이아웃 변경과 같은 시각적인 불안정함을 유발할 수 있습니다.

2. 다음 두 가지 상황의 동작 과정을 비교해 설명하시오.

• 사용자가 처음 영화 목록 페이지에 접속할 때
• 하이드레이션 후, 사용자가 영화 목록에서 특정 영화를 클릭하여 상세 페이지로 이동할 때

💡 작성 요령: 웹 브라우저는 처음에 서버에 요청할 때와 영화 목록을 요청할 때 반환 받는 값에는 어떤 차이가 있나요?

사용자가 처음 영화 목록 페이지에 접속할 때

사용자가 처음 영화 목록 페이지에 접속할 때, 브라우저는 서버에 HTML을 요청합니다. 서버는 영화 목록 데이터를 미리 받아와 이를 포함한 HTML을 사용자에게 전달합니다. 브라우저는 전달받은 HTML을 먼저 화면에 렌더링한 후, React의 하이드레이션을 통해 서버에서 받은 콘텐츠에 이벤트를 연결하고 상태를 동기화합니다.

하이드레이션 후, 사용자가 영화 목록에서 특정 영화를 클릭하여 상세 페이지로 이동할 때

하이드레이션이 완료된 후, 사용자가 영화 목록에서 특정 영화를 클릭하면 페이지 전체를 새로고침하지 않고 클라이언트 측에서 동작하는 SPA 방식으로 처리됩니다. 즉, 클릭한 영화의 상세 정보를 서버에서 다시 가져오는 대신, 클라이언트가 API를 통해 필요한 데이터를 받아오고 이를 기반으로 페이지가 동적으로 업데이트됩니다.

3. 다음 두 가지 상황의 동작 과정에서 라우팅의 차이점이 무엇인지 서술하시오.

• 사용자가 https://주소/detail/12345와 같이 브라우저에 직접 입력한 뒤 페이지로 이동할 때
• 하이드레이션 후, 사용자가 영화 목록에서 특정 영화를 클릭하여 상세 페이지로 이동할 때

💡 작성 요령: 각 상황에서 요청을 처리하는 주체가 무엇인지 생각해 보세요.

브라우저에 URL을 직접 입력한 경우

사용자가 https://주소/detail/12345와 같은 URL을 직접 입력하면, 서버 사이드 라우팅이 발생합니다. 이 요청은 서버로 전송되어 서버에서 해당 경로에 맞는 페이지를 생성하고 응답으로 전체 HTML을 반환합니다.

하이드레이션 후, 영화 목록에서 특정 영화를 클릭한 경우

하이드레이션 후 사용자가 클릭으로 페이지 이동 시, 클라이언트 사이드 라우팅이 일어납니다. 이 경우 브라우저에서 JavaScript를 통해 라우팅을 처리하며, 필요한 데이터만 서버로부터 비동기적으로 가져와 현재 페이지를 업데이트합니다.

[vi-wolhwa]

빙봉 안녕하세용! 마지막 미션도 멋지게 마무리해주셨네요!
금요일 런칭데이 준비는 잘 되어가고 있으신가요!ㅎㅎ
미션하시느라 고생하셨구, 마지막 날까지 화이팅이에🍀