검색엔진! 웹 렌더링! SEO, CSR, SSR, SSG 🐾

SEO(Search Engine Optimization)

 검색엔진 최적화! 검색엔진에서 찾기 쉽도록 사이트를 만드는 것

네이버나 구글 같은 애들이 뽈뽈 돌아다니면서 정보를 수집하는데, 거기서 정보가 유기적으로 연결되어 있고, 동적인 데이터도 받아올 수 있어야 검색엔진이 좋은 점수를 매긴다! 

 검색이 잘되게 하려면 SEO가 필요하다!

<a> 태그를 쓴다든지, <h1>으로 제목을 표시하는 등의 방법도 있다!

 

 

CSR(Client Side Rendering)

 치니까 기업의 사회적 책임이 먼저 나온다...!

클라이언트 측 렌더링이다. 클라이언트 측 렌더링이란?!!! 웹사이트의 JavaScript가 웹 사이트의 서버가 아닌 브라우저에서 렌더링 되는 것을 의미한다. 즉 HTML에서 모든 내용을 가져오는 대신에 JS 파일을 포함하는 필수 HTML만 렌더링한다. 경로당 다른 HTML 페이지를 갖고, 브라우저 경로를 동적으로 만든다! 초기 페이지 로드가 다소 느리지만 그 이후 페이지 로드는 매우 빠르다. 서버와의 통신은 런타임 데이터를 가져오는 경우에만 발생하고, 서버 호출마다 전체 UI를 다시 로드할 필요가 없다. 특정 DOM 요소만 다시 렌더링해서 변경된 데이터로 UI를 업데이트하면 된다. 

 

 언제 쓰나요!? 

1. 애플리케이션이 매우 많은 페이지와 복잡한 UI를 갖고 있을 때

2. 애플리케이션 사이즈가 크고 동적인 데이터를 가질 때 

 

SSR(Server Side Rendering)

 서버 측 렌더링이다.사용자가 웹 페이지에 요청을 하면 서버가 데이터베이스에서 데이터를 가져와서 HTML 페이지를 만든 뒤 브라우저에 전송한다. 

CSR보다 SEO에 적합하다! 페이지 로드 시간을 단축할 수 있어 UX(사용자 경험)에 좋을 뿐만 아니라 검색엔진이 좋은 점수를 준다.😘 

 

 장점

1. 첫 페이지 로드가 빠르다.

2. 정적 사이트, 사용자가 적은 사이트, 심플한 UI에서 좋다.

3. SEO에 좋다.

 

 단점

1. 상호작용이 적다.

2. 페이지 렌더링이 느리다.

3. UI가 전부 새로고침 된다.

4. 빈번하게 서버에 요청하게 된다. 

 

 

 

SSG(Static Site Generator)

 정적 사이트 생성기 - 정적인 웹사이트를 생성하는 도구

동적인 주소(ex. [boardId])를 사용하지 않는 사이트를 생성한다. 

 

(정적 배포)

 

 

 

 

참고자료 : https://www.clariontech.com/blog/server-side-rendering-vs.-client-side-rendering

Server-Side Rendering VS. Client-Side Rendering

https://www.botify.com/blog/client-side-server-side-rendering-seo