소개

Next.js는 오랫동안 서버 렌더링 React 애플리케이션 구축에 널리 사용되어 왔습니다. 서버 측 렌더링(SSR)에 대한 기본 지원을 통해 개발자는 동적이고 SEO 친화적인 애플리케이션을 만들 수 있습니다. 그러나 Next.js 13의 App Router 도입과 Next.js 14의 개선으로 SSR이 크게 단순화되고 향상되었습니다.

이 블로그 게시물에서는 기존 페이지 라우팅 시스템과 최신 앱 라우팅 시스템 간의 SSR 차이점을 살펴보고 SSR 작동 방식과 새로운 라우팅 패러다임에 따라 어떻게 변경되는지 강조하겠습니다.

페이지 라우팅의 SSR(Pre-Next.js 13)

앱 라우터가 도입되기 전에 SSR은 getServerSideProps와 같은 특정 기능을 사용하여 페이지 라우팅 시스템에서 처리되었습니다. 이 함수는 요청이 있을 때마다 호출되어 개발자가 페이지를 렌더링하기 전에 서버 측에서 데이터를 가져올 수 있도록 했습니다.

getServerSideProps를 사용하는 페이지 라우팅의 SSR 예:

export default function Blogs({ data }) {
  // Render the fetched data
  return (
    

      {data.map((item) => (
        

          
{item.title}
          
{item.content}
        
      ))}
    
  );
}

// This function runs on every request
export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/blogs');
  const data = await res.json();

  // Pass the data as props to the page component
  return { props: { data } };
}

여기서 getServerSideProps는 페이지 라우팅 시스템의 SSR에 대한 핵심입니다. 이를 통해 요청이 있을 때마다 API(또는 다른 데이터 소스)에서 데이터를 가져오고 이를 페이지 구성 요소에 소품으로 전달할 수 있습니다. 이 패턴은 강력하기는 하지만 많은 서버 측 로직과 다양한 경로를 처리할 때 코드베이스가 복잡해질 수 있습니다.

Next.js 14의 앱 라우팅 및 SSR

Next.js 14를 통해 SSR은 더욱 간소화되고 앱 라우팅 시스템에 통합되었습니다. 이 새로운 시스템에는 SSR이 훨씬 더 직관적인 서버 구성 요소와 클라이언트 구성 요소가 도입되었습니다.

앱 라우팅에서는 이제 getServerSideProps와 같은 특별한 기능 없이 구성 요소 내부의 데이터를 직접 가져올 수 있습니다. 코드를 더 간단하고 유지 관리하기 쉽게 만드는 서버 작업을 사용하면 이를 달성할 수 있습니다.

서버 구성 요소를 사용한 앱 라우팅의 SSR 예:

"use server";

export async function getBlogs() {
  try {
    const response = await fetch('https://api.example.com/posts');
    return response.json();
  } catch (error) {
    return { error: error.message };
  }
}

// This component runs on the server and fetches data
export default async function Blog() {
  const blogs = await getBlogs();

  return (
    

      {(blogs || []).map((blog) => (
        

          
{blog.name}
          
{blog.content}
        
      ))}
    
  );
}

이 앱 라우팅 예시에서는 서버 구성 요소를 사용하여 서버 사용을 통해 구성 요소 파일 내에서 직접 데이터를 가져옵니다. 이렇게 하면 getServerSideProps.

서버 작업의 힘
Next.js 14는 서버 작업을 도입하여 프로세스를 단순화합니다. 이러한 작업을 통해 구성 요소 파일 내에서 데이터를 직접 가져오고 처리할 수 있으므로 복잡성이 줄어들고 코드베이스의 유지 관리가 더욱 쉬워집니다.

서버 작업의 주요 이점:

클리너 코드: 서버측 로직을 별도의 파일이나 함수에 분산시키는 대신 모든 것을 한 곳에 보관할 수 있습니다.
향상된 유지 관리성: 움직이는 부품이 적다는 것은 관리해야 할 코드가 적다는 것을 의미하므로 애플리케이션을 더 쉽게 유지 관리할 수 있습니다.
더 나은 성능: 지능형 캐싱 메커니즘을 사용하면 최적의 성능을 위해 서버측 로직을 미세 조정할 수 있습니다.

Next.js의 수분 공급

Next.js 및 서버 측 렌더링(SSR)의 맥락에서 하이드레이션은 정적으로 렌더링된 HTML 페이지(서버에서 전송)가 브라우저에서 완전한 대화형 React 애플리케이션으로 변환되는 프로세스를 의미합니다. 페이지를 대화형으로 만들기 위해 React의 클라이언트 측 JavaScript로 정적 HTML을 "수화"합니다.

앱 라우팅과 페이지 라우팅의 수화

페이지 라우팅에서는 페이지의 모든 구성 요소에 하이드레이션이 필요하므로 클라이언트 측에서 대화형으로 만들 수 있습니다. 즉, 상호 작용에 필요한 모든 JavaScript가 클라이언트에 전달되어 애플리케이션이 확장됨에 따라 성능 병목 현상이 발생할 수 있습니다.

앱 라우팅에서는 서버 구성 요소를 사용하여 클라이언트 구성 요소(상호 작용을 처리하는 구성 요소)만 수화됩니다. 이러한 선택적 수화는 클라이언트에 전송되는 JavaScript의 양을 줄여 성능을 향상시킵니다.

앱 라우팅의 클라이언트 구성 요소 예:

'use client';  // Mark this as a client component

export default function Button() {
  return (
     alert('Button clicked!')}>Click Me
  );
}

여기서 Button 구성 요소는 'use client'를 사용하여 클라이언트 구성 요소로 표시됩니다. 이는 상호 작용을 허용하고 클라이언트 측에서 실행되는 반면, 다른 비대화형 구성 요소는 서버 구성 요소로 유지되어 성능을 향상시킵니다.

앱 라우팅의 수분 공급에 대한 자세한 내용

작동 방식은 다음과 같습니다.

서버 구성 요소로서의 상위 구성 요소:

상위 구성 요소(일반적으로 상위 수준 구성 요소 또는 전체 페이지 구성 요소)는 일반적으로 서버 구성 요소입니다. 서버에서 실행되며 데이터 가져오기, 정적 HTML 렌더링, 해당 데이터를 하위 구성 요소에 전달하는 등의 작업을 처리합니다.
이는 서버에서 렌더링되므로 클라이언트 측에 JavaScript가 포함되지 않으며 대화형이 아닙니다.

상호작용을 위한 클라이언트 구성요소:

상호작용(예: 버튼, 양식 등)을 처리하는 하위 구성 요소는 클라이언트 구성 요소입니다. 이러한 구성 요소는 React 후크(useState, useEffect 등)를 사용할 수 있으며 클라이언트 측에서 수화됩니다.
서버 구성 요소는 소품을 통해 이러한 클라이언트 구성 요소에 데이터를 전달합니다.
HTML이 브라우저에 로드되면 Next.js는 클라이언트 구성 요소를 수화하여 필요한 이벤트 리스너를 연결하고 페이지를 대화형으로 만듭니다.

// Server Component (Parent Component)
export default async function ParentComponent() {
  // Fetch data on the server
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    

      
This is Server-Side Rendered
      
  );
}

// Client Component (Child Component)
'use client';

import { useState } from 'react';

function ClientComponent({ data }) {
  const [count, setCount] = useState(0);

  return (
    

      
Data from server: {JSON.stringify(data)}
      
Client-side counter: {count}
       setCount(count   1)}>Increment
    
  );
}

결론

Next.js 14는 앱 라우터에 서버 작업을 도입하여 SSR(서버 측 렌더링)을 더욱 쉽고 강력하게 만듭니다. 개발자가 구성 요소 파일 내에서 직접 데이터를 가져올 수 있도록 함으로써 이 새로운 시스템은 서버 측 논리를 간소화하고 코드베이스를 단순화하며 별도의 API 경로에 대한 필요성을 줄입니다. 선택적 수화 기능과 결합된 Next.js 14의 SSR은 이제 더 빠르고 효율적이므로 매우 동적이고 SEO 친화적인 애플리케이션을 쉽게 구축할 수 있습니다.

이러한 서버 작업을 활용하면 코드를 깔끔하고 유지 관리 가능하게 유지하면서 앱 성능을 향상시킬 수 있습니다. 페이지 라우팅에서 서버 및 클라이언트 구성 요소를 사용한 앱 라우팅으로의 전환은 확장 가능한 웹 애플리케이션 구축에 있어서 큰 도약을 의미합니다.