1. SSR이란?

• Server Side Rendering의 약자로, 서버에서 렌더링(html의 정보를 화면에 보여주는 과정)을 마치고, 완전하게 만들어진 HTML 파일을 브라우저로 전달한 후 출력하는 방식이다. 이 방법은 클릭으로 인한 다른 요청이 생길 때마다 계속 이 과정을 반복하기 때문에 화면에서 바뀌지 않아도 되는 부분까지 렌더링하여 로딩이 느리다는 단점이 있다.
• 클라이언트가 구매 버튼을 누르면, 서버에서 렌더링 할 준비가 된 HTML 파일을 전송한다. (클라이언트에 View표시, 클릭 불가) 브라우저가 JS 파일을 다운로드 한다. (클라이언트에 View표시, 클릭 불가) 브라우저가 framework실행한다(클라이언트에 View표시, 클릭 가능). 요청이 들어올 때마다 이 과정을 반복한다.

2. CSR

• SPA에서 자주 쓰이는 기법으로, 최초 한번 HTML, static, js를 다 받아와서 브라우저에서 JS를 통해 렌더링(html의 정보를 화면에 보여주는 과정)하는 방식이다. 이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 변화가 필요한 영역만 서버에 전달한다. 초기에 html에 데이터가 없다보니 검색봇이 해당페이지를 빈 페이지로 착각하여 SEO에 취약하다는 단점이 있다.
• 클라이언트가 구매 버튼을 누르면, 브라우저가 서버에서 빈 HTML, JS를 가져온다. 브라우저가 HTML, JS 다운로드하면 브라우저가 렌더링을 한다. (클라이언트에 View표시, 클릭 가능)

3. SEO

• Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다. 웹 크롤러, 봇들은 보통 JS를 실행시키지 못하고, html에서만 컨텐츠를 수집하기 때문에 서버에서 렌더링하는 SSR방식은 문제가 없지만, 빈 html을 보내주는 CSR은 문제가 발생한다.

4. Next.js

• 리액트 프레임워크로 첫 페이지는 백엔드 서버에서 렌더링하여 데이터가 채워진 html을 받아 검색 최적화 문제를 해결하고, 그 다음부터는 CSR을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하를 줄이는 방식이다. 참고로 Vue에서는 SSR을 할 때 Nuxt.js를 사용한다.

4. 오늘의 3줄

<aside> 💡 SSR은 완전하게 만들어진 HTML 파일을 브라우저로 전달한 후 출력하는 방식이기 때문에 오래걸린다.

</aside>

<aside> 💡 CSR은 최초 한번 HTML, static, js를 다 받아와서 브라우저에서 JS를 통해 렌더링(html의 정보를 화면에 보여주는 과정)하는 방식이기 때문에 SEO에 취약하다.

</aside>

<aside> 💡 Next.js는 처음 받을 땐 SSR로 받고, 그 뒤부터는 일부만 갱신하는 CSR을 하는 혼합방식이며, Next.js가 최고다!

</aside>

5. 용어 은행