CSR, SSR (SSG, ISR (next.js))

CSR : Client Side Rendering

• SPA : Single Page Application
  • 부분적으로 필요한 부분들만 업데이트하고 필요한 정보가 있을때만 서버로 데이터를 요청해서
  • 자바스크립트로 처리 후 페이지를 repainting한다.
• SPA가 트렌드가 되고 사용자들의 pc 성능이 좋아지면서 많은 것들을 무리없이 처리할 수 있게 되었고, 자바스크립트도 표준화가 잘 되어짐에 따라서 여러 프레임워크들이 나오고, CSR의 시대로 접어들었다.
• 텅 빈 html을 보여주고 서버로부터 받은 js를 통해 동적으로 DOM을 생성해서 최종적으로 사용자에게 보여주게 된다.
• 문제점

결론

우리는 FE 코드를 개발하고 build(index.html + bundle.js)해서 서버로 배포한다.

유저는 브라우저 접속시 서버로 사이트를 보내달라는 요청을 하고, 서버는 빈 index.html을 반환한다.

브라우저는 html을 파싱하며 script 태그를 만나고 js파일을 요청한다(서버)

서버는 js를 응답하고 유저는 그때가 되어서야 페이지를 확인할 수 있음

SSR : Server Side Rendering

• CSR처럼 client가 모든 것을 처리하는 방법과는 다르게 웹 사이트 접속시 서버에서 필요한 정보들을 모아서 html을 만들게 되고, 어느정도 구성된 html을 바탕으로 동적 처리가 가능한 js파일과 함께 보내주게 된다.
• 바로 사용자가 페이지를 확인할 수 있게 된다.
• 페이지가 항상 최신상태이지만 모든 페이지가 API 호출을 만든다.