13.Next.js와 Nest.js 연동하여 데이터 가져오기, Next.js에서 API 데이터 가져오는 방법 (getServerSideProps, SWR)

웹 애플리케이션 개발에 있어 서버 사이드 렌더링(SSR)과 API의 효율적인 사용은 매우 중요한 요소입니다.
Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링을 지원하면서
뛰어난 사용자 경험을 제공하는 강력한 도구입니다. 한편, Nest.js는
효율적이고 확장 가능하며 쉽게 테스트할 수 있는 Node.js 웹 애플리케이션 프레임워크로 RESTful API를 구축하는 데에 적합합니다.
본 강좌에서는 Next.js와 Nest.js를 연동하여 데이터를 가져오는 방법, 특히 getServerSideProps와 SWR을 사용하는 방법에 대해 자세히 알아보겠습니다.

1. Nest.js API 서버 설정하기

먼저, Nest.js로 간단한 API 서버를 설정해 보겠습니다. 새로운 Nest.js 프로젝트를 생성하기 위해 CLI를 사용할 수 있습니다.
설치가 되어 있지 않다면, 아래 명령어로 Nest CLI를 설치합니다. 

npm install -g @nestjs/cli

그 후, 새로운 Nest.js 프로젝트를 생성합니다. 

nest new blog-api

생성된 프로젝트 디렉토리로 이동하여 RESTful API를 구현하기 위해 새로운 모듈과 컨트롤러를 추가합니다: 

nest generate module posts
nest generate controller posts

다음으로, PostsController에 GET 요청을 처리하는 메서드를 추가하겠습니다. src/posts/posts.controller.ts 파일을 열어
다음과 같이 구현합니다. 


import { Controller, Get } from '@nestjs/common';

@Controller('posts')
export class PostsController {
    @Get()
    findAll() {
        return [
            { id: 1, title: '첫 번째 게시글', content: '이것은 첫 번째 게시글의 내용입니다.' },
            { id: 2, title: '두 번째 게시글', content: '이것은 두 번째 게시글의 내용입니다.' },
        ];
    }
}

이제 Nest.js 서버를 실행하여 API를 확인해 보겠습니다. 

npm run start

기본적으로 localhost:3000/posts에서 게시글을 불러올 수 있는 API가 준비되었습니다.

2. Next.js 설정하기

이제 Next.js 프로젝트를 생성하여 Nest.js API에서 데이터를 가져오는 방법을 알아보겠습니다.
새로운 Next.js 프로젝트를 생성하기 위해 아래 명령어를 사용합니다. 

npx create-next-app blog-client

프로젝트 디렉토리로 이동 후, 필요한 패키지를 설치합니다. 

cd blog-client
npm install swr

Next.js 페이지에서 API 데이터를 가져오는 두 가지 방법을 살펴보겠습니다: getServerSideProps와 SWR.

3. getServerSideProps를 이용한 데이터 가져오기

getServerSideProps는 Next.js에서 페이지가 요청될 때마다 서버에서 데이터를 가져오는 메서드입니다.
이 메서드는 페이지 컴포넌트의 프로퍼티에 데이터를 주입할 수 있게 해줍니다. 


export async function getServerSideProps() {
    const res = await fetch('http://localhost:3000/posts');
    const posts = await res.json();

    return {
        props: {
            posts,
        },
    };
}

위와 같은 방식으로 데이터를 가져온 후, 페이지에서 아래와 같이 사용할 수 있습니다. 


import React from 'react';

const PostsPage = ({ posts }) => {
    return (
        

            
게시글 목록

            
    
                {posts.map(post => (
                    
  • {post.title}
    • 
                ))}
            

        

    );
};

export default PostsPage;

이 코드는 Nest API로부터 가져온 게시글 목록을 렌더링합니다. getServerSideProps를 사용하는 경우,
페이지가 요청될 때마다 항상 최신 데이터를 가져옵니다.

4. SWR을 사용하여 데이터 가져오기

SWR은 데이터 패칭을 위한 React 훅으로, 다양한 데이터 요청을 캐싱하여 더 나은 성능과 사용자 경험을 제공합니다.
SWR은 클라이언트에서 데이터를 패칭할 때 주기적으로 데이터를 업데이트하고, 재검증하는 기능을 제공합니다. 


import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

const PostsPage = () => {
    const { data, error } = useSWR('http://localhost:3000/posts', fetcher);

    if (error) return 
에러 발생
;
    if (!data) return 
로딩 중...
;

    return (
        

            
게시글 목록

            
    
                {data.map(post => (
                    
  • {post.title}
    • 
                ))}
            

        

    );
};

export default PostsPage;

위 코드에서는 useSWR를 사용하여 데이터를 가져오고, 로딩 중일 때와 에러 발생 시의 상태를 처리합니다.
이렇게 하면 사용자에게 더 나은 경험을 제공할 수 있습니다.

5. 결론

본 강좌에서는 Nest.js로 API 서버를 구축하고, Next.js에서 getServerSideProps와 SWR을 통해 API 데이터를 가져오는 방법을 살펴보았습니다.
Nest.js와 Next.js를 조합하여 웹 애플리케이션을 효율적으로 개발하는 방법에 대해 알아보았으며, 각각의 방법이 가지는 특성과 사용 사례를 이해할 수 있었습니다.
이러한 기술들은 웹 애플리케이션의 성능과 사용자 경험을 획기적으로 개선하는 데에 기여할 수 있습니다.

이를 통해 원하는 데이터 패칭 방식과 사용자 경험을 고려하여 적절한 방법을 선택하면 좋을 것입니다.
Next.js와 Nest.js의 조합은 개발자에게 강력한 도구가 되어 주며, 더 나은 웹 애플리케이션을 만들기 위한 기반이 될 것입니다.