CSR VS SSR / 크로스 브라우징 QA

Q: CSR, SSR 무엇인가?

A

 

🖥  CSR

사용자가 Website 요청을 보내면 CDN이 HTML파일이랑 JS로 접근할 수 있는 링크를 클라이언트로 보내고 클라이언트는 이 파일들을 받아서 실행하고 데이터를 위한 API가 호출됩니다. 서버사이드렌더링 때와는 다르게 클라이언트가 파일들을 받아서 실행하는 그 사이에 사용자는 아무것도 볼 수가 없고, 데이터를 위한 API가 호출 됐을 때는 placeholder 의 정보들이 보입니다. 서버가 API로부터 요청에 응답하고 API로부터 받아온 data를 placeholder자리에 넣음으로써 상호작용이 시작됩니다.

[ 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없습니다 ]

 

💾  SSR

사용자가 Website 요청을 보내면 Server는 즉시 렌더링 가능한 HTML파일을 만들어서 클라이언트에 전달을 합니다. 클라이언트에 전달 되면 HTML은 즉시 렌더링 가능하기 때문에 렌더링이 되고 클라이언트가 JS를 컴파일하는데 그 동안은 JS는 컴파일하기 전이기 때문에 사이트 조작은 불가능한 상태입니다. 아, 그리고 JS 컴파일하고 있는 사이에 사용자는 컨텐츠는 볼 수 있지만 조작만 불가능한 상태라서 사용자의 조작을 기억하고 있다가 브라우저가 JS를 실행하면 기억하고 있던 사용자의 조작이 실행되면서 웹페이지랑 상호작용이 가능하게 되는게 서버 사이드 렌더링 입니다.

 

Q: CSR, SSR 차이점은 무엇인가?

A

웹페이지를 로딩하는 시간에서 첫 페이지일 경우에는 CSR의 경우 모든 파일들을 한번에 불러오기 때문에 필요한 부분의 파일만 불러오는 SSR보다 CSR이 평균적으로 더 느립니다.

하지만 나머지 로딩 시간은 CSR은 이미 첫 페이지 로딩할 때 다 받아놓았기 때문에 빠른데, SSR은 첫 페이지 로딩 과정을 다시 실행해야 해서 더 느립니다.

SEO 대응에서도 차이가 나는데 크롤러로 웹사이트를 읽으면서 CSR은 JS를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행되어야 메타데이터가 바뀌는데 SSR은 애초에 서버 사이드에서 컴파일되어 넘어오기 때문에 크롤러에 대응하기 용이합니다.

 

 

Q: 언제 어떤걸 사용해야 하는가?

A

CSR

• 네트워크가 빠를 때
• 서버 성능이 좋지 않을 때
• 사용자에게 보여줄 데이터의 양이 많을 때
• 메인 스크립트가 가벼울 때

SSR

• 네트워크가 느릴 때
• 검색 엔진 최적화가 필요할 때
• 최초 로딩이 빨라야 하는 사이트 개발이 필요할 때

 

---

 

Q: 크로스 브라우징은 무엇이며 해야하는 이유는?

 

A

크로스 브라우징은 브라우저마다 렌더링 엔진이 다 다르기 때문에 웹페이지 제작 시 의도한 대로 나오지 않거나 깨지는 현상들을 웹 표준 기술을 이용하여 모든 브라우저에서 깨지지 않고 의도한 대로 나올 수 있게 하는 작업 입니다.

 

크로스 브라우징을 해야하는 이유는 크롬이나 익스플로러 외에도 파이어폭스나 사파리, 엣지 등등의 여러 브라우저들은 저마다 각각 다른 속성들을 가지고있기 때문에 동일하게 코드를 작성한다해도 브라우저마다 다르게 보일 수 있어서 적어도 표준 웹기술을 사용하여 비슷하게 맞춰주어 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 해야하기 때문입니다.