SEB Section 2 SSR & CSR

SSR(Sever Side Rendering)

SSR은 Server Side Rendring의 줄임말로, 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링을 한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링이 된다. 웹 페이지를 다른 브라우저의 경로로 이동할 경우 브라우저가 다른 경로로 이동할 때마다 서버는 이 작업을 다시 수행한다.

CSR(Client Side Rendering)

CSR은 클라이언트에서 페이지를 렌더링 한다. 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링 하는 대신, 단일 페이지를 클라이언트에 보낸다. 이때 서버는 웹 페이지와 함께 js파일을 보낸다. 클라이언트는 웹 페이지를 받으면 js 파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꾼다. 만약 데이터베이스에 저장된 데이터를 렌더링이 필요할 시 Api 요청을 통해 데이터를 가져와 웹 페이지에 렌더링을 한다.

SSR과 CSR의 차이

둘의 주된 차이점은 페이지가 렌더링 되는 위치이다. SSR은 서버에서 CSR은 브라우저에서 페이지를 렌더링을 해주는 것이 큰 차이점이다.

SSR 사용

• SEO(Search Engine Optimization)이 우선순위인 경우, SSR을 일반적으로 사용한다.
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우
• 웹 페이지가 사용자와 상호작용이 적은 경우

CSR 사용

• SEO가 우선순위가 아닌 경우
• 사이트에 풍부한 상호 작용이 있는 경우
• 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있다.