[/\/] Loading UI - Suspense 와 Streaming SSR

 

로딩까지 시간이 걸리는 페이지로 이동을 한다고 해보자.

 

 

영상에서 볼 수 있듯이 페이지가 모두 그려질 때까지 넘어가지 않고 스피너가 돌게 된다.

이를 보완할 수 있는 방법이 있다.

 

비동기 데이터 로딩 [클라이언트 사이드]

 

데이터를 불러오는 것에서 비동기를 말하는 것이 아닌

페이지를 순차적으로 보여주는 것에 있어서 비동기 형식을 말한다.

 

isLoading 컴포넌트를 사용하여 데이터를 비동기적으로 가져오는 동안 'Loading...' 을 표시하고 데이터가 준비되면 UI를 업데이트한다.

'use client';

import React, { useState, useEffect } from 'react';
import { Product } from '@/types';

const HomePage = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState<Product[]>([]);

  useEffect(() => {
    setIsLoading(true);
    fetch('http://localhost:4000/products')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Products</h1>
      <div className="p-8 m-4">
        {data.map((product) => (
          <div className="flex border p-4 gap-4 rounded-md" key={product.id}>
            <img
              className="rounded-sm"
              width={150}
              height={150}
              src={product.images}
              alt={product.title}
            />
            <div className="flex flex-col justify-between">
              <div>
                <h2 className="text-xl font-bold">{product.title}</h2>
                <p className="text-sm">{product.description}</p>
                <p className="mt-4 text-2xl">{product.price.amount}$</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default HomePage;

 

 

캐싱 활용 [서버 사이드]

 

캐싱 활용 = SSG

데이터가 자주 변경되지 않는다면, 캐싱을 활용하여 데이터 로딩 시간을 단축할 수 있다.

다만 빌드 시, 시간이 조금 걸리며 정적인 페이지로만 제공할 수 있다.

import ProductList from '@/components/ProductList';
import { Product } from '@/types';

const ProductsPage = async () => {
  const response = await fetch('http://localhost:4000/products',
  {cache: "force-cache"});
  const products: Product[] = await response.json();

  return (
    <div>
      <h1>Products</h1>
      <ProductList products={products} />
    </div>
  );
};

export default ProductsPage;

 

 

Loading UI [서버 사이드]

 

실시간으로 서버에서 데이터를 받아야 할 때 = SSR

사용하고자 하는 route segment 폴더 내에 loading.tsx 파일을 만들어 로딩 상태를 표시할 컴포넌트를 생성한다.

그럼 그 페이지를 불러올 때 자동적으로 loading.tsx 파일의 내용이 화면에 출력된다.

// loading.tsx
export default function Loading() {
  return <div>Loading...</div>;
}

 

이렇게 loading.tsx 파일만을 적용시키면 해당 페이지 전체에 로딩 UI가 적용된다.

하지만 페이지 일부에만 로딩 UI를 적용하려면 Suspense를 활용해야 한다.

 

Suspense

 

서스펜스 컴포넌트는 비동기 작업을 처리할 때 대체 UI를 제공하는 역할이다.

import NewProductList from "@/components/NewProductList";
import { Suspense } from "react";
import Loading from "./loading";

export default async function Home() {
  return (
    <div className="p-8 m-4">
      <h1>Sparta Shop</h1>
      <Suspense fallback={<Loading />}>
        <NewProductList />
      </Suspense>
    </div>
  );
}

 

'Sparta Shop' 텍스트가 먼저 표시되는 동안 NewProductList 부분은 로딩 UI를 보여준다.

이처럼 부분적으로 페이지의 로딩 UI를 보여주어 사용자가 완성되지 않은 페이지라고 해도 페이지 자체를 빠르게 확인할 수 있다.

 

 

Streaming SSR

 

Next.js 14에서는 React의 서스펜스와 스트리밍 기능을 사용하여 SSR을 더욱 효율적으로 처리할 수 있다.

스트리밍은 서버에서 준비된 콘텐츠를 조각조각 클라이언트에 보내는 방식이다.

 

하나의 서스펜스만 사용한다면 한 개의 비동기 컴포넌트만 크게 분리해서 불러오겠지만

여러 컴포넌트를 나눠서 불러오려면 스트리밍 SSR을 활용해야 한다.

export default async function Home() {
  return (
    <div className="p-8 m-4">
      <h1>Sparta Shop</h1>
      <Suspense fallback={<Loading />}>
        <NewProductList />
      </Suspense>
      <Suspense fallback={<Loading />}>
        <ProductList />
      </Suspense>
    </div>
  );
}

 

 

👇🏻Next 공식문서

스트리밍은 긴 데이터 요청으로 인해 페이지 렌더링이 차단되는 것을 방지하고자 할 때 특히 유용하며,

TTFB(Time To First Byte)와 FCP(First Contentful Paint)를 줄일 수 있기 때문입니다.

또한 특히 느린 디바이스에서 인터랙티브 시간(TTI)을 개선하는 데 도움이 됩니다.