SPA / CSR / TTI / TTV / SEO / Meta태그 / Opengraph

🔎SPA (Single Page Application)

• 사용자가 한 페이지에 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로만 업데이트
• 하나의 어플리케이션을 사용하듯 사용성이 좋아짐
• SPA 트렌드 + 사용자들의 PC성능 향상 + JS 표준화 + 강력한 커뮤니티 바탕으로
  • Angular, Vue, React 등 CSR 프레임워크가 개발되어 CSR의 시대로 접어듬!

🔎CSR (Client Side Rendering)

• 모든것을 클라이언트가 처리 하는것
• HTML은 빈 파일이고, 소스코드가 담겨있는 JS와 필요한 데이터인 JSON을 다운받아와서 화면에 그려준다. (사이트의 요소들을 직접 렌더링)
• 단점
  • 페이지 로딩이 오래걸린다.
  • 동적 렌더링이라 SEO가 좋지않다.
  • 규모 있는 사이트라면 로딩 속도가 느려진다.
• 장점
  • 필요한 부분만 부분적으로 렌더링 가능

🔎SSR (Server Side Rendering)

• 이미 만들어져 있는 HTML 파일을 클라이언트에게 넘겨준다.
• 장점
  • 페이지 로딩이 빨라진다.
  • 이미 데이터가 있으므로 SEO가 CSR보다 좋다.
• 단점
  • 새로고침이 일어날때마다 전체적인 웹 사이트를 서버에서 다시 새로 받아와야한다.
  • 서버에 과부하가 생길 수 있다.
• nextJS에서 SSR 모드를 사용하려면 별도의 서버가 돌아가야한다.
• 서버에서 페이지의 요소들 중 바로 나타나야 하는 것들을 지정하여서 서버에 미리 업로드 한다.
• 이렇게 하면 첫 로딩은 빠르게 + CSR의 장점을 살리는 코드 작성이 가능하다.

🔎TTI란?

• Time To Interact
• 사용자가 클릭을 하거나 인터렉션이 가능하게 되는데 걸리는 시간

인터렉션 : 둘 이상의 물체나 대상이 서로 영향을 주고 받는 일종의 행동

🔎TTV란?

• Time To View
• 사용자가 웹사이트를 보는데까지 걸리는 시간

🔎SEO란?

• Search Engine Optimization
• 검색 엔진 최적화
• 검색 엔진에서 찾아지기 쉽게 하는 것
• SEO는 구글, 네이버와 같은 검색 엔진들이 서버에 등록된 웹사이트를 하나 하나씩 돌아 다니면서 웹사이트의 HTML 문서를 분석해줍니다. 이때 HTML에 사용된 태그를 바탕으로 사용자가 검색할 때, 웹사이트를 빠르게 검색할 수 있게 도와줍니다.

SEO를 위한 작업

• 메타 태그(Meta Tag)
  • <title> 태그
    • 웹 페이지를 검색 엔진에 검색했을 때 노출 되는 제목
    • 단순히 검색 결과에만 노출 되는 것이 아니라, 브라우저 탭 상에서도 노출되어 중요도 높음
  • <description> 태그
    • 해당 웹페이지의 설명을 요약한 한 두 줄의 문장
  • <robots> 태그
    • 웹페이지 별 검색 로봇의 접근 여부를 설정할 때 활용할 수 있는 태그
    • 검색 엔진의 웹페이지를 크롤링 하는 검색로봇이 있는데, 로봇 태그의 속성을 어떻게 하느냐에 따라, 이 검색 로봇이 웹페이지를 크롤링 하고 색인할 수 있는 권한을 받거나 받지 못함.
    • robots 태그의 속성 정의가 더 궁금하다면 여기 사이트를 참고하세요
    • 로봇 메타 태그 사양 | Google 검색 센터 | 문서 | Google Developers
  • <canonical> 태그
    • 여러 URL을 가진 웹 페이지가 있을 때, 해당 페이지의 대표 URL을 설정할 수 있는 태그
    • 한 페이지의 대표되는 URL을 지정함으로써, 검색 로봇이 웹 페이지를 크롤링 할 때 중복URL로 인한 패널티가 적용되지 않게 함
    • 각 페이지 별 다른 정보를 담고 있는 경우에는 적용하면 안됨
• 오픈 그래프(Open Graph) 태그

og:title => 웹페이지 제목
og:description => 웹페이지 상세 설명
og:image => 웹페이지 카드에 나타나는 썸네일 (권장 사이즈 1200x630)
og:type => 웹페이지 유형
og:url => 웹페이지 주소

• 웹 페이지의 링크가 공유될 때 어떻게 노출될 지를 정의 해주는 역할
• 검색엔진 최적화 과정에서 해당 웹페이지가 SNS에 얼마나 공유되고 있는지 (혹은 얼마만큼의 트래픽이 일어나고 있는지) 판단하는 기준이 되어 검색 상위 노출을 위한 품질 평가에도 영향을 주기 때문에 중요한 역할

 

Reference

검색엔진 최적화(SEO)란? | 요즘IT

SSR, CSR, SSG, TTV, TTI 개념 정리

SPA, SEO, SSR, CSR, TTV, TTI (nextJS)

SPA vs MPA와 SSR vs CSR 장단점 뜻정리 - 하나몬

SSR, SSG, JAM Stack이 뭔가요? (+ CSR, SEO, Next.js, Nuxt.js, Gatsby)

서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)