[이상조] 챕터 13: 렌더링 패턴 (#110)

Author: sjoleee

챕터_13/이상조.md

@@ -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가 없기 때문에 괜찮다는건가...??