Skip to content

Commit

Permalink
Create 이상조.md
Browse files Browse the repository at this point in the history
  • Loading branch information
sjoleee authored Dec 3, 2024
1 parent 48283d0 commit 1bc9a3f
Showing 1 changed file with 56 additions and 0 deletions.
56 changes: 56 additions & 0 deletions 챕터_13/이상조.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
## CSR

html이 하나, 기본적으로 번들을 다 들고와서 페이지 이동 빠릿하게 해줌.
다만, 번들이 커지면 초기 로딩 느려짐.

## SSR

html을 서버에서 그리고 브라우저에서 수화하는 방식.


## SSG

동적 데이터가 필요 없는 경우 사용하는 렌더링 방식.
동적 데이터가 필요 없다는 것은 빌드 타임에 알 수 있는 것만 사용한다는 의미.
예를 들어, 쿠키같은건 모르니까 SSG 안됨.
넥스트는 쿠키같은거 쓰면 알아서 동적으로 ssr해줌.

## ISR

주기적으로 빌드해두기.
On—demand ISR이라는게 있는줄은 몰랐네...

## 스트리밍 SSR

next에서 Suspense 바운더리가 streaming되는 방식을 보면 신기함.
어떻게 하는지는 비밀임 ㅋㅋ

## 엣지 SSR

이건 뭔지 잘 이해가 안간다. 네트워크 지식이 부족해서 그런듯;
궁금한데 좀 더 자세히 설명해주지...

## 하이브리드 렌더링

nextjs는 첫 페이지는 SSR, 이동하면 CSR로 동작한다.
nextjs 장점이 모든 페이지를 프리렌더링 해두고, 접속시 빠르게 html부터 보여주고 js 수화해서 상호작용 가능하게 만드는 방식이라는 건데...
페이지 이동하면 이 장점은 누릴 수 없는 것 같다.
그리고 nextjs는 기본적으로 라우트 단위로 번들을 쪼개기 때문에 페이지 이동시 완전 빠르게는 이동할 수 없고 해당 페이지의 js 번들을 가져오는 시간이 필요하다.
다만, html을 받지 않는 것 만으로도 의미가 있다고 봄.
완전히 html이 언로드되면 새로운 html을 가져와서 리액트 인스턴스부터 다시 생성해줘야 하기 때문.
리액트가 사용하는 합성 이벤트를 다시 바인딩하는 작업도 있다.
그리고 전역 상태 사용하면 그것도 초기화되니까 문제가 있긴 하다.

nextjs는 가능한 많은 부분을 그대로 사용하도록 노력한다(layout.tsx 같은 것들)
라우터 캐시가 있어서 방문했던 페이지는 서버 요청 없이 보여줄 수 있음(대신 on demand 페이지는 아님)
그리고 Link를 사용하면 프리패치해서 가능한 빠른 속도로 화면을 보여주도록 만들어놨음.

## 아일랜드 아키텍처

이건 처음 들어보는데, nextjs에서 상호작용이 필요한 부분만 클라이언트 컴포넌트로 사용하는 것과 어떤 차이가 있는지 잘 모르겠다.

## RSC

읽다가 궁금한 부분은 RSC는 서버에서 실행되니까 top level await가 가능해졌고, 그래서 fetch를 useEffect 없이도 await할 수 있는 건데...
클라에서 안되는 건 UI 렌더링 차단되니까 그런 것 같고, 서버에서 가능한 이유는 뭘까?? UI가 없다곤 해도 await 하단의 코드는? 실행이 다 지연되지 않을까??
UI가 없기 때문에 괜찮다는건가...??

0 comments on commit 1bc9a3f

Please sign in to comment.