SPA(Single Page Application)

클라이언트는 서버에 요청을 보내고 서버는 클라이언트에 응답에 해당하는 html 문서를 내려준다. 클라이언트는 이 html을 바탕으로 돔을 만든다. 그런데, 웹이 발전함에 따라 사용자의 인터랙션이 증가하게 되고 더 많은 요청이 가고 많은 응답을 해줘야 하는 상황이 된다. 즉, 서버에 부하가 커지게 되고, 사용자 입장에서도 서버에서 새로운 html을 받아와 그리므로 화면이 깜빡이는 문제점이 있다. 이 이후에 ajax라는 개념이 도입된다. 웹이 비동기 방식으로 동작하게 되면서 사용자가 화면을 보고 있다가 어떤 인터랙션이 일어나게 되면 해당하는 부분만 바꿔줄 수 있게 된다.

여기서 더 나아가, 개발자들은 url이 바뀌더라도 html을 새로 내려받지 않으면 좋겠다라는 생각을 하게 된다. 이게 바로 Single Page Application(SPA) 의 개념이다. 우리가 익히 알고 있는 React는 이 SPA를 지원하는 라이브러리이다. 그리고 React는 클라이언트 사이드 랜더링 방식으로 동작한다.

리액트는 내가 짠 모든 자바스크립트의 파일을 하나의 자바스크립트 파일로 번들링해준다. 그리고 유저가 처음 사이트에 들어왔을 때 서버는 비어있는 html을 응답하고 클라이언트는 번들링된 js 파일을 바탕으로 화면을 랜더링한다. 이 CSR의 장점은 url이 바뀌어도 html을 받지 않고 클라이언트에서 알아서 그린다. 웹이지만 앱처럼 동작할 수 있다는 것이다. 단점은 서비스 사이즈가 커질수록 파일이 커지게 되고 로드하는데 시간이 오래 걸리게 된다. 이 말은 즉, 사용자가 첫 화면을 보는데 많은 시간이 걸릴 수 있다.

따라서, CSR과 SSR을 합쳐서 만들면 어떨까? 라는 아이디어가 나왔고 이를 도와주는 것이 바로 next js라는 프레임워크이다.