suspense

<SWRConfig value={{ suspense: true }}>
  <Profile />
</SWRConfig>

<Suspense fallback="Loading reviews...">
  <Reviews />
</Suspense>

React Server Components (Alpha)

서버에서 React 컴포넌트를 렌더링할 수 있다. 이것은 서버에서 HTML을 미리 생성하는 서버 측 렌더링(SSR)과 근본적으로 다릅니다. 서버 컴포넌트를 사용하면 "클라이언트 측 JavaScript가 필요하지 않으므로" 페이지 렌더링이 빨라집니다. 이것은 서버 렌더링의 가장 좋은 부분을 클라이언트 측 상호 작용과 결합하여 응용 프로그램의 사용자 경험을 향상시킵니다

• document를 function으로 변경해줘야 한다.
• next config에서도 서버 컴포넌트를 사용한다고 설정해주자.

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  experimental: {
    reactRoot: true,
    runtime: "nodejs",
    serverComponents: true,
  },
};

• 서버 컴포넌트 파일을 xx.server.tsx 으로 수정해준다.

import { Suspense } from "react";

let finished = false;
function List() {
  if (!finished) {
    throw Promise.all([
      new Promise((resolve) => setTimeout(resolve, 15000)),
      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>
  );
}

• promise를 통해서 suspense할 수 있다.