SSR(Server Side Rendering)

리액트와 Next.js에 대해 공부하면서

CSR과 SSR에 대해 자연스럽게 헷갈리게 됐고(?ㅋㅋ)

찾아보았다. 공부한 내용을 간략히 설명하자면

 

CSR과 SSR의 정의

 

CSR은 클라이언트 사이드 렌더링의 약어로

프론트엔드에서 렌더링을 해준다.

 

SSR은 서버 사이드 렌더링으로

서버에서 렌더링을 한 파일을 내려준다.

 

 

이번 글에서는 SSR만 다루겠다.

 

SSR

 

전통적인 방식의 웹사이트들은 대부분 

SSR 형태로 서비스 해왔다.

 

페이지를 이동할 때마다 새 페이지를 요청하고 

서버연산에 의해 렌더링 된 후 완성된 페이지형태로 응답한다.

 

SSR 의 장점

 

1. SEO - 검색엔진 최적화

이미 DOM이 다 구성된 파일을 브라우저가 내려받기 때문에

검색 엔진들이 정보를 수집할 때 정확한 정보를 검색할 수 있어서

사용자들이 웹사이트를 방문하기 쉽게한다.

 

2. 초기 렌더링 속도

CSR방식은 처음 렌더링할 때

사이트 전부의 html, css, js를 다 받아오며

SSR방식은  첫 렌더링 시 

처음 보이는 메인페이지의 파일만 받아와서 그려주기 때문에

상대적으로 속도가 더 빠르다.

 

 

SSR 의 단점

 

1. 좋지 않은 유저경험

CSR은 처음 렌더링 시간만 견디면

그 다음부터는 사용자가 다른 페이지로 이동할 때

클릭하자마자 흰화면 없이 바로 이동할 수 있는데

SSR은 페이지 이동마다 해당하는 파일을 내려받는다.

그렇기 떄문에

서버에서 새로운 파일을 받아오는 시간만큼의

흰화면을 띄운다.

 

2. 서버 부하

새로운 요청이 생길때마다

바뀌지 않아도 되는 부분도 렌더링되며

경제적 비용을 야기할 수 있다.

 

 

 

 

이렇게 간단하게 SSR에 대해 알아봤는데

텍스트로만 간략하게 끝낼정도의

내용은 아닌 것 같아서 

Next.js 공부 후 코드 및 사진을 첨부하여 보충해야 할 것 같다.

 

 

다음글에서는 CSR도 알아본 후

CSR과 SSR 

그리고 SSG까지 비교해보자