기본 콘텐츠로 건너뛰기

SEO (Search Engine Optimization)

SEO (Search Engine Optimization)

SEO

Search Engine Optimization의 약어이다.

대부분의 웹 크롤러, 봇들이 JavaScript 파일을 실행시키지 못하고 HTML에서만 컨텐츠를 수집한다. 때문에 CSR 방식으로 개발된 페이지를 빈 페이지로 인식하게 된다. 검색엔진에 제대로 노출이 되지 않는다면 웹 페이지의 유입이 줄어드는 악순환이 반복된다. (반면 SSR은 view를 서버에서 전부 렌더링하여 내려주므로 HTML에 모든 컨텐츠가 저장되어 있기 때문에 SEO 적용에 큰 문제가 없다.) 따라서 많은 사람들이 리액트(React), 앵귤러(Angular), 또는 앰버(Ember) 등을 사용하여 웹사이트를 개발하면 검색 엔진 랭킹에 안좋을 것이라고 생각한다.

만약에 HTML 코드가 본문의 내용없이 메타 태그나 스크립트 태그 같은 것들밖에 없다면 검색 엔진은 페이지가 기본적으로 비어 있다고 추정하고 그 페이지의 순위를 낮게 측정할 것이다.

보안

기존의 SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 하지만 CSR 방식은 클라이언트 측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.

React Server Side Rendering(RSSR)

이런 모든 문제를 해결하기 위한 대안이 바로 Server Side Rendering 이다. 전통적인 웹은 대부분 Server Side Rendering 이었다. 즉, 서버에서 브라우저에 나타나는 형태 그대로를 HTML로 만들어서 제공하고 브라우저는 HTML을 표시하는 방식이다.

웹의 초기에는 이런 Server Side Rendering 방식으로 사용하다가 화면의 Script에서 AJAX를 이용하여 데이터를 가져오는 방법이 보편화되면서 서버에서는 일부 HTML과 Script만 브라우저로 전달하고 브라우저에서 Script를 실행 시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식을 사용하게 되었다. 이렇게 함으로써 웹에서 화면과 액션을 처리할 수 있는 방법이 획기적으로 개선되었다.

이런 방식에서 하나 더 나아간 것이 Single Page Application 방식인데 Single Page Application 이전까지는 그래도 하나의 특정 페이지 내에서의 처리는 스크립트가 하지만 다른 메뉴로 이동하는 경우 다른 페이지가 이를 서비스하게 되었는데 Single Page Application에서는 전체가 하나의 페이지로 서비스를 제공하는 형태이다. 이렇게 하면 웹 브라우저 위에 마치 하나의 앱이 동작하는 것과 같은 효과를 줄 수 있기 때문에 최근에 복잡한 화면, 기능을 가지는 서비스는 이런 방식을 선호하는 것 같다.

Single Page Application 에서도 검색 엔진 또는 페이스북 등과 같은 크롤러들에게 대응하거나 사용자가 직접 특정 URL을 입력하여 접근하는 방법을 지원하기 위해 전통적인 Server Side Rendering 방식을 지원하고 있다. 일반적인 Single Page Application 에 비해 약간은 추가 처리가 필요한 것이 있어 처음에는 이런 저런 다른 방식을 고민해보았지만 결국은 Server Side Rendering 이 위의 문제점을 해결하기에는 가장 최적이고 정상적인 방법이라 생각하여 Server Side Rendering을 추천한다.

from http://geniee.tistory.com/18 by ccl(A) rewrite - 2020-03-11 11:20:19

댓글

댓글 쓰기

이 블로그의 인기 게시물

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22
댓글 쓰기
자세한 내용 보기

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15
댓글 쓰기
자세한 내용 보기

Angular Lazy-loading-ngmodules 사용해보기

Angular Lazy-loading-ngmodules 사용해보기 재미있는 프레임워크공부/Angular 2+ Lazy-loading-ngmodules를 사용하는 이유 SPA(Single Page Application)의 단점인 초기 구동 속도를 Angular로 피해갈 수는 없다. 프로젝트가 커지면 커질 수록 더 초기 구동 속도가 느려질 것이다. 그래서 이번 시간에는 초기 구동 시 전체 모듈을 불러오지 않고 관련한 모듈 페이지 로딩 시 불러올 수 있게 구글에서 만들어 놓은 Lazy-loading-ngmodules에 대해 알아보자. Lazy-loading-ngmodules를 먼저 알기 전 Angular route 기능에 대해 이해하고 들어갔으면 좋겠다. 자 그럼 이제 시작해보자. 1. app-routing (root)를 위한 app-routing.module.ts 를 만들어 보자 만약 새로운 프로젝트를 시작한다면 아래의 명령어를 치면 module을 자동적으로 생성해준다. ng new (프로젝트 이름) --routing 기존에 프로젝트에 적용하려고 한다면 app-routing.module.ts를 만들고 그 안에 아래의 내용들을 집어 넣는다. import { NgModule } from '@angular/core' ; import { Routes, RouterModule } from '@angular/router' ; const routes : Routes = []; @ NgModule ({ imports: [RouterModule. forRoot (routes)], exports: [RouterModule] }) export class AppRoutingModule { } CLI을 이용하면 자동적으로 AppModule에 import 되지만 직접 생성하였기 때문에 AppRountingModule을 app.module.ts에 import 해준다. 2. 이제 서브 라우팅을 생성하기 위해 새로운 ...
댓글 쓰기
자세한 내용 보기