본문 바로가기

개발/NextJS4

RSC vs SSR 서론Next를 사용하게 되었을 때의 렌더링 과정을 공부하던 중 좋은 글을 발견해서 그 글을 보며 정리하게 되었다=> 원본 글을 거의 그대로 정리하는 것임을 미리 밝힙니다(제가 참고했던 글에 대해서는 게시물 하단에 링크를 달아두었습니다)우리가 흔히 React와 Next의 가장 큰 차이라고 하면,CSR(Client Side Render)과 SSR(Server Side Render) 라고 답할 것이다.SSR은 서버측에서 완성된 HTML을 보내주기 때문에 클라이언트는 그걸 받아서 곧바로 화면에 보여주기만 하면 되기에 사용자가 빈 화면을 보는 시간을 줄여줄 수 있다.이정도의 개념은 가지고 있었지만, 조금 더 자세하게 알 필요가 있다고 생각했다. Server ComponentNext에는 Server Componen.. 2024. 5. 4.

[공식문서 번역] Composition Pattern 컴포지트 패턴? 컴포지트 패턴은 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다 원래는 객체지향에서 사용되던 패턴인듯하다 이걸 어떻게 NextJS에서 사용하게 될지, 공식문서를 정리해보았다 Server and Client Composition Patterns 서버와 클라이언트의 컴포지트 패턴 리액트 애플리케이션을 만들 때, 애플리케이션에서 어떤 부분이 서버에서 렌더되어야 하는지 또는 클라이언트에서 렌더되어야 하는지를 고려할 필요가 있다. 이 페이지는 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 때 추천되는 컴포지션 패턴을 다룬다. When to use Server and Client Components? 언제 서버 컴.. 2024. 3. 22.

[공식문서 번역] NextJS 클라이언트 컴포넌트 Client Components클라이언트 컴포넌트클라이언트 컴포넌트는 서버에서 미리 렌더링된 상호작용이 가능한 UI를 작성할 수 있게 하고, 브라우저에서 동작하는 JavaScript를 사용할 수 있게 해준다.이 페이지는 어떻게 클라이언트 컴포넌트가 동작하는지, 어떻게 그들이 렌더되는지, 그리고 언제 그것을 사용해야 하는지에 대해 알아볼 것이다. Benefits of Client Rendering클라이언트 렌더링의 이점클라이언트측에서 렌더링 작업을 하는 것은 다음과 같은 2가지 이점을 가진다.Interactivity (상호작용): 클라이언트 컴포넌트는 상태(state), 효과(effects), 이벤트 리스너(event listeners)를 사용할 수 있게 해준다. 그것은 유저에게 즉각적인 피드백을 제공하고.. 2024. 3. 21.

[공식문서 번역] NextJS 서버 컴포넌트 Server Components Next13이 등장하면서 가장 중요한 변화는 서버 컴포넌트라고 생각된다 리액트 서버 컴포넌트(RSC)는 서버에서 렌더링되고 선택적으로 캐시될 수 있는 UI를 작성할 수 있도록 해준다. NextJS에서 렌더링 작업은 Route Segment 별로 분할되기 때문에 스트리밍(Streaming)과 부분 렌더링이 가능하다. 서버 렌더링 방식에는 3가지가 있다. Static Rendering (정적 렌더링) Dynamic Rendering (동적 렌더링) Streaming (스트리밍) Benefits of Server Rendering 서버에서 렌더링을 했을 때의 이점 Data Fetching (데이터 불러오기) 서버 컴포넌트는 데이터를 불러오는 로직을 데이터 소스와 가까이에 있는 .. 2024. 3. 20.

이전 1 다음

티스토리툴바