/red 페이지와 /blue 페이지에 들어갔을 때도 알맞은 컴포넌트가 잘 보이나요?

▲ 그림 20-6 Red와 Blue 컴포넌트

 

지금은 CSS를 불러오지 않기 때문에 스타일이 적용되어 있지 않아도 괜찮습니다. 브라우저에서 자바스크립트도 실행되지 않기 때문에, 현재 브라우저에 나타난 정보는 모두 서버 사이드에서 렌더링된 것으로 간주할 수 있습니다.

만약 자바스크립트를 로딩하면 현재 브라우저에 보이는 데이터가 서버에서 렌더링된 것인지, 클라이언트에서 렌더링된 것인지 분간하기 어려울 것입니다. 서버 사이드 렌더링이 정말 제대로 이루어졌는지 확인하기 위해 개발자 도구의 Network 탭을 열고 새로고침을 해 보세요.

▲ 그림 20-7 Network 탭에서 Response 보기

 

새로고침을 하고 나서 맨 위에 있는 항목(그림 20-7에서는 blue)을 누른 후 우측의 Response를 눌러 보세요. 컴포넌트 렌더링 결과가 문자열로 잘 전달되고 있나요?

하단의 { } 버튼을 한번 눌러 보세요. 코드가 자동으로 들여쓰기되어 더욱 읽기 쉬워집니다.