Next.js client에서 server로 API를 요청하지 않고 server 작업을 실행하는법 (useTranstition())

🤔  먼저 fetch API를 이용한 Client 와 Sever의 통신 방법에 대해 알아보자

기본적으로 Client와 Server는 API를 통해 데이터를 주고 받는다
하지만 Next.js는 Client와 서버의 데이터를 API를 통해서 주고 받지 않아도 된다

 

🧐  HTTP 요청(fetch API) VS Next.js Server Action

기본적으로 Next.js를 사용하지 않고있다면 HTTP 요청을 사용해야한다 RESTful하고 통신이 명확하게 분리되기 때문이다

하지만 Next.js fullstack으로 개발중이라면

Next.js Sever Action이 더 좋을 수 있다

코드를 간소화해도 되고 HTTP 요청이 없어서 빠른 응답과 직접적으로 클라이언트 함수에 접근이 가능하기 때문이다

다양한 BE를 사용한다면 HTTP 요청이 정답이지만 Next.js Sever 와만 통신하는 데이터 처리라면

Server Action이 좋은 선택이 될 수 있다

 

// Client Function
const TestServerJobs = async () => {
	try{
    	const response = await testAction()
    }
}

// Action
const testAction = async () => {
  return await testService.testFunction()
}

//Service
class TestService{
	anync testFunction(){
    	{서버 서비스 작업}
        return response
    }
}

export const testService = new TestService();

😆  그렇다면 useTransition() 이란?

`useTransition`은 React 18에서 도입된 훅으로, 비동기 작업을 효율적으로 처리하고 UI의 응답성을 유지하는 데 도움이 됩니다. 이 훅을 사용하면 비동기 상태 업데이트를 "전환(transition)"으로 취급하여, React가 더 중요한 업데이트(예: 사용자 입력)를 우선 처리하고 덜 중요한 업데이트(예: 데이터 가져오기)를 나중에 처리할 수 있습니다.

- **`useTransition` 사용**: UI의 응답성을 유지하면서 비동기 작업을 처리할 때 유용합니다. 중요한 작업과 덜 중요한 작업을 구분하여 처리할 수 있습니다.
- **`useTransition` 미사용**: 간단한 비동기 작업에는 적합하지만, 복잡한 비동기 작업에서는 UI의 응답성이 떨어질 수 있습니다.

두 방법 모두 특정 상황에 따라 유용할 수 있으며, 애플리케이션의 요구사항과 복잡성에 따라 적절한 방법을 선택하는 것이 중요합니다.

 

// Client

const testFunction = async () => {
	try{
    	const response = await serverDataAction();
    }catch(e){
    	console.log(e)
    }
}


// useTransition 사용

const [transition, startTransiting] = useTransition()

const testFunction = async () => {
	startTransiting( () => {
            try{
                const response = await serverDataAction();
            }catch(e){
                console.log(e)
            }
    })       
}

 

 

💪 출처 및 도움주신분들

 

GPT