Next.js를 활용한 자바스크립트 SSR 구현 예제

16 Oct 2023

javascript

Next.js란?

Next.js는 자바스크립트 기반의 프론트엔드 서버 사이드 렌더링(SSR) 프레임워크입니다.

Next.js를 사용하면 React 기반의 웹 애플리케이션을 개발할 때 클라이언트와 서버 사이드의 코드를 한 번에 작성할 수 있습니다. 이를 통해 초기 로딩 속도를 향상시키고 SEO에 더욱 효과적인 웹 페이지를 제공할 수 있습니다.

SSR이란?

서버 사이드 렌더링(SSR)은 클라이언트에서 사용자에게 보여지는 콘텐츠를 서버에서 렌더링하여 전달하는 방식입니다.

일반적으로 클라이언트 사이드 렌더링(CSR)은 사용자가 페이지에 접속할 때 JavaScript를 로드한 후 클라이언트에서 콘텐츠를 렌더링합니다. 반면, SSR은 초기 로딩 시 서버에서 콘텐츠를 생성하여 클라이언트에게 제공합니다. 이를 통해 초기 로딩 속도를 개선하고 SEO에 더욱 유리한 환경을 제공할 수 있습니다.

Next.js로 자바스크립트 SSR 구현하기

Next.js를 사용하여 자바스크립트로 서버 사이드 렌더링을 구현하는 방법은 간단합니다. 다음은 간단한 예제 코드입니다.

import React from 'react';

export default function Home({ data }) {
  return (
    <div>
      <h1>Hello, Next.js SSR!</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // 서버에서 동적 데이터를 가져오는 로직
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

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

예제 코드에서 Home 컴포넌트는 data라는 프로퍼티를 받아와 화면에 렌더링합니다. getServerSideProps 함수는 서버에서 동적으로 데이터를 가져옵니다. 이렇게 구현된 코드는 Next.js가 서버 측에서 페이지를 미리 렌더링하고 클라이언트에게 전달합니다.

예제 코드

예제 코드를 실행하려면 다음 단계를 따르세요.

Next.js 프로젝트 생성하기: npx create-next-app my-app
예제 코드를 pages/index.js 파일에 복사합니다.
npm run dev 명령어를 사용하여 Next.js 앱을 실행합니다.

참고 자료

Next.js 공식 문서
Awesome Next.js: Next.js에 대한 추가 자료 및 예제 코드를 찾을 수 있는 레포지토리

#JavaScript #Next.js

목차

Next.js란?

SSR이란?

Next.js로 자바스크립트 SSR 구현하기

예제 코드

참고 자료