next.js ssr & csr 구동 방법 차이..짧게 정리

🫨 CSR

• 유저가 요청한다.
• S3와 같은 웹서버에 올라가있는 정적파일을 보내준다(html)
  • 이 때 html 파일에는 암것도 없다.
  • 아래에서 js 가 실행되어야지 입혀진다.
• 정적파일을 받은 브라우저는 html 파싱..css 파싱..js 실행을 수행한다.
  • 이 때 js 는 번들되어서 html 에 붙여진 그것이다

🥵 SSR

• 유저가 요청한다.
• 웹 어플리케이션 서버에서 요청을 받고, 쿵짝쿵짝 Next.js랑 같이 HTML 을 만든다. 💃
  • 왜 WAS 써야하나? 당연하다 api 요청등의 작업이 있을 수 있으니까
  • 이게 Next.js 에 가려져서 잘안보이긴 하는데..실제로 생짜 리액트로 SSR 구현하려면 Express같은걸로 서버를 하나 띄워야한다.
  • 서버 띄우는 이유는 html 쿵짝쿵짝 만들어서 보내주기 위해서...그니까 요 Express 서버를 Next.js 프레임워크가 내장하고있는거다.
• 이렇게 해서 만들어진 HTML 을 서빙해준다.
  • 요 HTML 파일은 내용이 있다. (CSR과 다르게)
  • 이 때 만들어진 HTML 에는 번들된 js 도 붙여있고
  • ssr 설정을 했다면 css 도 추가되어있을 것이다. (css 파일이 추가되어있는게 아니라 <style>태그 하위에 css 문법 자체가 추가되어있을것임!)
  • ssr 설정을 따로 안했다면 클라이언트사이드에서 번들된 js 랑 그외 청크들 읽으면서 쇽쇽 css를 그제서야 불러와서 입혀주겟지.. -> (fouc 발생 🥵 )
• 서빙해주면서 리액트/Next.js에서 하이드레이션 (hydration) 해주겠지!?
• 그리고 나서 css / js 불러오고 실행~🧙🏻‍♀️