2-4. Suspense, Loading UI, Streaming SSR

Next.js는 서버에서 데이터를 내려줘야 렌더링 됨

굉장히 크고 느린 데이터가 있을 때 (서버 요청이 너무 느릴 때)

1. 비동기 데이터 로딩
   비동기적으로 데이터를 로딩하여, 페이지의 다른 요소들이 먼저 렌더링 될 수 있도록 하는 것
   데이터를 비동기적으로 가져오는 동안 로딩 스피너를 표시하고, 데이터가 준비되면 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 ( 
		...
	);
}; 

export default HomePage;

1. 캐싱 활용
   데이터가 자주 변경되지 않는다면, 캐싱을 활용하여 데이터 로딩 시간을 단축할 수 있음. 빌드 시 데이터를 미리 가져오고, 이를 정적 페이지로 제공 ← API 가 느리다면 빌드 시간이 오래걸림!

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 ( 
		 ...
	);
};

export default ProductsPage;

Loading UI

Next.js 14의 App Router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능

사용자가 웹 애플리케이션을 사용할 때 비동기 작업이 완료될 때까지 기다려야 하는 상황에서 유용

왜 중요한가

1. 사용자 경험 개선
   로딩 중인 상태를 명확히 표시하여 사용자가 무슨 일이 일어나고 있는지 알 수 있게 함. 이는 사용자의 불안감을 줄이고, 시스템이 응답하고 있음을 알림
2. 사용자의 불필요한 행동 문제 해결
   사용자에게 현재 상태를 제공하여 불필요한 클릭이나 페이지 이탈을 방지할 수 있음. 이는 사용자 유지율을 높이고, 사이트에 대한 신뢰성을 향상 시킴
3. 향상된 SEO 및 접근성
   로딩 UI는 페이지의 일부분이 빠르게 렌더링되어 SEO 성능을 향상시키고, 사용자가 페이지를 더 빠르게 접근할 수 있도록 함

실습

1. 로딩 컴포넌트 작성

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

1. 비동기 컴포넌트 로드

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> 
	); 
}

dynamic과 Suspense를 이용한 구현

dynamic함수는 비동기적으로 컴포넌트를 로드하고, 로딩 중일 때 Loading컴포넌트를 표시. Suspense컴포넌트는 비동기 작업을 처리할 때 대체 UI를 제공

Suspense & Streaming SSR

Next.js 14에서는 React의 서스펜스와 스트리밍 기능을 사용하여 서버 사이드 렌더링(SSR)을 더욱 효율적으로 처리. 이는 데이터를 부분적으로 스트리밍하여 사용자가 페이지를 더 빨리 볼 수 있게 함

서버 사이드 스트리밍

 

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

이렇게 하면 사용자가 페이지의 일부를 더 빨리 볼 수 있으며, 나머지 콘텐츠는 백그라운드에서 계속 로드됨

Next.js 14의 App Router에서는 loading.js파일을 사용하여 특정 라우트 세그먼트에 대한 로딩 상태를 쉽게 관리할 수 있음

여러 컴포넌트를 불러오는 코드

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> 
	); 
}

 

스트리밍은 긴 데이터 요청으로 인해 페이지 렌더링이 차단되는 것을 방지 하고자 할 때 특히 유용 → TTFB(Time To First Byte)와 FCP(First Contentful Paint)를 줄일 수 있기 때문

느린 디바이스에서 인터랙티브 시간(TTI)을 개선하는데 도움

스트리밍과 서스펜스를 사용하면, 여러 비동기 컴포넌트들을 최적화된 속도로 나눠서 불러올 수 있고, 여러가지 성능 지표에서 사용자가 더 나은 경험을 할 수 있도록 웹 애플리케이션을 최적화 할 수 있게 만듦