Next.js로 서버사이드 렌더링 구현하기

byCode Keeper •


Next.js로 서버사이드 렌더링 구현하기


Next.js는 리액트(React) 기반의 프레임워크로, 서버사이드 렌더링(SSR)을 쉽게 구현할 수 있도록 도와줍니다. 서버사이드 렌더링은 클라이언트에서 처리되는 기존의 SPA(Single Page Application) 방식과 달리, 서버에서 페이지를 렌더링하여 클라이언트로 전달하는 방식입니다. 이를 통해 초기 로딩 속도를 개선하고, SEO 성능을 향상시킬 수 있습니다. 이 포스팅에서는 Next.js를 사용하여 서버사이드 렌더링을 구현하는 방법에 대해 자세히 설명하겠습니다.


서버사이드 렌더링의 중요성


서버사이드 렌더링은 다음과 같은 이점을 제공합니다:


  • 빠른 초기 로딩 속도: 서버에서 미리 렌더링된 HTML을 전달하기 때문에 초기 로딩 속도가 빠릅니다.
  • SEO 개선: 검색 엔진이 쉽게 인덱싱할 수 있는 HTML을 제공하여 SEO 성능을 향상시킵니다.
  • 사용자 경험 향상: 초기 로딩 시 사용자에게 완전한 페이지를 제공하여 더 나은 사용자 경험을 제공합니다.

Next.js 설치 및 설정


Next.js를 사용하여 서버사이드 렌더링을 구현하기 위해 먼저 Next.js 프로젝트를 설정해야 합니다.


프로젝트 생성


다음 명령어를 사용하여 새로운 Next.js 프로젝트를 생성합니다.


npx create-next-app my-next-app
cd my-next-app

프로젝트 구조


Next.js 프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-next-app/
├── pages/
│   ├── _app.js
│   ├── index.js
│   └── api/
├── public/
├── styles/
├── package.json
└── next.config.js

  • pages 디렉토리: 각 페이지 컴포넌트를 정의합니다.
  • public 디렉토리: 정적 파일을 저장합니다.
  • styles 디렉토리: CSS 파일을 저장합니다.
  • next.config.js 파일: Next.js 설정 파일입니다.

서버사이드 렌더링 구현


Next.js에서 서버사이드 렌더링을 구현하기 위해서는 getServerSideProps 함수를 사용합니다. 이 함수는 페이지가 요청될 때마다 서버에서 실행되며, 데이터를 받아와 페이지 컴포넌트에 전달합니다.


기본 페이지 설정


먼저, 기본 페이지를 설정해 보겠습니다. pages/index.js 파일을 생성하고 다음과 같이 작성합니다.


import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>서버사이드 렌더링 예제</h1>
      <p>{data}</p>
    </div>
  );
};

export const getServerSideProps = async () => {
  // 서버에서 데이터를 가져옵니다.
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
};

export default Home;

위 코드에서 getServerSideProps 함수는 서버에서 데이터를 가져와 Home 컴포넌트의 props로 전달합니다.


API 경로 설정


Next.js는 API 경로를 설정하여 서버에서 데이터를 제공할 수 있습니다. pages/api/data.js 파일을 생성하고 다음과 같이 작성합니다.


export default (req, res) => {
  res.status(200).json({ message: 'Hello from API' });
};

이제 https://api.example.com/data 대신 로컬 API 경로 http://localhost:3000/api/data를 사용할 수 있습니다.


import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>서버사이드 렌더링 예제</h1>
      <p>{data.message}</p>
    </div>
  );
};

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

  return {
    props: {
      data,
    },
  };
};

export default Home;

이제 로컬 서버에서 데이터를 받아와 렌더링할 수 있습니다.


동적 페이지 처리


Next.js에서는 동적 라우팅을 통해 다양한 페이지를 생성할 수 있습니다. 이를 위해 [id].js와 같은 파일명을 사용합니다.


동적 페이지 예제


pages/posts/[id].js 파일을 생성하고 다음과 같이 작성합니다.


import React from 'react';

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export const getServerSideProps = async (context) => {
  const { id } = context.params;
  const res = await fetch(`http://localhost:3000/api/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
};

export default Post;

이제 http://localhost:3000/posts/1, http://localhost:3000/posts/2와 같은 URL로 접근하면 동적으로 데이터를 받아와 페이지를 렌더링할 수 있습니다.


성능 최적화


Next.js는 기본적으로 성능 최적화가 잘 되어 있지만, 추가적인 설정을 통해 더욱 향상시킬 수 있습니다.


이미지 최적화


Next.js는 next/image 컴포넌트를 사용하여 이미지 최적화를 지원합니다.


import Image from 'next/image';

const MyImage = () => (
  <Image
    src="/path/to/image.jpg"
    alt="My Image"
    width={500}
    height={500}
  />
);

export default MyImage;

코드 분할


Next.js는 페이지 단위로 코드를 분할하여 필요한 코드만 로드합니다. 이를 통해 초기 로딩 속도를 개선할 수 있습니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Next.js를 사용하여 서버사이드 렌더링을 구현하는 방법에 대해 살펴보았습니다. Next.js는 서버사이드 렌더링을 쉽게 구현할 수 있는 다양한 기능을 제공하며, 이를 통해 초기 로딩 속도와 SEO 성능을 크게 향상시킬 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전