서버 사이드 렌더링

SPA

최초의 첫 페이지에서 데이터를 모두 불러온다.

서버 사이드 렌더링의 장점

FCP (First Contentful Paint) 더 빨라질 수 있다.
검색 엔진 최적화에 유용하다.
누적 레이아웃 이동이 적다.
디바이스 성능에 비교적 자유롭다.
보안에 좀 더 안전하다. -> 민감한 작업을 서버에서 수행하고 그 결과만 브라우저에 제공해서 보안 위협을 피할 수 있다는 장점이 있다.

서버 사이드 렌더링의 단점

서버 환경에 대한 고려가 필요하다.
적절한 서버가 구축돼 있어야 한다.

SPA(CSR) VS SSR

가장 뛰어난 싱글 페이지 어플리케이션은 가장 뛰어난 멀티 페이지 어플리케이션보다 낫다.
- lazy loading, code splitting, 효율적이 라우팅,
평균적인 싱글 페이지 애플리케이션은 평균적인 멀티 페이지 애플리케이션보다 느리다.
- 서버는 안정적인 리소스를 기반으로 매 요청마다 비슷한 성능의 렌더링을 수행할 것이다.

getStaticPaths getStaticProps

사용자와 관계없이 정적으로 결져오딘 페이지를 보여주고자 할 때 사용되는 함수다.
fallbakc을 사용해 사용자의 요청이 있을 때만 빌드하는 등의 최적화를 추가할 수도 있다.

getServerSideProps

서버 반환값을 기반으로 페이지가 렌더링된다.
class, Date 등은 props로 제공할 수 없다.
루트 컴포넌트부터 시작해 모든 컴포넌트를 실행해 완성하므로 클라이언트에서만 실행 가능한 변수, 함수, 라이브러리 등은 서버에서 실행하지 않도록 별도로 처리해야한다.

getInitialProps

return에 props를 반환하는게 아니라 바로 객체를 반환함.
서버와 클라이언트에서 모두 실행 가능한 메서드이다.

다양한 값들

pathname
asPath
query
req
res

전역 스타일

normalize.css/normalize.css 라고 node_modules에서 바로 꺼내올 수도 있다. (이건 몰랐음)

CSS-in-JS

스타일을 서버에서 미리 모은 다음 서버 사이드 렌더링에서 한꺼번에 제공해야 올바른 스타일을 적용할 수 있다.

5장 리액트와 상태 관리 라이브러리

Flux 패턴의 등장

웹 애플리케이션이 비대해지고 상태가 많아짐에 따라 어디서 어떤 일이 일어나서 이 상태가 변했는지 등을 추적하고 이해하기가 매우 어려운 상황이었다. 문제의 원인을 양방향 데이터 바인딩으로 보았다.

뷰가 모델을 모델이 뷰를 변경할 수 있다.
코드의 양이 많아지고 변경 시나리오가 복잡해질수록 관리가 어려워진다.

용어 정리

action : 어떠한 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미한다. 액션 타입과 데이터를 각 정의해 이를 디스패처로 보낸다.
dispatcher : 액션을 스토어에 보내는 역할을 한다. 콜백 함수 형태로 앞서 액션이 정의한 타입과 데이터를 모두 스토어에 보낸다.
store : 여기에서 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가지고 있다. 액션의 타입에 따라 어떻게 이를 변경할지가 정의돼 있다.
view : 리액트의 컴포넌트에 해당하는 부분으로, 스토어에서 만들어진 데이터를 가져와 화면을 렌더링하는 역할을 한다. 또한 뷰에서도 사용자의 입력이나 행위에 따라 상태를 업데이트하고자 할 수 있을 것이다. 이 경우에는 다음 그림처럼 뷰에서 액션을 호출하는 구조로 구성된다.

React Query, SWR

데이터 fetch 관리 라이브러리의 등장으로 상태를 관리하는 코드가 많이 사라지게 된다.

Recoil

먼저 애플리케이션 최상단에 recoilroot를 선언해서 하나의 스토어를 만들고, atom이라는 상태 단위를 RecoilRoot 에서 만든 스토어에 등록한다.
atom은 Recoil에서 관리하는 작은 상태 단위이며, 각 값은 고유한 값인 key를 바탕으로 구별된다.

Jotai

jotai의 atom은 recoil과 다르게 별도의 key를 넘겨주지 않아도 된다.

Zustand

많은 코드를 작성하지 않아도 된다.

정리

다양한 상태관리 라이브러리가 있다.

프로젝트의 성격에 맞게

유지보수가 얼마나 잘 되는지

얼마나 많은 사람들이 사용하고 있는지 위 3가지를 고려해서 상태관리 라이브러리를 선택하는것이 중요하다고 본다.

4주차 정리