diff --git "a/\354\261\225\355\204\260_13/\354\235\264\354\203\201\354\241\260.md" "b/\354\261\225\355\204\260_13/\354\235\264\354\203\201\354\241\260.md" new file mode 100644 index 0000000..bc4e34c --- /dev/null +++ "b/\354\261\225\355\204\260_13/\354\235\264\354\203\201\354\241\260.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가 없기 때문에 괜찮다는건가...??