4주차 개념 스터디

CSR과 SSR

CSR(Client Side Rendering)

최초 요청 시에 HTML, CSS, Javascript 등 리소스를 받아온 후 서버에 데이터만 요청하고 자바스크립트로 랜더링을 한다. 필요에 따라서 데이터를 서버에 요청해서 받아와 랜더링을 하기도 한다.  

SSR(Server Side Rendering)

완전하게 만들어진 HTML 파일을 받아오고 랜더링을 한다. 웹서버에 요청할 때마다 브라우저가 새로고침 되고 서버에 새로운 페이지에 대한 요청을 하는 방식이다.

 

	CSR	SSR
초기로딩속도	모든 JS 파일을 다운 받아와야 하기 때문에, 초기에는 오래 걸림	CSR에 비해 다운 받는 파일이 많지가 않아 속도가 빠름
서버 부담	data 요청이 있을 때만 서버에 요청 하기 때문에 서버에 부담이 적음	서버와 잦은 응답을 하기 때문에 서버에 부담이 됨
SEO	맨 처음 HTML 파일이 비어 있어, 크롤러가 데이터를 수집할 수 없음 (구글 제외)	HTML에 대한 정보가 처음에 포함되어 있어 데이터를 수집할 수 있음

 

Next.js를 자주 사용하는 이유?

Next.js는 리액트를 기반으로 한 프레임워크로 SSR를 구현하고 SEO에 유리하기 때문에 사용한다. 

Next.js는 Server에서 받은 사용자의 접속 요청을 초기에 SSR방식으로 렌더링 될 HTML을 보내고, 브라우저에서 JavaScript를 다운로드 후 React를 실행하기 때문에 SEO가 가능하다. 또한 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리함으로써 SPA 장점도 유지할 수 있다.

결론: Next.js를 사용하는 이유는 SSR 구현을 위함

 

SPA란? Single Page Application의 약자로 한 개의 페이지를 가진 어플리케이션을 의미한다. SPA의 장점은 사용자 친화적, Virtual Dom 그리고 초기 랜더링 후 데이터만 받기 때문에 서버 요청이 상대적으로 적은 것 등이 있다. 보통 SPA는 CSR방식으로 랜더링 한다. 그렇지만, SPA가 무조건 CSR 방식만 사용하는 것은 아니다. 

SEO, SSG, gatsby.js

SEO(Search Engine Optimization)란? 단어 그대로 이해하자면 검색 엔진 최적화이다. 예를 들자면, 사용자가 구글에 키워드를 검색했을 때 구글의 검색 엔진이 웹 페이지의 정보들을 읽어서 가장 관련성이 높은 글들을 보여주는 것이다. SSR이 SEO에 유리한 이유는 이미 콘텐츠가 구성되어 있는 HTML로 랜더링 되기 때문에 검색엔진이 파악하기 쉽기 때문이다. 

 

SSG(Static Site Generator)란? 

SSG는 원시 데이터와 템플릿 세트를 기반으로 전체 정적 HTML 웹 사이트를 생성하는 도구이다. 기본적으로 SSG는 개별 HTML 페이지를 코딩하는 작업을 자동화하고 해당 페이지를 미리 사용자에게 제공할 준비를 한다. 쉽게 이해하자면, SSR과 CSR의 단점을 보완해주는 기능이다. 

 

Gatsby.js란? 

gatsby.js는 리액트 기반의 정적 페이지 생성 프레임워크로 SSG형태의 페이지를 구성하는데 최적화 되어 있다. 그렇기에 gatsby.js는 정적인 데이터가 많거나 CMS 등을 가볍게 사용하는 페이지를 제작할 때 많이 사용된다. 

장점으로는 GraphQL을 사용하여 내부 데이터 조회, 플러그인 및 커뮤니티 생태계 풍부, SSG 최적화

단점으로는 SSR을 지원 안 하고 최적화 기능으로 인한 오류가 발생한다는 점이 있다. 

 

CMS(Contents Management System)란?

콘텐츠를 관리하는 시스템으로 CMS에서 자체 제공하는 기본 테마 등을 이용하여 HTML 등의 지식이 없어도 웹 사이트를 만들 수 있게 해주는 도구다. 

styled component, scss(css modules), bootstrap, tailwindCSS 등

•styled components

Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 리액트 프레임워크를 주요 대상으로 한 라이브러리다.

 

•scss(css modules)

CSS 작업 중 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재 등 프로젝트가 커지면서 복잡해지는 작업 등을 쉽게 해주고 유지보수가 쉬워지게 도와주는 기능이다. scss는 sc전 처리기로 scss 자체를 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰게 한다.

 

•bootstrap

부트스트랩은 프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크로 HTML과 CSS 기반의 템플릿 양식이라던가 CSS와 Javascript로 만든 버튼, 입력창 등의 페이지를 구성하는 요소들이 포함되어 있다. 부트스트랩은 웹 페이지에서 많이 쓰이는 요소들이 전부 내장되어 있어 원하는 대로 사용할 수 있는 장점이 있다. 

 

•tailwindCSS

utility-first을 가진 CSS 프레임워크로 부트스트랩과 비슷하게 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다. 

 

•utility-first란?

utility-first는 HTML 파일 내에서 사용자 정의 디자인을 구축하기 위해 개별 유틸 클래스를 제공해 사용자의 취향대로 컴포넌트를 스타일링하는데 도움을 주는 기능이다. 

 

PWA(Progressive Web App)이란 무엇인가

모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술로 웹과 앱 모두의 장점을 결합한 기능이다.

 

<PWA에서 구현할 수 있는 기능>

•푸시 알림

일반적인 앱처럼 푸시 알림을 보낼 수 있음 

설명하자면 브라우저가 닫혀있는 사용자에게 푸시 알림을 보내기에 웹 사이트와에 비해 접촉 횟수를 늘릴 수 있음

 

•아이콘을 홈 화면에 추가

스마트폰의 홈 화면에 아이콘을 추가할 수 있음 

즉 기존 앱 처럼 홈 화면에서 직접 액세스를 할 수 있어서 재방문에 편리함

 

•설치 불필요, 네이티브 앱과 같은 사용감

앱이 아니기 때문에 스토어에서 다운할 필요가 없음

 

•표시 속도의 고속화

프리패치 기능 덕분에 사용자가 페이지를 읽고 있는 동안 다음 페이지의 데이터를 읽어 들일 수 있음

 

•오프라인에서 열람이 가능

미리 페이지 정보를 읽어들여 오프라인 상태에서도 캐시 데이터를 사용해 사이트의 열람이 가능함