12. ISR (점진적 정적 재생성) – ISR의 개념과 Next.js에서의 활용

 웹사이트를 개발하면서 중요한 문제 중 하나는 데이터가 변경되었을 때 빠르게 반영할 수 있는 방법입니다. **ISR(Incremental Static Regeneration)**은 이러한 문제를 해결해주는 Next.js의 강력한 기능입니다. 이번 글에서는 ISR의 개념과 이를 Next.js에서 어떻게 활용할 수 있는지에 대해 설명하겠습니다.

1. ISR(점진적 정적 재생성)란?

ISR은 **정적 사이트 생성(SSG)**의 장점과 **서버 사이드 렌더링(SSR)**의 장점을 결합한 방식입니다. SSG에서는 페이지를 빌드 시점에 미리 생성하지만, 데이터가 변경되었을 때 다시 빌드를 해야 하는 단점이 있습니다. 반면 ISR은 이미 생성된 정적 페이지를 필요에 따라 점진적으로 재생성하여 최신 상태를 유지할 수 있도록 합니다.

이 방식은 데이터가 자주 변경되지 않는 페이지는 정적으로 제공하고, 변화가 잦은 데이터는 주기적으로 갱신하여 효율성을 극대화합니다.

2. Next.js에서 ISR 활용하기

Next.js에서는 ISR을 revalidate 옵션을 사용하여 쉽게 구현할 수 있습니다. 이 옵션은 페이지가 특정 시간 간격마다 자동으로 재생성되도록 설정할 수 있습니다. getStaticProps 함수 내에서 revalidate를 설정하면 됩니다.

예시: ISR 구현하기

// pages/posts/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 10, // 10초마다 페이지를 재생성
  };
}

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: 'blocking' };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

위 코드에서 revalidate: 10 옵션을 설정하면, 해당 페이지는 10초마다 재생성됩니다. 즉, 페이지 요청 시 최신 데이터가 반영될 수 있습니다. 이와 같은 방식으로 자동으로 갱신되는 페이지를 제공할 수 있습니다.

3. ISR의 장점

ISR은 여러 가지 장점을 제공합니다. 그 중 가장 큰 장점은 성능 최적화와 데이터 갱신을 동시에 해결할 수 있다는 점입니다.

1. 빠른 페이지 로딩: ISR을 사용하면 초기 페이지는 정적으로 빠르게 로딩되며, 변경된 내용만 재생성하여 최적화된 성능을 제공합니다.
2. 데이터 최신성 유지: revalidate 값을 설정하면, 데이터를 주기적으로 갱신할 수 있어 최신 상태의 정보를 제공할 수 있습니다.
3. 서버 부하 절감: 전체 페이지를 매번 서버에서 렌더링하지 않고, 필요한 페이지만 점진적으로 갱신하므로 서버 부하를 줄일 수 있습니다.

4. ISR과 SSG, SSR의 차이점

• SSG (Static Site Generation): 페이지를 빌드 시점에 미리 생성하고, 이후에는 변경되지 않음.
• SSR (Server Side Rendering): 페이지를 요청할 때마다 서버에서 렌더링하여 최신 데이터를 제공.
• ISR (Incremental Static Regeneration): SSG와 SSR의 장점을 결합하여, 정적 페이지를 필요에 따라 재생성하여 최신 데이터를 제공합니다.

5. 결론

ISR은 Next.js의 유용한 기능으로, 정적 사이트 생성의 장점은 그대로 유지하면서, 변경된 데이터를 주기적으로 갱신할 수 있는 기능입니다. 이를 통해 웹사이트의 성능을 최적화하고, 최신 데이터를 제공할 수 있습니다. 데이터가 자주 변경되지 않는 페이지에서는 SSG를, 자주 업데이트되는 페이지에서는 ISR을 활용하여 최적의 성능을 얻을 수 있습니다.

10. SSR (서버 사이드 렌더링) – 서버 사이드 렌더링의 개념과 Next.js에서의 구현

 웹 애플리케이션을 개발할 때, 페이지가 어떻게 렌더링되는지가 성능과 사용자 경험에 큰 영향을 미칩니다. 그 중 하나가 **서버 사이드 렌더링(SSR)**입니다. 이번 글에서는 서버 사이드 렌더링의 개념과 Next.js에서 이를 어떻게 구현할 수 있는지에 대해 설명드리겠습니다.

1. 서버 사이드 렌더링(SSR) 개념

**서버 사이드 렌더링(SSR)**은 웹 페이지의 HTML을 서버에서 미리 렌더링한 후, 클라이언트에 전송하는 방식입니다. 클라이언트는 서버에서 받은 완성된 HTML을 바로 화면에 표시하므로, 초기 로딩 시간이 짧고 SEO 최적화에 유리합니다. 이는 **클라이언트 사이드 렌더링(CSR)**과 반대되는 개념으로, CSR은 클라이언트에서 JavaScript를 실행하여 렌더링을 처리하는 방식입니다.

2. SSR의 장점

SSR의 가장 큰 장점은 초기 로딩 속도입니다. 서버에서 렌더링된 HTML을 클라이언트로 전송하기 때문에, 클라이언트는 HTML을 빠르게 받아 화면에 표시할 수 있습니다. 이로 인해 첫 번째 페이지 로딩 속도가 빨라지며, 검색 엔진 최적화(SEO)에도 유리합니다. 검색 엔진은 페이지의 내용이 서버에서 미리 렌더링된 HTML로 제공되므로, 더 잘 인식할 수 있습니다.

또한, SSR을 사용하면 클라이언트의 자원 소모를 줄일 수 있습니다. 클라이언트에서 JavaScript를 실행할 필요가 없기 때문에, 더 적은 리소스를 사용하고, 느린 네트워크 환경에서도 더 나은 성능을 발휘할 수 있습니다.

3. Next.js에서 SSR 구현하기

Next.js는 서버 사이드 렌더링을 간단하게 구현할 수 있는 기능을 제공합니다. Next.js의 페이지는 기본적으로 SSR 방식으로 동작하며, getServerSideProps 함수만 사용하면 됩니다. 이 함수는 서버에서 페이지를 렌더링하기 전에 데이터를 가져오는 데 사용됩니다.

예시: SSR 페이지 만들기

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 이 데이터는 페이지 컴포넌트의 props로 전달됩니다.
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>SSR Example</h1>
      <p>Data fetched from the server: {data}</p>
    </div>
  );
}

위 코드에서 getServerSideProps 함수는 페이지가 요청될 때마다 서버에서 데이터를 가져옵니다. 이 데이터는 Home 컴포넌트에 props로 전달되며, 서버에서 미리 렌더링된 HTML이 클라이언트에 전송됩니다.

4. getServerSideProps 함수 설명

getServerSideProps는 서버에서 실행되는 함수로, 페이지가 요청될 때마다 실행됩니다. 이 함수는 비동기적으로 데이터를 처리할 수 있으며, 데이터를 준비한 후 props 형태로 반환합니다. 이 데이터는 컴포넌트가 렌더링될 때 사용됩니다.

• 비동기 데이터 처리: getServerSideProps 함수 내에서는 API 호출, 데이터베이스 쿼리 등 서버 측에서의 데이터 처리 작업을 할 수 있습니다.
• SEO 최적화: 이 방식은 서버에서 미리 렌더링된 HTML을 클라이언트로 보내기 때문에, 검색 엔진이 페이지 내용을 쉽게 크롤링할 수 있어 SEO에 유리합니다.
• 
  

5. SSR vs CSR (클라이언트 사이드 렌더링)

SSR은 서버에서 페이지를 미리 렌더링한 후 클라이언트에 전달하는 방식이고, CSR은 클라이언트에서 JavaScript를 실행하여 페이지를 렌더링하는 방식입니다. 두 방식은 각각 장단점이 있습니다.

• SSR: 초기 로딩 속도가 빠르고, SEO에 유리합니다. 서버에서 데이터를 처리한 후 렌더링된 HTML을 클라이언트에 전달합니다.
• CSR: 초기 로딩은 느리지만, 페이지가 전환될 때 빠르고, 클라이언트 측에서 동적인 페이지 업데이트가 가능합니다.

Next.js는 SSR과 CSR을 모두 지원하기 때문에, 개발자는 필요에 따라 적합한 방식을 선택할 수 있습니다.

6. 결론

Next.js에서 SSR을 활용하면, SEO 최적화와 초기 로딩 속도 개선, 클라이언트의 리소스 절약 등의 장점을 누릴 수 있습니다. getServerSideProps를 사용하면 데이터를 서버에서 미리 처리하고 렌더링된 HTML을 클라이언트로 전송할 수 있어, 더 빠르고 효율적인 웹 애플리케이션을 만들 수 있습니다. 이를 통해 성능 향상과 SEO 최적화를 동시에 이룰 수 있습니다.

19 Next.js와 React의 차이점: SSR과 CSR 비교 및 Next.js에서 페이지 만들기

 Next.js와 React는 자주 함께 언급되는 프레임워크입니다. 둘은 서로 밀접하게 관련이 있지만, 그 특성과 사용 방식에서는 몇 가지 중요한 차이점이 존재합니다. 이 글에서는 Next.js와 React의 차이점을 설명하고, **SSR(서버 사이드 렌더링)**과 **CSR(클라이언트 사이드 렌더링)**의 개념을 비교한 후, Next.js에서 페이지 만들기 방법을 다뤄보겠습니다. 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

1. React와 Next.js의 차이점

React는 UI를 구축하기 위한 라이브러리로, 클라이언트 사이드에서 컴포넌트 기반으로 동작합니다. React만으로는 페이지 렌더링 방식이나 서버와의 데이터 통신 방식에 대한 구조를 정의하지 않습니다. 즉, 개발자가 직접 라우팅과 데이터 관리를 설정해야 합니다.

반면, Next.js는 React를 기반으로 한 프레임워크입니다. Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등 다양한 기능을 기본적으로 제공하며, 이러한 기능을 통해 SEO 최적화와 페이지 로딩 속도 개선을 지원합니다. Next.js는 React의 복잡도를 줄여주는 역할을 하며, React에서 할 수 있는 모든 작업을 할 수 있습니다.

2. SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링) 비교

**SSR(서버 사이드 렌더링)**과 **CSR(클라이언트 사이드 렌더링)**은 웹 애플리케이션에서 데이터를 처리하고 페이지를 렌더링하는 두 가지 주요 방식입니다.

a. 서버 사이드 렌더링(SSR)

SSR은 요청이 들어오면 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식입니다. 이렇게 하면 검색 엔진이 쉽게 콘텐츠를 인덱싱할 수 있고, 페이지 로딩 속도가 빠릅니다. Next.js는 기본적으로 SSR을 지원하여, 초기 페이지 로딩 시 빠르게 콘텐츠를 렌더링할 수 있습니다.

SSR의 장점:

• 검색 엔진 최적화(SEO)에 유리합니다.
• 사용자에게 빠른 첫 페이지 로딩을 제공합니다.

SSR의 단점:

• 서버에 부하가 증가할 수 있습니다.
• 동적 콘텐츠의 경우 렌더링 시간이 길어질 수 있습니다.

b. 클라이언트 사이드 렌더링(CSR)

CSR은 초기 HTML을 서버에서 전송한 뒤, 이후의 렌더링과 데이터 처리 등을 클라이언트에서 처리하는 방식입니다. React는 기본적으로 CSR을 사용하며, 페이지가 처음 로드될 때 JavaScript가 실행되어 컴포넌트를 렌더링합니다.

CSR의 장점:

• 서버 부하가 적고, 클라이언트에서 렌더링이 이루어집니다.
• 동적인 페이지 렌더링에 유리합니다.

CSR의 단점:

• SEO에 불리합니다.
• 첫 페이지 로딩 시간이 길어질 수 있습니다.

3. Next.js에서 페이지 만들기

Next.js에서는 페이지를 만들 때, pages 디렉토리에 파일 기반 라우팅을 사용합니다. 예를 들어, pages/index.js 파일은 기본 홈 페이지가 되고, pages/about.js는 /about 경로로 연결됩니다. Next.js는 이와 같은 구조를 통해 개발자가 직접 라우팅을 관리할 필요 없이 파일 구조만으로 페이지를 자동으로 라우팅합니다.

a. Next.js에서 페이지 만들기 기본 예시

1. Next.js 프로젝트 생성

   
   npx create-next-app@latest my-next-app
   cd my-next-app
   npm run dev
   

2. pages/index.js 페이지 만들기

   
   // pages/index.js
   import React from 'react';
   
   const HomePage = () => {
     return (
       <div>
         <h1>Welcome to Next.js!</h1>
       </div>
     );
   };
   
   export default HomePage;
   

3. pages/about.js 페이지 만들기

   
   // pages/about.js
   import React from 'react';
   
   const AboutPage = () => {
     return (
       <div>
         <h1>About Next.js</h1>
         <p>This is an example of a Next.js application.</p>
       </div>
     );
   };
   
   export default AboutPage;
   

위와 같이 Next.js에서는 파일 이름에 맞춰 자동으로 라우팅이 이루어지므로, 라우터 설정을 별도로 할 필요 없이 파일만 추가하면 됩니다.

4. Next.js에서 SSR(서버 사이드 렌더링) 사용하기

Next.js에서 **서버 사이드 렌더링(SSR)**을 적용하려면, getServerSideProps 함수를 사용하여 서버에서 데이터를 가져오고 페이지를 렌더링할 수 있습니다.

a. getServerSideProps 사용 예시

// pages/index.js
import React from 'react';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>Data fetched from server: {data}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // 서버에서 데이터를 가져오는 예시
  const data = 'This is server-side data';

  return {
    props: { data },
  };
}

export default HomePage;

위 예시에서는 SSR을 사용하여 서버에서 데이터를 가져오고, 이를 HomePage 컴포넌트에 전달합니다. 이렇게 하면 페이지가 서버에서 렌더링되고, 클라이언트는 이미 렌더링된 HTML을 받아보게 됩니다.

5. 결론

Next.js와 React는 서로 밀접하게 연관되어 있지만, 그 사용 방식과 렌더링 방식에서 중요한 차이점이 있습니다. Next.js는 SSR을 기본적으로 지원하여 SEO 최적화와 빠른 첫 페이지 로딩을 도와줍니다. 반면, React는 클라이언트 사이드 렌더링을 기반으로 동적인 애플리케이션에 유리합니다. Next.js는 React의 장점을 유지하면서, SSR, SSG, API 라우팅 등을 추가로 지원하여 개발 생산성을 높입니다.

이 글을 통해 Next.js와 React의 차이점과 SSR, CSR의 개념을 이해하고, Next.js에서 페이지 만들기를 실습할 수 있었습니다. Next.js를 활용하면 SEO 최적화와 빠른 페이지 로딩을 구현할 수 있어, 더 나은 사용자 경험을 제공할 수 있습니다.