SSR(Server Side Rendering) 그리고 CSR(Client Side Rendering)

 

 

🌈 SSR & CSR

 

💡 SSR -> Server Side Rendering

 

: 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링 한다. 브라우저가 서버의 URI로 GET 요청을 보내면 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링 된다. 서버에서 웹페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다. 웹 페이지의 내용에 데이터이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저 응답으로 보낸다. 웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면 다른 경로로 이동할 때마다 서버는 이 작업을 다시 수행한다.

 

 

💡 CSR -> Client Side Rendering

 

: 일반적으로 CSR은 SSR의 반대로 여겨진다. SSR이 서버 측에서 페이지를 렌더링하면 CSR은 클라이언트 페이지를 렌더링한다. 웹 개발에서 사용하는 대표적인 클라이언트는 웹 브라우저이다. 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보낸다. 이때, 서버는 웹페이지와 함께 JavaScript 파일을 보낸다. 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일은 브라우저에서 웹 페이지를 완전히 렌더링된 페이지로 바꾼다. 내용이 데이터베이스에 저장되어 있으면 데이터베이스에 저장된 데이터를 가져와 웹페이지에 렌더링 한다. CSR은 SSR과 다르게 서버가 웹 페이지를 보내지 않는다. 브라우저는 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링하는데 이때 보이는 웹페이지의 파일은 맨 처음 서버로부터 받은 웹페이지 파일과 동일한 파일이다.

 

💡 The Difference

 

: SSR은 서버에서 페이지를 렌더링하고 CSR은 브라우저에서 페이지를 렌더링한다. 브라우저는 사용자가 다른 경로를 요청할때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다.