안녕하세요!
현재 AJAX에 대해 정리하면서 한 가지 의문점이 생겼습니다.
AJAX 이전에는 페이지의 변경이나 이동이 필요할 때 서버로 부터 html을 받아오게되면서 매번 각각에 맞는 html을 보여줘야 했기 때문에 블링킹 현상은 당연하다고 이해를 했습니다.
하지만, 많은 글을 읽어보면 AJAX로 비동기 통신을 통해 변경 부분만 동적으로 바꿀 수 있다라고 설명 되어있는것 같은데,
이 부분에서 궁금증이 생기는 것은 “왜? 그리고 어떻게? 비동기 통신이 블링킹 현상 없이 화면 전환이 가능한가?” 입니다.
이 부분에 대해 의견 또는 견해가 있으신분은 답변주시면 대단히 감사하겠습니다!
감사합니다~~
고전적인 웹 사이트는 매 페이지 변경시 마다,
HTTP 요청을 통해 HTML 데이터를 받아오고, 그 화면을 브라우저가 그리는(렌더링하는) 방식입니다.
이 방식은 현재에도 많이 쓰이고 있습니다.
하지만, 지금은 Javascript에서 HTTP, WebSocket 등의 요청을 보내고 응답을 받아올 수 있는 API들이 생겼고,
해당 API를 통해 현재 페이지는 그대로 둔 상태로,
HTTP 요청을 통해 페이지의 일부만 받아오거나, 데이터만 받아와 Javascript에서 현재 페이지를 새로고침(페이지 변경) 없이 수정할 수 있습니다.
사실, 이 부분에 대해서 깊이 이해하기 위해서는 알아야 할 지식이 꽤 많습니다.
등 다양한 내용을 이해하고 있으면 도움이 됩니다.
그러나 위 항목들을 하나하나 모두 이해하기에는 항목 하나하나가 모두 간단한 내용이 아니기 때문에 어렵습니다.
게시판의 1페이지, 2페이지 등 페이지를 이동하는 과정을 예시로 간략히 설명해 보겠습니다.
SSR 방식(Server Side Rendering)
CSR 방식(Client Side Rendering)
이러한 조금 다른 과정을 거쳐 페이지를 렌더링합니다.
하지만, 이것만 보았을 때 SSR은 블링킹이 일어나는데, CSR은 블링킹이 일어나지 않는지는 조금 모호합니다.
사실 이 부분은 브라우저의 동작에 따라 조금씩 다를 수 있는 부분인데,
SSR 방식은
링크를 눌렀을 때, 다른 페이지로 이동하면서 기존 화면을 지우고, 새로운 HTML 페이지 응답을 받으면 새 화면 렌더링합니다.
이때 새로운 HTML 페이지를 받아오는데 걸리는 시간이 있기 때문에 블링킹이 발생합니다.
하지만,
CSR 방식은 브라우저가 아닌 Javascript에서 화면을 조작하는데,
화면을 지우고 새로 그리는 형태가 아니라, 일부분을 교체하는 형식이기 때문에 블링킹이 발생하지 않습니다.
(Javascript Event Loop, 브라우저 repaint 개념을 공부하시면 도움이 됩니다.)
정말 자세한 설명 너무 감사합니다.
정리하면 다음과 같이 이해했습니다.
SSR 방식의 경우에는 모든 html을 받아오기 때문에 html을 바꿔야 하기 때문에 블링킹 현상이 발생하고,
CSR 방식은 전체 html을 바꾸는 것이 아닌 javascrip로 일부만 바꾸는것 이기때문에 블링킹 현상이 덜하다는 것으로 이해했습니다!
추천해주신 개념들 더 공부해서, 깊게 이해하도록 노력하겠습니다!!
감사합니다 
자바스크립트 개발자 포럼