CSR(Client Side Rendering) vs SSR(Server Side Rendering)
CSR은 클라이언트 측에서 렌더링을 하는 것이고
아래 이미지들은 csr의 단계를 그림으로 나타낸것입니다.
1. 사용자는 웹사이트를 요청합니다.
2. CDN(Cloud Development Network)에서 html과 js의 링크를 같이 전달해줍니다.
3. 브라우저에서는 html을 다운받고 js를 다운로드 받습니다. 다운로드 받는 와중에는 사이트가 나타나지 않습니다.
4. 브라우저에서 javascript를 다운로드 완료합니다.
5. js가 브라우저에서 실행되고 api를 통해 필요한 자원들을 불러옵니다. 이때 사용자에게 placeholder를 보여줄수 있습니다.
6. 서버는 api 요청의 응답을 보내줍니다.
7. 서버로 부터의 api 응답으로 페이지가 반응하게 됩니다.
1. 서버는 브라우저에 응답을 보내줍니다.
2. 브라우저는 js를 다운로드 받습니다.
3. 브라우저는 react를 실행시킵니다.
4. 페이지는 이제 보여지고 반응할 수 있습니다.
csr은 html과 js가 모두 다운로드 된후에 사용자에게 페이지가 나타나고 반응할 수 있습니다.
처음에 다운로드 하는 것들이 많아서 초기 화면은 상대적으로 느리게 보일수 있지만
이후의 반응은 빠릅니다, 필요한것들은 api로 소통하기 때문입니다.
검색엔진은 html 파일들을 크롤링봇을 이용해 사이트를 크롤링 합니다.
csr에서는 js를 동작시켜 컨텐츠를 보여주기 때문에 js를 완전히 다운로드 받고 난후에 metadata가 바뀝니다.
일부 봇에서는 js를 실행시키지 않습니다. 따라서 원하는 결과를 가져갈 수가 없습니다.
따라서 SEO(Search Engine Optimization)를 중점으로 해야할 시에는 ssr을 적용해야 합니다.
앱 서비스의 경우에는 상관없을 수 있지만 여러 사람들에게 노출이 되어야 하는 웹 서비스의 경우에는 seo가 필수라 할수 있을것 같습니다.
다음과 같은 경우 csr의 사용을 고려할 수 있습니다.
1. seo가 필요 없을때
2. 서버의 성능이 좋지 않을때
3. 사용자에게 보여줘야 하는 데이터의 양이 많을때 (로딩창을 띄워 보여줄수 있다.)
대표적인 csr을 이용하는 것에는 react, vue, svelte 등이 있습니다.
SSR은 서버 측에서 렌더링을 하는 것입니다.
아래 이미지들은 ssr을 그림으로 나타낸 것입니다.
1. 사용자는 웹사이트를 요청합니다.
2. 서버는 'Ready to Render'(즉시 렌더링 가능한) html 파일을 만듭니다.
3. 브라우저는 html을 빠르게 보여줍니다. 하지만 사이트는 조작이 불가능합니다.
4. 브라우저는 javascript를 다운로드 받습니다.
5. 사용자는 내용을 볼수 있고 조작동작들은 기록되어질수 있습니다.
6. 브라우저는 js 프레임워크를 실행시킵니다.
7. 기록된 조작 들은 실행될 수 있습니다. 이제 페이지들은 반응할수 있습니다.
1. 서버는 즉시 렌더링 할수 있는 html파일을 브라우저에게 보내줍니다.
2. 브라우저는 페이지를 렌더합니다. 그리고 브라우저에서 js를 다운로드 받습니다.
3. 브라우저는 react를 실행시킵니다.
4. 이제 페이지는 반응할 수 있습니다.
ssr은 서버에서 즉시 렌더가능한 html파일을 전달받습니다.
사용자는 첫 화면은 빠르게 볼수 있지만 다른 페이지로 이동시에는 서버에서 즉시 렌더가능한 파일을 매번 전달받아야 합니다.
페이지 이동시마다 이러한 과정이 반복되므로 페이지 이동시에는 csr보다 상대적으로 느릴수 있습니다.
검색엔진은 html 파일들을 크롤링봇을 이용해 사이트를 크롤링 합니다.
일부 봇에서는 js를 실행시키지 않습니다. ssr에서는 즉시 렌더가능한 html 파일들을 응답으로 보내줍니다.
봇들은 js를 실행시키지 않고 메타데이터를 얻을수 있습니다.
따라서 SEO(Search Engine Optimization)를 중점으로 해야할 시에는 ssr을 적용해야 합니다.
다음과 같은 경우 ssr을 사용하는 것이 좋습니다.
1. seo가 필요할때
2. 최초 로딩이 빨라야 할때
3. 웹사이트의 상호작용이 별로 없을때
대표적인 ssr을 이용하는 것에는 next.js, nuxt.js 등이 있습니다.
'Frontend > Javascript' 카테고리의 다른 글
| Javascript keydown, keyup, keypress (0) | 2022.03.19 |
|---|---|
| SPA(Single Page Application) (0) | 2022.03.19 |
| Javascript debounce, throttle (0) | 2022.03.19 |
| Javascript script async vs defer (0) | 2022.03.03 |
| innerHTML, insertAdjacentHTML, textContent, innerText (0) | 2022.03.01 |