[ 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

nextjs.org

이 공식문서를 참고했습니다.

우선 next, react, react-dom의 권장 버전을 설치해 줍니다. 그리고 next-config.js를 아래와 같이 바꾸어 줍니다.

/next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  experimental: {
    runtime: "nodejs",
    serverComponents: true,
  },
  images: {
    domains: ["imagedelivery.net", "videodelivery.net"],
  },
};

그리고 Server-Component를 사용하기 위해서, Custom Document파일을 바꾸어 주었습니다.

/pages/_document.tsx

// import { Html, Head, Main, NextScript } from "next/document";

import { Head, Html, Main, NextScript } from "next/document";

// export default function Document() {
//   return (
//     <Html>
//       <Head />
//       <link
//         rel="stylesheet"
//         href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
//       />
//       <body>
//         <Main />
//         <NextScript />
//       </body>
//     </Html>
//   );
// }

export default function Document() {
  console.log("DOCUMENT IS RUNNING");
  return (
    <Html lang="ko">
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

기존에 SWR을 사용할 때, Suspense를 통해서 declarive하게 로딩상태를 정의하고 화면에 보여지도록 했습니다. 하지만 Suspense가 어떻게 그 자식의 로딩상태를 확인하는지 알아봅시다.

useSWR은 promise를 반환합니다. 이 promise의 상태를 보고 Suspense는 데이터의 로딩이 완료되었는지 확인하게 되는 것입니다. 어쨋든 여기서 Reviews는 프로미스를 던지고 Suspense가 Promise를 잡는 이벤트가 발생할 겁니다.

이를 기반으로 간단히 코인의 목록을 가져오는 coins.server.tsx컴포넌트를 만들어 보도록 하겠습니다.

/pages/coins.server.tsx

import { Suspense } from "react";

let finished = false;
function List() {
  console.log("server doing");
  if (!finished) {
    throw Promise.all([
      new Promise((resolve) => setTimeout(resolve, 10000)),
      new Promise((resolve) => {
        finished = true;
        resolve("");
      }),
    ]);
  }
  return <ul>xxxxx</ul>;
}

export default function Coins() {
  return (
    <div>
      <h1>Welcome to RSC</h1>
      <Suspense fallback="Rendering in the server...">
        <List />
      </Suspense>
    </div>
  );
}

export const config = {
  runtime: "edge",
};

우선 서버형 컴포넌트로 만들었습니다. 이는 서버에서 실행되며, HTTP streaming방식으로 Client-Side로 결과를 보내줍니다. 그리고 이 컴포넌트의 이전에 작성한 다른 컴포넌트와의 다른 점은 따로 혼자서만 서버에서 렌더링된다는 점입니다. 이게 무슨 말이냐면 미래에는 이런식으로 api handler를 만들 필요가 없다는 점입니다.

그냥 List안에다 await client?.user()이렇게 프리즈마로 바로 가져다가 쓰면 되기 때문입니다. 미래에는 컴포넌트에서 바로 프리즈마를 사용할 수 있다는 것입니다. useSWR을 써서 api를 호출하고 결과를 받아오는 작업을 할 필요가 없다는 것입니다.

다음과 같이 Server-Component가 서버에서만 실행됨을 알 수 있습니다. 하지만 지금은 유저에게 컴포넌트 코드가 모두 전송되기 때문에, 컴포넌트에서 프리즈마를 사용할 수 없습니다. 만약 컴포넌트가 서버에서만 렌더링된다면 이런 문제가 사라질 것입니다.

저작자표시 비영리 동일조건

'Web > NextJs' 카테고리의 다른 글

[ Next.js - DeepDive ] - REACT18 - Sever Components - Parallelism (0)	2022.08.13
[ Next.js - DeepDive ] - REACT18 - Suspense 2 (0)	2022.08.13
[ Next.js - DeepDive ] - REACT18 - Sever Components (0)	2022.08.13
[ Next.js - DeepDive ] - REACT18 - Suspense (0)	2022.08.12
[ Next.js - DeepDive ] - Data Fetching Reca (0)	2022.08.12

/next.config.js

/pages/_document.tsx

/pages/coins.server.tsx

'Web > NextJs' 카테고리의 다른 글

티스토리툴바