[스트리밍과 에러핸들링]

스트리밍이란

Streaming 이란 강물, 하천을 의미하는 단어로 큰 데이터를 잘게 쪼개어 흐르듯이 보내주는걸 뜻함
영상뿐만 아닌 웹 서비스에서도 사용할 수 있게 Next.js 에서 스트리밍 기능을 제공

이전에는 페이지를 불러오는 과정에서 데이터 통신과 같은 시간이 다소 걸리는 작업이 있는경우
전체적으로 화면을 전달받는데 시간이 걸림

비동기 작업이 없는 즉시 화면에 렌더링 가능한 컴포넌트만 브라우저에게 보내준 다음에
비교적 늦게 작업이 완료되는 컴포넌트는 작업이 완료된 후에 보내줌

Dynamic 페이지에 주로 사용
async Page 에서만 지원
서로 다른 경로간의 탐색 시 최초 로드에 최적화된 방식

아래 형식처럼 같은 위치에 loading.tsx 를 만들어주면 끝
동일한 페이지내에서 이동(쿼리 스트링) 시 동작x
	- 이유는 클라이언트 라우트 캐시에 이미 RSC Payload 가 최초 받아올 때 저장되어 서버로 부터 받아오는게 아니므로

search
	- loading.tsx
	- page.tsx

※주의: 여기서 loading.tsx 는 마치 레이아웃처럼 해당 경로 아래 있는 모든 비동기 페이지를 스트리밍 되도록 설정

search
	- /setting
    	- page.tsx // /setting 경로에 접근 시 페이지내에 비동기 동작이 완료될 때 까지 상위 loading.tsx 보여짐
	- loading.tsx
    - page.tsx

좀 더 세밀한 스트리밍을 위한 Suspense

loading.tsx 이외에 컴포넌트 단위로 비동기 작업 하고있는 컴포넌트에 대해 스트리밍을 적용시키고 싶다면 Suspense 사용

💡 Suspense 는 로드될때까지 로딩을 보여주는 컴포넌트로만 알고 있었는데, 스트리밍이라는 최적화 기법도 적용되는거였구나

에러 핸들링

try catch 문으로 모든 예외처리하기 번거로우니 error.tsx 사용
error.tsx 선언된 위치의 layout.tsx 까지만 그림

search
	- /setting
    	- page.tsx // /setting 경로에 접근하여 에러 발생 시 상위 error.tsx 반환
    - error.tsx
    - page.tsx

error.tsx 에 "use client" 사용하는 이유
사전렌더링 시 서버에서 그려질때 적용되는거 이외에 하이드레이션 과정에서도 에러 발생 시 error.tsx 파일이 필요하므로

export default function Error({error, reset}:{error: Error, reset: ()=>void}){

// reset 은 서버측에서 실행한 서버컴포넌트는 다시 실행하지 않음
// 클라이언트에서 서버로부터 이미 받았었던 정보로 다시 렌더링함

// 그래서 router.refresh 로 백그라운드에서 서버컴포넌트 다시 받아와 적용하고
// reset 으로 에러바운더리 상태 초기화

	onClick={()=>{
		startTransition(()=>{
    		router.refresh();
        	reset();
    	})
    }

}

Soft Navigation 이란?

router.refresh 는 소프트 네비게이션이다
브라우저는 현재 페이지를 유지한 채로, 변경이 필요한 부분만 동적으로 업데이트
(스크롤 위치, 입력 폼 내용 유지 가능)

startTransition 이란?

콜백함수 안에 정의된 UI 변경 작업을 일괄 적용시켜줌
즉, router.refresh 와 reset 이 한몸처럼 적용되도록