next.js와 Apollo GraphQL을 이용한 웹 서비스 개발하기(1)

next.js는 SSR(Server Side Rendering)을 지원하는 React 프레임워크입니다.

CSR(Client Side Rendering)의 단점인 초기 로딩속도와 검색엔진 최적화(Serch Engine Optimization)를 극복하기 위해 초기 렌더링만 서버가 담당하고 이후 수정사항은 클라이언트에서 렌더링하도록 구성되어있습니다.

이번 포스팅은 next.js와 apollo-graphql을 이용하여 한 프로젝트에서 클라이언트 로직과 서버 로직을 함께 구현해보도록 하겠습니다.

먼저 next앱을 생성하기 위해 npm을 이용해 새 프로젝트를 생성합니다.

$ npm init next-app next-apollo-tutorial

명령어를 실행하면 다음과 같이 템플릿을 설정할지 물어봅니다. Default starter app을 선택하고 하나하나 처음부터 셋업해나가도록 하겠습니다.

설치가 완료된 프로젝트의 구조는 다음과 같습니다. nextjs는 pages directory안에 있는 파일들이 각 페이지가 됩니다.

$ yarn dev

명령어를 이용해 개발서버를 실행실 수 있으며, http://localhost:3000 경로로 접속하게 되면 pages/index.js 파일의 내용대로

localhost:3000

다음과 같은 페이지가 나타납니다.

pages directory를 보면 내부에는 index.js파일 외에 api/hello.js파일이 존재합니다. 이 파일에는

다음과 같이 name 키값을 가진 json데이터를 status code 200과 함께 반환하도록 작성되어있습니다.

해당 코드가 잘 동작하는지를 확인해보기 위해 index.js파일에서 해당 api를 호출해보고 결과가 잘 반환되는지 확인해보겠습니다.

// index.js
export default function Home() {
  ( async () => {
    const response = await fetch( '/api/hello' );
    const json = await response.json()
    console.log( json );
  })();
...

Console

브라우저 Console창에서 확인해보니 결과가 잘 반환됩니다. 앞으로 우리는 ‘api/hello’ API처럼 api directory 안에 apollo-server 로직을 구현하면 될 것 같습니다.

먼저 백엔드 코드를 작성해보겠습니다. apollo-server-micro를 설치합니다.

$ yarn add apollo-server-micro

pages/api directory에 graphql.js 파일을 생성하고 graphql 로직을 작성합니다.

users Query를 호출하면 ‘Nextjs’라는 이름을 가진 json객체를 가진 배열을 반환합니다. 이번에는 클라이언트 코드를 작성합니다.

graphql.js파일에서 정의한대로 api/graphql 경로에 graphql query를 작성해 요청합니다.

Console

브라우저 콘솔창에서 결과를 확인해보면 다음과 같이 데이터가 성공적으로 반환되는것을 확인 할 수 있습니다.

Github Source Code

이렇게 nextjs서버를 구축하고 apollo-graphql을 통해 graphql 방식으로 데이터를 서버에서 전달받도록 기본적인 환경을 구성해보았습니다. 아직까지는 정적으로 화면을 그려주고 graphql로도 단일한 데이터를 전달받고 있습니다.

다음시간에는 routing된 페이지에 따라 arguments값을 통해 데이터를 필터링하여 전달받아 동적으로 화면을 렌더링해보도록 하겠습니다.

Refs.

[nextjs] nextjs는 어떻게 동작하는가?

NAVER D2

CSR, SSR