빌드

1.SSR과 CSR

1) SSR(Server Side Rendering)

• 웹 페이지를 브라우저에서 렌더링하는 대신 서버에서 렌더링이 이루어진다.
• 브라우저가 서버의 URI로 GET 요청을 보내면 서버는 정해진 웹 페이지 파일을 완전히 렌더링 한 후 브라우저로 전송한다.
• 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다.
• 사용자가 브라우저의 다른 경로로 이동하면 서버는 이 작업을 다시 수행한다.

2) CSR(Client Side Rendering)

• 이언트에서 페이지를 렌더링한다.
• 웹 개발에서 사용하는 대표적인 클라이언트로는 웹 브라우저가 있다.
• 브라우저의 요청을 서버로 보내면 서버는 웹 페이지의 골격이 될 단일 페이지와 함께 JavaScript 파일을 클라이언트로 보내고, 클라이언트가 웹 페이지를 받으면 웹 페이지와 함께 전달된 JavaScript 파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꾼다.
• 웹 페이지에 필요한 내용이 데이터베이스에 저장된 데이터인 경우 브라우저는 데이터 베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더링한다. (이 때 API가 사용된다.)
  • 웹 페이지를 렌더링할 때 필요한 데이터를 API 요청으로 해소한다.
• 사용자가 브라우저의 다른 경로로 이동하더라도 페이지를 새로고침 하지 않고 동적으로 라우팅을 관리한다.
  • 브라우저는 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링하는데, 이 때 보이는 웹 페이지의 파일은 맨 처음 서버로부터 전달받은 웹 페이지 파일과 동일한 파일이다.

SSR
장점 : 초기 랜딩 속도가 빠르며 검색 엔진 최적화(SEO)가 가능
단점 : 페이지를 요청할 때 마다 새로고침 되며, 요청이 많아지면 서버에 부담

CSR
장점 : 초기 요청을 제외하면 페이지 랜딩 속도가 빠르며 서버에 부담이 적고, 사용자 경험이 좋다.
단점 : 최초 로딩 속도가 느리며 검색 엔진 최적화(SEO)에 불리

2. 정적 웹사이트 VS 동적 웹사이트

정적 웹사이트

• HTML 파일 자체로 배포되는 사이트(CSR)
• 서버는 미리 만들어진 HTML, JS 파일을 전달하기만 한다.(서버의 자원과 무관)

동적 웹사이트

• 서버에 의해 HTML 파일이 동적으로 생성되는 사이트(SSR)
• 서버는 늘 HTML 파일을 만들어 응답해주어야 한다.(서버 자원에 따라 페이지의 형태가 바뀜)