SSR과 SEO가 웹 서비스에서 왜 중요할까?

0. SSR이 필요한 이유?

 

SSR(Server Side Rendering)은 왜 해야하는 것일까? 에 대한 답을 우선 해야 현재 프로젝트에 알맞는 기술스택을 선정하고 도입을 고려해볼 수 있다.

 

그 대답은 SEO로 요약할 수 있다.

 

 

1. SEO에 관하여

 

SEO 란 무엇일까? (Search Engine Optimization)

 

위키백과 정의는 다음과 같다.

 

 

검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다 - Wiki -

 

 

그럼 검색 엔진이 왜 중요할까?

 

 

1-1. 국내 인터넷 이용률 → 93%

 

1-2. 국내 인터넷 이용자 중에서 검색엔진을 통해 웹사이트에 방문하게 되는 비율

 

1) 차트를 보면 (구글 + 네이버)를 통해 웹사이트로 유입되는 비율이 전체의 약 90% 정도를 차지함

 

2) 네이버의 점유율이 줄어들고 구글이 계속 성장하고 있는 추세임 (장기적으로는 구글 검색 맞춤형)

 

3) 모바일을 통한 유입도 PC 검색만큼의 비중을 차지함 (반응형 웹의 중요성)

 

2022년 1분기 - 검색엔진 유입률 분석 : 다이티 데이터 마켓 - 트렌드 리포트

2022년 1분기 - 검색엔진 유입률 분석 : 다이티 데이터 마켓 - 트렌드 리포트

 

 

1-3. SEM보다 SEO가 중요한 이유

 

* SEM: Search Engine Marketing

 

 

1-3-1. 광고 비용을 아낄 수 있음 (+ 양질의 오가닉 유저 획득 가능)

 

 

- 가상의 광고 비용 산정

 

Google Ads CPC (Cost Per Click) Aveage : $ 1~2

Facebook Ads CPC Average : $ 1 [CPA : $ 5]

 

- 산정 근거

 

How Much Does Google Ads Cost in 2021 and 2022 - Viden | Digital Marketing Consultancy | Google Certified

How Much Does Google Ads Cost in 2022 and 2022 - Viden | Digital Marketing Consultancy | Google Certified

How Much Does Facebook Advertising Cost in 2022?

How Much Does Facebook Advertising Cost in 2022?

 

 

 

광고 비용은 국가별 1인당 소득 수준이 높은 지역 [구매력], 앱의 종류 [교육, 운동, 패션…], 타켓하려는 소비자 군 [운동을 좋아하는 20대
남자], 어떤 액션을 유도할 것인지 [노출, 앱 다운로드 등] 에 따라서 전부 달라지는 내용이지만 평균으로 추측 해보는 것이다.

 

 

사용자 한명을 검색엔진 광고를 통해서 웹사이트로 데리고 오려면 1명당 1달러 정도가 든다고 보면된다.

 

실제 앱을 다운로드 시키려면 페이스북의 경우에는 5달러 정도가 발생한다고 한다.

 

하지만 검색엔진 최적화를 잘 진행시켜 놓아서 특정 검색어 쿠팡 배달알바 와 같은 검색어를 입력했을 때 서비스의 알바 구인공고가 구글 또는 네이버 상단에 노출된다면?

 

 

이미 소비자는 알바를 구하겠다는 의도를 가지고 검색어를 입력하였고 상단에 노출되어있는 웹사이트에 들어갈 확률이 매우높다.

 

추가로 디퍼드 딥 링크를 통해 앱을 설치하고 알바를 구할 수도 있다.

 

검색어 노출로 인해 엄청난 광고비를 아낄 수 있다.

 

(물론 장기적 콘텐츠 관리, 다수의 백링크, 양질의 콘텐츠가 지속되어야 한다.)

 

 

1-3-2. 검색어 트래픽

 

1) 구글 검색 결과 상위에 나오는 웹 페이지들은 대부분 3년이상 된 사이트들이 많다.

 

2) 단기에 성과가 금방 나오지 않고 장기적 관점에서 투자가 필요하다.

 

3) 검색엔진 마케팅을 통해 무작위로 유입된 유저는 리워드 광고, 잘못 클릭, 원하지 않는 상품 노출(타켓팅 실패) 등의 이유로 금방 이탈할 가능성이 높다.

 

구글 SEO : 광고 보다 SEO 가 중요한 이유

구글 SEO : 광고 보다 SEO 가 중요한 이유

 

 

2. SEO를 잘하기 위해서는?

 

2-1. 검색엔진 최적화를 위한 가이드

 

구글

SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google Developers

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google Developers

 

네이버

검색엔진 최적화의 목적

검색엔진 최적화의 목적

 

- 추출한 몇가지 특징 중 일부분

 

2-1-1. robot.txt 가 수집할 수 있도록 웹페이지 소스 (html, css, js) 가 노출되어야 한다.

 

2-1-2. 호스트 네임이 하나여야 한다. 불가피하게 여러개가 필요하면 canonical 링크로 리다이렉션 시킨다.

 

2-1-3. 해시뱅은 사이트 내의 콘텐츠 위치를 나타내므로 보통 무시하는 영역이다.

 

2-1-4. 로봇이 웹사이트 색인을 쉽게 할 수 있도록 URL 구조를 잘 설계한다.

 

 

 

2-2. 구글 최적화 가이드 살펴보기

 

2-2-1. 페이지 경험 최적화

 

1) CLS (Cumulative Layout Shift)

 

2) LCP (Largest Contentful Paint)

 

3) FID (First Input Delay)

 

페이지 로딩 속도 개선, 사용자 경험에 대한 최적화 필요

 

 

2-2-2. 이미지

 

1) 속도 최적화

 

2) 고화질 사진 추가

 

3) 이미지에 캡션, 제목, 파일 이름 추가

 

4) 구체적인 대체 텍스트

 

2-2-3. 리치 콘텐츠

 

1) 페이지 내용에 따라 적절한 마크업

 

2) 리치 검색 결과 테스트

 

3) 8단계로 끝내는 구글 SEO 실천법 - 2

8단계로 끝내는 구글 SEO 실천법 - 2

 

2-2-4. SSR 확인하기

 

그렇다면 페이지 소스보기에서 콘텐츠를 확인할 수 있어야한다.

 

1) 터미널을 실행하고 아래 명령어를 입력한다.

 

curl [웹 사이트명]

 

2) SSR이 잘 되었는지 확인하는 다른 방법

 

How To Check Server Side Rendering - OhMyCrawl

How to see whether a website is client side rendered or server side rendered?

How to see whether a website is client side rendered or server side rendered?

 

 

3. SSR 도구 선택 하기

 

React 기반 Next.js 는 이미 알고 있다는 가정하에 도구 선정에서 제외하였음

 

 

* 예제 소스코드 레포지터리

 

GitHub - canoe726/YoungKim_Javascript: 모든 프론트엔드 웹개발 지식 모음

 

 

3-1. Vite

 

Vite

vite-plugin-ssr

vite-plugin-ssr

 

 

3-1-1. 특징

 

1) Zero-config : just npm init vite-plugin-ssr@latest

 

2) Simple : 공식 문서가 매우 간단하고 실제 구현도 그렇다 (자유도가 높아서 그만큼 잘 활용능력이 뛰어나야 할 듯)

 

3) Fast : 앱 빌드 시간이 React 앱과 비교했을 때 매우 빠르다

 

4) Domain Driven Development : DDD 방식의 파일 구조를 가져가서 앱이 커져도 관심사가 도메인으로 한정되기 때문에 공통 컴포넌트만 잘 설계해두면 개발편의성이 증대할 것으로 보임

 

5) 자유도 : 서버 단, 클라이언트 단 코드를 직접 수정해서 hydrate, prefetch, 동적 메타태그 수정을 적용할 수 있다

 

 

3-1-2. 코드 베이스 훑어보기

 

1) 라우팅, 기본 설정, 동적 document 속성 설정

 

vite-plugin-ssr/examples/react-full at main · brillout/vite-plugin-ssr

GitHub - brillout/vite-plugin-ssr: Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.

 

2) DDD 개발 방법

 

vite-plugin-ssr/examples/file-structure-domain-driven at main · brillout/vite-plugin-ssr

GitHub - brillout/vite-plugin-ssr: Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.

 

 

3-2. Remix

Remix | Developer Blog

Remix로 쉽게 하는 리액트 서버사이드 렌더링

 

 

3-2-1. 특징

 

1) 디렉토리 기반 라우팅 : Next.js, Vite-ssr-plugin 모두 같음

 

2) 자체 API 통신 함수가 구현되어 있음

 

@remix-run/react 패키지에 포함, loader, useLoader 함수 사용 → 라우트 파일에서 useLoader 훅을 호출할 때는 이미 데이터가 불러와졌음이 보장되어 로딩바가 필요없음

(주소 변경 → 데이터 로딩 → 컴포넌트 마운트)

 

3) 러닝커브가 높다

 

4) 정적 데이터 브라우저 캐싱

웹 브라우저 Sqlite 가 prisma 로 연동되어 있고 해당 데이터를 브라우저 DB에 저장해서 데이터 로딩 시간을 획기적으로 줄임

(DB 쿼리문 작성 필요 + shema, model 정의 필요 + prisma 문법을 알아야함)

 

 

3-3. React SSR

 

 

 

- 출처 사이트 링크 목록

 

1. 인터넷 트렌드

 

InternetTrend™

 

2. 인터넷 이용률

 

3. 검색엔진 유입률

 

2022년 1분기 - 검색엔진 유입률 분석 : 다이티 데이터 마켓 - 트렌드 리포트