현대 웹 프레임워크의 렌더링 전략 이해하기

동적인 웹 경험 구축

빠르게 발전하는 웹 개발 환경에서 빠르고 상호작용하며 SEO 친화적인 사용자 경험을 제공하는 것이 가장 중요합니다. 전통적인 단일 페이지 애플리케이션(SPA)이 상호작용성을 혁신했지만, 초기 로드 시간과 검색 엔진 최적화에 대한 어려움에 직면하는 경우가 많았습니다. Next.js 및 Nuxt.js와 같은 현대적인 풀스택 프레임워크는 다양한 렌더링 전략을 제공하여 이러한 문제를 해결하기 위해 등장했습니다. 클라이언트 측 렌더링(CSR), 서버 측 렌더링(SSR), 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR)을 포함한 이러한 전략을 이해하는 것은 성능, 확장성 및 사용자 만족도에 큰 영향을 미치는 정보에 입각한 아키텍처 결정을 내리는 데 중요합니다. 이 글에서는 Next.js 및 Nuxt.js의 맥락에서 각 렌더링 접근 방식의 복잡성을 깊이 파고들어 실제 예제와 선택을 위한 포괄적인 가이드를 제공합니다.

핵심 렌더링 용어 설명

각 렌더링 전략의 세부 사항을 살펴보기 전에 몇 가지 주요 용어에 대한 공통적인 이해를 확립해 보겠습니다.

• 클라이언트 측 렌더링 (CSR): 브라우저는 일반적으로 루트 div만 포함하는 최소한의 HTML 파일을 받아 JavaScript 번들을 가져옵니다. 그런 다음 JavaScript가 데이터를 가져오고, DOM을 구축하고, 사용자 브라우저에서 직접 콘텐츠를 렌더링하는 작업을 수행합니다.
• 서버 측 렌더링 (SSR): 서버는 페이지에 대한 요청을 처리하고, 필요한 데이터를 가져오고, 해당 페이지에 대한 전체 HTML 콘텐츠를 렌더링한 다음, 이 사전 렌더링된 HTML을 브라우저로 보냅니다. 브라우저가 HTML을 받으면 JavaScript가 종종 페이지를 "수화"하여 상호작용 가능하게 만듭니다.
• 정적 사이트 생성 (SSG): 페이지는 빌드 시점에 정적 HTML, CSS 및 JavaScript 파일로 사전 렌더링됩니다. 그런 다음 이러한 사전 빌드된 파일을 CDN에서 제공할 수 있어 극도의 속도와 확장성을 제공합니다.
• 점진적 정적 재생성 (ISR): SSG를 개별 페이지에 사용할 수 있지만 배포 후에 전체 사이트 재구축 없이 백그라운드에서 업데이트할 수 있게 하는 하이브리드 접근 방식입니다. 이는 SSG의 성능 이점과 최신 데이터를 표시하는 기능을 결합합니다.
• 수화 (Hydration): 클라이언트 측의 JavaScript가 서버에서 사전 렌더링되거나 빌드 시점에 생성된 콘텐츠를 인수하여 이벤트 리스너를 연결하고 페이지를 상호작용 가능하게 만드는 프로세스입니다.

클라이언트 측 렌더링 (CSR)

작동 방식: CSR 애플리케이션에서 초기 서버 요청은 일반적으로 JavaScript 번들에 대한 링크를 주로 포함하는 기본적인 index.html 파일을 반환합니다. 그런 다음 브라우저는 이러한 JavaScript 파일을 다운로드하며, 이 파일은 API에서 데이터를 가져오고 DOM을 생성하고 사용자 인터페이스를 사용자 브라우저 내에서 직접 렌더링하는 역할을 담당합니다. 모든 후속 라우트 변경 및 데이터 가져오기 또한 전체 페이지 새로 고침 없이 클라이언트 측에서 발생합니다.

구현 (Next.js): 기본적으로 Next.js의 페이지는 사전 렌더링됩니다(SSR 또는 SSG). CSR을 특정 컴포넌트나 페이지에 명시적으로 사용하려면 next/dynamic으로 컴포넌트를 동적으로 가져오고 SSR을 비활성화합니다. 데이터 가져오기를 위해서는 useEffect 훅 또는 유사한 클라이언트 측 라이프사이클 메서드 내에서 이를 수행합니다.

// components/ClientSideComponent.js
import React, { useState, useEffect } from 'react';

const ClientSideComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch('/api/some-data');
        const json = await res.json();
        setData(json);
      } catch (error) {
        console.error("Failed to fetch data:", error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <div>Loading data...</div>;
  if (!data) return <div>No data found.</div>;

  return (
    <div>
      <h1>Client-Side Rendered Content</h1>
      <p>Data: {data.message}</p>
    </div>
  );
};

export default ClientSideComponent;

// pages/client-page.js
import dynamic from 'next/dynamic';

const ClientSideComponent = dynamic(() => import('../components/ClientSideComponent'), {
  ssr: false, // This ensures the component is only rendered on the client
});

export default function ClientPage() {
  return (
    <div>
      <p>This part is pre-rendered.</p>
      <ClientSideComponent />
      <p>This part is also pre-rendered.</p>
    </div>
  );
}

구현 (Nuxt.js): Nuxt.js에서 CSR은 구성 요소 내에서 asyncData 또는 fetch와 같은 서버 측 데이터 가져오기 메서드를 사용하지 않고 라우트 또는 전역적으로 SSR을 비활성화하는 경우 기본 동작입니다. 일반적으로 mounted() 또는 onMounted() (Composition API) 내에서 데이터를 가져옵니다.

<!-- pages/client-page.vue -->
<template>
  <div>
    <h1>Client-Side Rendered Content</h1>
    <p v-if="loading">Loading data...</p>
    <p v-else-if="!data">No data found.</p>
    <p v-else>Data: {{ data.message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const data = ref(null);
const loading = ref(true);

onMounted(async () => {
  try {
    const res = await fetch('/api/some-data'); // Assuming you have a Nuxt API route or external API
    const json = await res.json();
    data.value = json;
  } catch (error) {
    console.error("Failed to fetch data:", error);
  } finally {
    loading.value = false;
  }
});
</script>

사용 사례: 매우 상호작용적인 대시보드, 관리자 패널, SEO가 중요하지 않은 애플리케이션, 사용자 인증이 즉시 발생하는 경우.

장점: 풍부한 사용자 인터페이스에 탁월, 후속 페이지 로딩 속도 향상, 서버 부하 감소. 단점: SEO 취약, 초기 로드 속도 저하 (흰 화면 현상), JavaScript가 비활성화된 사용자는 아무것도 볼 수 없음.

서버 측 렌더링 (SSR)

작동 방식: SSR을 사용하면 서버가 페이지에 대한 요청을 받고, 해당 페이지에 필요한 모든 데이터를 가져오고, 서버에서 전체 HTML 콘텐츠를 렌더링한 다음, 이 완전한 HTML 응답을 브라우저로 보냅니다. 브라우저는 거의 즉시 콘텐츠를 표시할 수 있습니다. JavaScript 번들이 로드되면 사전 렌더링된 HTML을 "수화"하여 페이지를 상호작용 가능하게 만듭니다.

구현 (Next.js): Next.js는 SSR을 위해 getServerSideProps를 제공합니다. 이 함수는 각 요청 시 서버에서 실행되며 페이지 컴포넌트에 전달되는 props를 반환합니다.

// pages/ssr-page.js
function SsrPage({ data }) {
  return (
    <div>
      <h1>Server-Side Rendered Content</h1>
      <p>Message from server: {data.message}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  // This runs on the server for every request
  const res = await fetch('https://api.example.com/data'); // Replace with your API
  const data = await res.json();

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

export default SsrPage;

구현 (Nuxt.js): Nuxt.js는 페이지 컴포넌트가 렌더링되기 전에 서버 측에서 데이터 가져오기를 수행하기 위해 asyncData (Options API) 또는 useAsyncData (Composition API)를 사용합니다.

<!-- pages/ssr-page.vue -->
<template>
  <div>
    <h1>Server-Side Rendered Content</h1>
    <p>Message from server: {{ data.message }}</p>
  </div>
</template>

<script setup>
import { useAsyncData } from '#app';

const { data } = await useAsyncData('myData', async () => {
  const res = await fetch('https://api.example.com/data'); // Replace with your API
  return res.json();
});
</script>

사용 사례: SEO 및 빠른 초기 콘텐츠 표시가 중요하고 데이터가 자주 변경되는 전자 상거래 사이트, 뉴스 포털, 블로그 또는 모든 애플리케이션.

장점: 뛰어난 SEO, 빠른 인지 로드 시간, 동적 콘텐츠에 적합. 단점: 서버 부하 증가, 정적 콘텐츠의 경우 SSG보다 느릴 수 있음, 수화가 발생하는 동안 인터랙티브까지의 시간(TTI)이 여전히 문제가 될 수 있음.

정적 사이트 생성 (SSG)

작동 방식: SSG를 사용하면 페이지는 배포 전 빌드 프로세스 중에 정적 HTML, CSS 및 JavaScript 파일로 렌더링됩니다. 그런 다음 이러한 사전 빌드된 파일을 CDN에서 직접 제공하여 번개처럼 빠른 전달을 제공합니다. 파일이 제공된 후 JavaScript는 상호작용성을 위해 페이지를 수화합니다.

구현 (Next.js): Next.js는 빌드 시점에 데이터 가져오기를 위해 getStaticProps를, 목록에서 동적 라우트를 생성하기 위해 getStaticPaths를 제공합니다.

// pages/posts/[id].js
function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  // Pass post data to the page via props
  return { props: { post } };
}

export default Post;

구현 (Nuxt.js): Nuxt.js는 SSG를 위해 generate 모드를 사용합니다. nuxt.config.js의 generate 속성을 사용하여 사전 렌더링할 라우트를 구성하고 asyncData 또는 fetch를 사용하여 빌드 시점에 데이터를 가져옵니다.

<!-- pages/posts/[id].vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { useAsyncData } from '#app';

const route = useRoute();
const postId = route.params.id;

const { data: post } = await useAsyncData(`post-${postId}`, async () => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
  return res.json();
});
</script>

<!-- nuxt.config.js -->
export default defineNuxtConfig({
  // ...
  generate: {
    routes: async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await res.json();
      return posts.map(post => `/posts/${post.id}`);
    }
  }
})

사용 사례: 콘텐츠 변경이 드문 마케팅 웹사이트, 블로그, 설명서 사이트, 랜딩 페이지.

장점: 타의 추종을 불허하는 성능(CDN에서 직접 제공), 뛰어난 SEO, 높은 확장성, 서버 비용 절감. 단점: 콘텐츠 변경 시마다 다시 빌드 필요, 매우 동적인 사용자별 콘텐츠에는 적합하지 않음.

점진적 정적 재생성 (ISR)

작동 방식: ISR은 Next.js에서 사용할 수 있는 SSG의 강력한 진화입니다. 사이트를 정적 자산으로 빌드하고 배포할 수 있지만, 전체 사이트를 재구축할 필요 없이 정기적으로 또는 필요에 따라 개별 페이지를 백그라운드에서 다시 검증하고 다시 렌더링할 수 있습니다. 이는 SSG의 성능 이점과 최신 콘텐츠의 이점을 누릴 수 있음을 의미합니다.

구현 (Next.js): ISR은 getStaticProps에 revalidate 속성을 추가하여 달성됩니다.

// pages/isr-product/[id].js
function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>Last fetched: {new Date(product.lastFetched).toLocaleTimeString()}</p>
    </div>
  );
}

export async function getStaticPaths() {
  // Only generate a few popular products at build time
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: 'blocking', // or 'true', 'false'
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return {
    props: {
      product: { ...product, lastFetched: Date.now() },
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  };
}

export default Product;

fallback: 'blocking'의 경우, 빌드 시점에 페이지가 사전 생성되지 않았다면 Next.js는 첫 번째 요청 시 해당 페이지를 서버 렌더링하고 후속 요청을 위해 캐시합니다. revalidate의 경우, 10초 후의 후속 요청은 백그라운드에서 재구성을 트리거하여 즉시 이전 페이지를 제공하고 캐시를 업데이트합니다.

구현 (Nuxt.js): Nuxt 3는 getStaticProps 내의 Next.js의 직접적인 1:1 revalidate 옵션과 같은 기능이 없지만, 다른 메커니즘을 통해 유사한 결과를 얻을 수 있습니다.

• 런타임 캐싱 (Nitro): Nuxt 3의 Nitro 서버 엔진은 강력한 캐싱 기능을 제공합니다. 특정 기간 동안 캐시될 라우트를 구성하고 다양한 전략을 사용하여 다시 검증할 수 있습니다.
• 요청 시 재유효성 검사 (훅을 통해): CMS에서 콘텐츠가 변경될 때 특정 페이지의 다시 렌더링을 트리거하는 웹훅 또는 API 엔드포인트를 구현할 수 있습니다. 이렇게 하려면 해당 특정 라우트의 캐시를 프로그래밍 방식으로 지우고 다음 요청이 다시 생성하도록 해야 합니다.

다음은 유사한 효과를 위해 Nitro의 내장 cache-control 헤더를 사용하는 예제입니다. 이는 백그라운드 재유효성 검사 측면에서 엄밀히 말하면 ISR은 아니지만 다음과 같습니다.

<!-- pages/isr-product/[id].vue -->
<template>
  <div>
    <h1>{{ product.name }}</h1>
    <p>Price: ${{ product.price }}</p>
    <p>Last fetched: {{ new Date(product.lastFetched).toLocaleTimeString() }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { useAsyncData, definePageMeta } from '#app';
import { useRequestEvent } from 'h3'; // Import for access to server request/response

const route = useRoute();
const productId = route.params.id;

const { data: product } = await useAsyncData(`product-${productId}`, async () => {
  const res = await fetch(`https://api.example.com/products/${productId}`);
  return { ...(await res.json()), lastFetched: Date.now() };
});

// Setting cache-control headers via Nuxt runtime hooks
const event = useRequestEvent();
if (event) {
  event.node.res.setHeader('Cache-Control', 's-maxage=1, stale-while-revalidate=59');
}
</script>

<style scoped>
/* Scoped styles */
</style>

stale-while-revalidate 지시어는 CDN과 브라우저에게 s-maxage(또는 max-age)가 만료된 경우 백그라운드에서 새로운 버전을 가져오는 동안 이전 버전의 페이지를 제공하도록 지시하여 ISR과 유사한 사용자 경험을 제공합니다. 완전한 프로그래밍 방식 재유효성 검사를 위해 이 기능을 사용자 지정 서버 함수와 결합하여 특정 캐시를 무효화할 수 있습니다.

사용 사례: 신선도가 중요하지만 궁극적인 속도도 원하는 전자 상거래 제품 페이지, 뉴스 기사, 콘텐츠 피드.

장점: 빠른 로드 시간 (SSG 이점), 최신 콘텐츠 (모든 요청 시 전체 서버 부하 없이 SSR 이점), 향상된 확장성. 단점: 더 복잡한 캐싱 전략, 다른 방법보다 직관적이지 않음, 재유효성 검사를 처리하려면 여전히 서버(또는 서버리스 함수)가 필요함.

올바른 렌더링 전략 선택하기

렌더링 전략의 선택은 주로 데이터 신선도, SEO 요구 사항 및 상호작용성과 같은 애플리케이션의 특정 요구 사항에 따라 달라집니다.

1. CSR (클라이언트 측 렌더링):

   • 선택 시점: 초기 로드 속도와 SEO가 부차적인 고려 사항인 매우 상호작용적인 웹 애플리케이션, 대시보드 또는 관리자 패널 구축 시.
   • 피해야 할 경우: SEO가 중요하거나 사용자가 인터넷 연결이 느리거나 구형 장치를 사용하는 경우.

2. SSR (서버 측 렌더링):

   • 선택 시점: 공개적으로 표시되는 애플리케이션에 강력한 SEO, 빠른 초기 콘텐츠 표시가 필요하고 자주 변경되는 동적 데이터를 처리하는 경우. 전자 상거래, 뉴스 사이트 또는 콘텐츠 신선도가 가장 중요한 콘텐츠 중심 애플리케이션을 생각해보세요.
   • 피해야 할 경우: 정적 콘텐츠에 대해 가장 빠른 페이지 로드를 원하거나 서버 비용/부하를 가능한 한 최소화하는 경우.

3. SSG (정적 사이트 생성):

   • 선택 시점: 콘텐츠 변경이 드문 경우 (예: 블로그, 마케팅 사이트, 설명서).
   • 피해야 할 경우: 콘텐츠가 매우 자주 업데이트되거나 (예: 실시간 주식 티커) 사전 생성할 수 없는 사용자별 콘텐츠인 경우.

4. ISR (점진적 정적 재생성):

   • 선택 시점: SSG의 이점(속도, CDN 제공)이 필요하지만 콘텐츠가 주기적으로 또는 요청 시 업데이트되는 경우. 제품 카탈로그, 매일 게시물이 올라오는 블로그 또는 새 콘텐츠가 백그라운드에서 가져오는 동안 이전 콘텐츠를 제공할 수 있는 뉴스 기사에 이상적입니다. 이는 여전히 정적 호스팅의 이점을 누릴 수 있는 동적 콘텐츠에 대한 훌륭한 중간 지점입니다.

많은 현대 애플리케이션은 이러한 전략의 조합을 활용하여 마케팅용 정적 페이지에는 SSG를, 사용자별 동적 페이지(예: 쇼핑 카트)에는 SSR을, 제품 목록 또는 블로그 게시물에는 ISR을 사용합니다. Next.js와 Nuxt.js 모두 이러한 하이브리드 접근 방식을 촉진하는 데 뛰어나므로 각 애플리케이션 부분을 고유한 요구 사항에 맞게 최적화할 수 있습니다.

속도 및 SEO 최적화

웹 렌더링의 환경은 풍부하고 다양하며 뛰어난 사용자 경험을 만들기 위한 강력한 도구를 제공합니다. 콘텐츠의 성격, 업데이트 빈도, 성능 및 SEO 목표를 신중하게 고려함으로써 Next.js 및 Nuxt.js와 같은 프레임워크 내에서 클라이언트 측 렌더링, 서버 측 렌더링, 정적 사이트 생성 및 점진적 정적 재생성을 효과적으로 활용하여 빠르고 확장 가능하며 성능이 뛰어난 웹 애플리케이션을 구축할 수 있습니다. 핵심은 모든 문제에 대한 만능 해결책이 아니라 현대 웹 개발의 특정 과제를 해결하기 위해 설계된 강력한 선택 스펙트럼이 있다는 것을 이해하는 것입니다.