[JS]SEO, SSR, CSR

서론

우리가 구글에 정보를 찾기 위해 검색을 하면 우리가 검색한 키워드에 따라 수많은 정보가 보여집니다. 이 때 보여지는 검색 결과들은 어떤 알고리즘에 의해 노출이 될까요? 그건 바로 구글의 Search Engine이 웹 페이지들의 정보를 읽어서 파악하고 관련성이 높은 글들을 보여줍니다. 그래서 어떤 웹페이지던 어떤 Search Engine에 의해 노출이 되기 쉽도록 설정해주는 것이 필요하며 그것은 SEO(Search Engine Optimization), 즉 검색 엔진 최적화라고 합니다.

검색하기

저는 duckduckgo를 사용하여 검색을 합니다. duckduckgo의 검색창에 vuejs를 검색하면

위와 같이 결과가 나옵니다. 관련이 가장 높은 맨위 페이지를 방문하여 개발자 도구를 열고 index.html을 확인해 보겠습니다.

대강 이러합니다. 여기서 이제 웹 개발자들이 HTML로 처리할 수 있는 몇 가지 SEO에 대해 말씀드리겠습니다.

첫 번째는

<title></title>

입니다. title은 글의 제목을 의미하고 검색엔진은 웹 페이지들을 돌며 관련있는 title을 가진 글들을 가져옵니다. 그리고 아래

<meta name="description" content="" />

description 태그는 웹 페이지에 대한 간단한 정보를 한 줄 정도로 나타냅니다. 이 역시 검색 엔진이 description의 내용과 관련있는 내용을 보여주도록 합니다.

그리고 그 아래에

<meta property="og:~" content=""/>

처럼 og가 붙은 메타 태그들이 있습니다. og는 open graph의 약자로 SNS에 최적화된 태그입니다. 예를 들면 페이스북 메시지로 og 태그가 붙은 메시지를 보내면 og 태그에 있는 정보가 페이스북에 맞게 최적화되어 보여집니다.

다른 예로 카카오톡에 어떤 페이지를 링크를 복사 붙여넣기 해서 보내면 카카오톡이 og 태그를 읽고 그 페이지의 이미지와 title, description을 보여주는 것을 확인할 수 있습니다.

아래 twitter 태그도 비슷한데 twitter 전용으로 있는 메타 태그입니다.

vuejs에서 가장 위에 검색된 페이지들 처럼 검색 엔진에 잘 노출이 되는 페이지들은 HTML에서 SEO를 거친 페이지들입니다. 그렇다면 이런 부분이 SSR과 CSR에 어떤 영향이 있을까요?

SSR

SSR은 Server Side Rendering의 약자로 서버측 렌더링을 진행한다는 뜻입니다. 일반적으로 백엔드 측에서 템플릿 엔진을 사용하여 뷰를 보여주며 JSP, Django template engine 또는 NodeJS의 pug, ejs 등이 있습니다. SSR은 페이지에 접속 시 필요한 렌더링 정보들을 한 번에 요청하고 서버가 뷰를 생성해서 클라이언트 단에 보여줍니다.

이러한 SSR은 가장 처음에 웹 페이지를 로드할 때 빠른 속도를 보여줍니다. 왜냐하면 한 번의 요청 그리고 한 번의 응답으로 페이지를 생성하기 때문입니다. 하지만 SSR은 페이지의 작은 부분 중 하나만을 업데이트 할 일이 생기더라도 페이지 전체를 다시 서버가 계산하여 로드를 해야 하는 불필요한 리소스 낭비가 생기게 됩니다.

하지만 SSR은 계속해서 한 번의 요청, 한 번의 응답만으로 뷰를 보여주므로 일정한 퍼포먼스를 보여주고 서버에서 전부 계산된 HTML을 보여주므로 위에서 설명했던 HTML의 SEO 옵션들이 전부 살아 있습니다.

검색엔진과 웹 크롤러

파이썬이나 JS 또는 Java 아니면 다른 어떠한 언어로던 간단한 웹 크롤러를 만들어본 적이 있다면 웹 크롤링은 어떠한 웹 페이지의 HTML 정보를 가져온다는 것을 알 것입니다. 개발자 도구에서 확인할 수 있는 페이지 전체 정보인 index.html을 파싱한 정보를 통해 필요한 정보만을 추출하여 크롤링을 하게 됩니다. 검색엔진도 마찬가지로 이렇게 각 페이지들에 노출된 index.html에 달린 meta tag과 title들을 파싱하며 어떤 정보를 노출시킬지 정하게 됩니다.

SPA와 CSR

SPA는 Single Page Application을 의미하고 CSR은 Client Side Rendering을 의미합니다. 둘이 동일한 의미는 절대 아니지만 같이 쓰이는 경우가 대다수입니다. SPA는 단일 페이지에서 여러가지 기능을 하도록 제작된 페이지를 의미하고 CSR은 매번 서버가 뷰를 생성하는 것이 아니라 최초에만 서버가 뷰를 만들어주고 이 후에는 업데이트가 필요한 부분만 따로 클라이언트 측에서 결정하고 계산하고 요청하여 응답을 받아서 그 부분만 업데이트를 시키는 방식을 의미합니다.

대표적으로 React, Vue등이 SPA를 만드는 JS 라이브러리에 해당하는데 React의 경우 한 페이지를 여러개의 컴포넌트로 나누어 각각 따로 동작하도록 합니다. 따라서 최초 페이지의 로드에서는 각 컴포넌트가 서버에 각기 다른 요청을 하므로 로딩이 SSR에 비해 늦지만 이후에는 변경이 필요한 컴포넌트만 요청하여 필요한 변경을 하기 때문에 이 후에는 빠른 렌더링 속도를 보여주게 됩니다. 특히 요즘 처럼 한 페이지에서 전달하려는 정보가 많은 때에 적합하기 때문에(SPA) CSR이 웹 개발의 주류를 이루게 되었습니다.

하지만 CSR에도 단점이 있습니다. 위에 말씀드렸듯이 일반적으로 CSR은 React와 같은 라이브러리에 의해 개발이 되는데 리액트는 .jsx그리고 Vue는 .vue와 같은 파일로 생성이 되기 때문에 HTML만을 파싱하는 검색 엔진에 노출이 되지 않습니다.

결론

CSR이나 SSR 중에 어떤 방식이 더 좋은지는 정해져 있지 않습니다. 페이지의 목적에 따라 다르고 위에서 말씀드렸듯이 초기 렌더링 속도는 CSR보다 SSR이 빠릅니다. 그리고 정보만 간단히 전달해도 된다면 그냥 plain HTML이 가장 빠릅니다.(React는 속도 관련에서 아직 이슈가 많다고 합니다. 실제로 vue 개발자들이 테스트를 했을 때도 vue가 React보다 빨랐습니다. ) 하지만 최근 트렌드에 따르면 SPA가 대세이고 SPA에 CSR 방식이 아주 적합하기 때문에 CSR을 많이 사용하는 것입니다. 그리고 React에서도 SEO를 위해 React Helmet과 같은 라이브러리를 적용하기도 하고 NextJS를 사용하여 리액트를 서버 사이드 방식으로 사용하기도 합니다.

최근에 NextJS를 공부하려고 보던 중에 왜 NextJS를 사용하는지에 대해 관련된 내용을 조금 두서 없이 정리해 보았습니다.

위 내용과 관련된 가상 돔과 브라우저의 렌더링 방식은 제 깃허브에 간단히 정리한 글이 있습니다.

https://github.com/peppermint100/TIL/tree/master/Web/virtual-dom