Web/NextJs

[ Next.js - DeepDive ] - REACT18 - Sever Components - Parallelism

이제 본격적으로 fetch로 값을 가져와서 병렬적으로 비트코인의 정보와 시세를 가져와 보도록 하겠습니다. 일단 코드를 보고 설명 하도록 하겠습니다. /pages/coins.server.tsx import { Suspense } from "react"; const cache: any = {}; function fetchData(url: string) { if (!cache[url]) { throw Promise.all([ fetch(url) .then((r) => r.json()) .then((json) => (cache[url] = json)), new Promise((resolve) => setTimeout(resolve, Math.round(Math.random() * 1555)) ), ]); } r..

[ Next.js - DeepDive ] - REACT18 - Sever Components 2

이제 본격적으로 간단한 코드로 실습을 해보겠습니다. https://nextjs.org/docs/advanced-features/react-18/server-components React 18: React Server Components | Next.js React Server Components (Alpha) Server Components allow us to render React components on the server. This is fundamentally different from server-side rendering (SSR) where you're pre-generating HTML on the server. With Server Components, there's zero clien..

[ Next.js - DeepDive ] - REACT18 - Suspense 2

Suspense란? Suspense라는 React의 신기술을 사용하면 컴포넌트의 랜더링을 어떤 작업이 끝날 때까지 잠시 중단 시키고 다른 컴포넌트를 먼저 랜더링할 수 있습니다. 이 작업이 꼭 어떠한 작업이 되어야 한다는 특별한 제약 사항은 없지만 아무래도 REST API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 작업을 가장 먼저 떠오르게 됩니다. 비동기로 데이터를 읽어오는 것은 예전에 클래스로 컴포넌트를 작성하던 시절부터 훅을 사용하는 요즘까지도 항상 필요한 일이지만 React로 직접 구현하기에는 까다로운 면이 있습니다. 그래서 일반적으로 데이터 로딩을 전문적으로 하는 라이브러리나 프레임워크에서 제공하는 로더에 의존하는 경우가 많습니다. Suspense는 어떤 컴포넌트가 읽어..

[ Next.js - DeepDive ] - REACT18 - Sever Components

서버 컴포넌트는 클라이언트 쪽에서 자바스크립트를 전혀 사용하지 않아도 만들 수 있습니다. 말 그대로 전혀 필요 없습니다. 유저는 자바스크립트를 로드 할 필요도 없는 것입니다. 그렇다고 리액트 서버 컴포넌트가 서버 사이드 렌더링을 하는건 아닙니다. 리액트 서버 컴포넌트는 페이지를 렌더링하는걸 신경쓰지 않습니다. 서버에서 컴포넌트 렌더링하는걸 신경쓸 뿐입니다. 지금까지는 페이지에 집중했습니다. 이 페이지가 서버사이드 렌더링인지 static렌더링인지. 서버 컴포넌트를 사용할 때는 페이지를 신경쓰지 않습니다. 서버사이드 렌더링은 페이지에 접속하면 페이지가 서버에서 렌더링이 되는 것입니다. 페이지 전체를 로드하는데 시간이 많이 걸리게 되죠. 왜 RSC(React Server Component)일까? 기존 SSR방..