SEO,SSR,CSR 그리고 Next.js..!

사용자가 구글에 키워드를 검색했을때 구글의 Search engine이 웹페이지의 정보들을 읽어서 가장 관련성이 높은 글들을 을 보여줍니다. 이것을 설정할 수 있게 하는 작업이 SEO(Search Engine Optimization) 검색엔진최적화 라고 해요
우리가 JavaScript로 웹사이트를 구축할때 SEO를 고려해야하는 이유는 구현방법을 어떻게 해야 하는지에 따라
사용자환경과 검색결과 순위에 영향을 미칠 수 있기 때문이에요.
어떠한 방법이 있는지 알아봅시다.

 

SSR(Server Side Rendering)

서버에서 렌더링 되는 방식이에요.
클라이언트에서 요청을 하면 서버에서 데이터까지 갖춘 html을 클라이언트에 전달하게 되요.

👍장점(GOOD!)
- 웹페이지 로드시 한번의 요청으로 페이지를 구성하기 때문에 처음 로딩이 짧다.
- 컨텐츠가 구성되어 있는 HTML을 서버에서 받기 때문에 SEO에 최적화 되어있다.

👎단점(BAD!)
- 페이지를 이동, 클릭 이벤트 요청이 생길 경우 요청하고 전달받는 과정을 계속 반복하기 때문에 불필요한 렌더링이 있다.
- 그로인한 서버 과부화

 

 

 

CSR(Client Side Rendering)

클라이언트에서 렌더링 되는 방식이에요.
클라이언트에서 처음 요청시 비어있는 HTML에 모든 리소스들을 다운받고 추가요청시 그부분만 데이터를 받아서 html템플릿과 결합시켜 화면에 보여주게 되요. 

👍장점(GOOD!)
- 모든리소스들을 다운 받기때문에 빠르게 렌더링이 이루어져 사용자 경험이 높아진다.
- 필요한 데이터만 요청하기 때문에 서버의 부담이 적음.

👎단점(BAD!)
- 처음에 모든 리소스들을 다운 받기 때문에 초기 로딩이 느리다.
- 초기 html은 컨텐츠가 비어있는 상태이기 때문에 SEO에 취약.

SEO에 유리한 방식은..?

SSR이에요. 왜냐하면 이미 컨텐츠가 구성되어 있는 HTML로 렌더링되기 때문에 검색엔진에서 파악하기가 쉬워요.
그렇기 때문에 검색결과에 더 높은 순위를 차지 할 수 있게 도와줍니다.

 

Next.js

그럼 난 처음 웹페이지 로드시 에만 SSR로 SEO를 최적화 하고 클라이언트와 상호작용 할경우엔 CSR을 사용하고 싶어!
라는 걸 해결하기 위한 방법이 Next.js 에요 
React 전용 SSR 프레임워크로 SPA인 REACT를 사용하여 CSR의 단점을 보완하고 SSR의 장점을 살려줍니다.

React에서 Next.js를 사용할 경우 위의 SSR 과 CSR 의 차이를 알고 있어야 왜 사용하는지를 알 수 있어요.