[SPA] SPA에서 SEO 문제 해결

References: 아하 프론트 개발기

SinglePageApplication에서 SerachEngineOptimization와 관련된 문제를 ServerSideRendering을 이용해 해결하는 방법에 대해 알아봅니다.

 

 

1. SSR(Server Side Rendering)

 

일반적인 웹페이지는 페이지를 이동할 때마다 새로운 페이지를 요청하고 서버에서 모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답합니다. 이를 SSR이라 합니다.

 

 

 

2. 장단점

 

서버에서 완성된 페이지를 주기 때문에 검색엔진이 크롤링하기 매우 좋습니다.

 

그에 반해 매 페이지 요청마다 새로고침이 발생하며 서버에서 불필요한 탬플릿도 중복해서 로딩되고 렌더링에 따른 부하 문제가 발생합니다.

 

 

 

3. React에서의 SSR

 

next.js가 아주 좋은 해결책이 될 것이라 생각합니다.

공식 홈페이지에 따르면 Next.js 9가 불과 몇 달 전에 출시하였습니다.

자세한 내용은 Next.js 공식 홈페이지를 참고하시면 됩니다.