지난 시간에는 React Router의 기능에 대해 좀 더 알아보았다.
먼저 Redux에 대해 알아보려고 했는데,
먼저 알고 넘어가야할 듯한 중요한 개념을 찾았다.
그래서 이번시간에 CSR 과 SSR에 대해 알아보고 SSR은 그러면 어떻게 React에서 구현하는지 알아보도록 하겠다.
참고한 사이트는 다음과 같다.
출처:
Dream Coding Ellie : 서버사이다 렌더링(https://www.youtube.com/watch?v=iZ9csAfU5Os)
https://velog.io/@leejyart/React-%EB%A1%9C-SSR-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
https://korinkorin.tistory.com/78
https://www.gatsbyjs.com/why-gatsby/
1. SPA란?
SPA는 Single Page Application의 약자다.
사용자가 한 페이지내에서 머무르면서 필요한 데이터를 서버에서 받아 와서 부분적으로만 업데이트 하는 방식으로 하나의 어플리케이션을 사용 하듯 하는 방식이다.
2. CSR(Client Side Rendering)이란?
클라이언트 사이드 렌더링이란(CSR) 클라이언트 측에서 모든 것을 해주는 것이다.
서버에서 인덱스라는 HTML 파일을 클라이언트에 보내면, 텅텅 빈 HTML 을 보낸다.
그 후에 다시 application에 연결된 js파일들을 서버로부터 다운받는다.
즉, 필요한 것을 일단 화면은 띄우긴 했는데 계속 다운로드를 받는 상황인 것이다.
이렇게 되면 몇가지 문제점이 있다.
2-1. Iintial Loading may take too long!
사용자가 첫 화면을 보기까지 시간이 오래걸릴수가 있다.
2-2. Low SEO(Search Engine Optimization)
CSR의 경우 HTML의 body가 맨 처음에 비어있기 때문에 검색엔진들이 CSR로 작성된 웹 페이지를 분석하는데 많은 어려움을 겪는다.
이러한 문제점으로 SSR(Server Side Rendering)이 도입되게 된다.
3. SSR(Server Side Rendering)이란?
클라이언트에서 모든 것을 처리하는 방식과 다르게 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTMl 파일을 만들게 되고 잘 만들어진 HTML 파일을 동적으로 조금 제어 가능한 소스 코드와 함께 클라이언트에게 보내주게 된다.
그러면 클라이언트 측에서는 잘 만들어진 HTML문서를 받아와서 사용자에게 바로 보여줄 수 있다.
이 SSR도 몇가지 문제점이 있다.
3-1. Blinking issue, Non-rich site interactions
사용자가 특정 url로 넘어가는 버튼을 클릭하게 되면 전체적인 웹사이트를 다시 서버에서 받아온다.
=> user experience 가 안좋아진다.
3-2. Server side overhead
사용자가 많은 제품일수록 과부하게 걸리기 쉽다.
3-3. Need to wait before interaction
사용자가 빠르게 웹사이트는 확인할 수 있지만 동적 데이터 처리용 JS가 아직 다운로드되지 않아서 반응이 없을 수 도 있다.
CSR, SSR 둘 다 장단점이 있기 때문에 우리는 TTV (Time To View) TTI (Time To Interact) 을 고려해서 웹사이트를 만들어야 한다.
3. React 에서 SSR구현하기
우선 git에 우리가 React Router 를 연습하는데 사용하고 있는 프로젝트로 간다. (갓엇는데.... 따라하지마세요 아직...)
필자는 vs code 의 terminal을 열어서 다음 명령어를 수행했다.
git add .
git commit -m "commit before eject"
npm i -g yarn
yarn eject
이게 보니까 서버 사이드 렌더링을 하기 위해서는 웹팩 설정을 우리가 customizing을 해야 한다고 한다.
git repository랑 연결된 것도 없는데 이렇게 한다는것도 처음에 이해가 안됐다.
다음 명령어들을 다 수행하고 나면 폴더가 뿅! 하고 나타날 것이다.
config 폴더 내에 여러가지가 있다.
...해서 하려고 했는데 하...
벌써부터 스트레스를 받는다. (왜...?ㅠㅠ)
React 자체만으로 Static view를 만드는데 엄청 귀찮고 짜증나고 복잡하다!
이를 위해서 Next.js를 많이 사용한다고 한다.
4. Gatsby? 위대한 개츠비? 레오나르도 다빈치?
다음은 Gatsby 공식 사이트의 모습을 캡쳐한 것이다. 다음 글을 읽어보면 다음과 같다.
개발자가 React기반의 프레임워크를 사용해 빠르고 안전하고 강력한 웹사이트를 구축하고, 놀랍도록 간단한 웹 험으로 서비스들과 다른 content, APIs를 사용하도록 돕는다.
Gatsby는 서버 없이 오직 정적 사이트 생성을 위해 사용하는 프레임워크이다.
그렇기에 기업 소개 페이지, 블로그, 포트폴리오 제작에 좋은 프레임워크이다.
4. Next.js? I'm on the Next Level?(재껴라 재껴라)
next.js 공식 사이트 화면을 캡쳐해왔다. 하여간 무슨 공식 사이트 화면 가면 개발자한테 다 좋데 무슨 ㅋㅋㅋ
하여간... 읽어보면 다음과 같다.
Next.js는 당신이 필요로 하는 생상을 위핸 모든 특징을 가진(자신감 쩌네...) 최고의 개발자 경험을 제공합니다.
혼합된 정적 & 서버 rendering, TypeScript 지원, smart한 bundling, route pre-fetcing, 그리고 더있다!
config도 필요 없다.
쌩 React만으로 SSR을 구현하려고 한 결과 정보는 많은데 되는게 하나도 없다. (우씨 진짜!)
그리고 굉장히 구구절절 설정해줘야 하는게 너무 많아서 짜증이 났다. config설정을 해야 하는데 무엇인지 몰라서 헤메어서 포기했다...
하지만 Next.js를 사용하면 그것이 쉽다고 한다! config를 따로 할 필요없이 Next.js에서 그러한 기능을 전부 제공하니 너무 좋지 않은가?
우리가 있었으면 하는 기능을 이미 만들어서 제공하고 있다.
이렇게 간단하게 CSR, SSR에 대해 알아보고 이를 지원해주는 프레임워크도 간단하게 알아보았다.
프론트 개발이라고 해서 요즘은 정말 옛날처럼 디자인 관련 작업하고, button 배치만 하고 그런 일이 아니라 정말 고급화가 된 것 같다.
그렇기에 굉장히 흥미로운 분야이기도 하다.
'programming language > react' 카테고리의 다른 글
| [React] Redux 개념 좀 더 알기 (0) | 2022.06.21 |
|---|---|
| [React] Redux 소개 및 간단 사용하기 / redux-tookit 적용 (0) | 2022.06.20 |
| [React] React Router 파해치기 (0) | 2022.06.12 |
| [React] useReducer / React Router 사용하기 (0) | 2022.06.12 |
| [React] React.memo, useCallback사용하기 (0) | 2022.06.11 |