Angular Academy · 강의

서버 경로와 렌더링 모드

경로별로 사전 렌더링, SSR, CSR을 구성합니다.

서버 경로와 렌더링 모드은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

모든 경로에 같은 방식이 맞지는 않습니다

모든 경로를 같은 방식으로 렌더링할 필요는 없습니다. Angular SSR을 사용하면 경로별로 렌더링 모드를 지정할 수 있습니다. 서버 렌더링, 클라이언트 렌더링, 빌드 시 프리렌더링 중에서 선택하십시오.

세 가지 모드

RenderMode.Server는 각 요청마다 렌더링하고, RenderMode.Client는 브라우저에서만 렌더링하며(CSR), RenderMode.Prerender는 빌드 시 정적 HTML을 생성합니다(SSG).

서버 경로 설정

경로를 렌더링 모드에 매핑하는 ServerRoute[]를 정의한 다음, 서버 설정에서 provideServerRouting을 사용해 제공합니다.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

연결하기

SSR 엔진이 각 경로를 처리하는 방법을 알 수 있도록 서버 앱 설정에 경로를 등록하십시오.

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

프리렌더링할 시점

홈, 소개, 문서와 같이 안정적인 공개 페이지에는 Prerender를 선택하십시오. 이러한 페이지는 HTML로 한 번 빌드되고 CDN에서 즉시 제공되므로 요청마다 서버 비용이 발생하지 않습니다.

서버를 사용할 시점

실시간 재고가 있는 상품 페이지처럼 요청이나 사용자마다 콘텐츠가 바뀌지만 SEO 또는 빠른 첫 화면 표시가 필요한 페이지에는 Server를 선택하십시오.

클라이언트를 사용할 시점

인증된 대시보드처럼 상호작용이 많고 비공개이며 SEO와 첫 화면 표시가 중요하지 않은 페이지에는 Client를 선택하십시오. 서버는 껍데기를 전송하고 브라우저가 렌더링합니다.

동적 매개변수 프리렌더링

매개변수가 있는 경로의 경우 getPrerenderParams를 사용해 생성할 매개변수 목록을 반환하여 프리렌더러에 알려야 합니다.

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

프리렌더링 대체 처리

프리렌더링되지 않은 매개변수는 실행 중 서버 또는 클라이언트 렌더링으로 대체 처리할 수 있습니다. 따라서 인기 항목은 프리렌더링하고 나머지 항목은 요청 시 렌더링할 수 있습니다.

경로별 헤더와 상태

서버 경로는 응답 헤더와 상태 코드를 설정할 수 있습니다. 이는 캐싱 정책에 유용하며, 찾을 수 없는 경로 처리기에서 404를 반환할 때도 사용할 수 있습니다.

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

전략적인 모드 혼합

실제 앱은 여러 모드를 조합합니다. 마케팅 페이지는 프리렌더링하고, SEO가 중요한 동적 페이지는 서버에서 렌더링하며, 로그인 뒤의 앱은 클라이언트에서 렌더링합니다. 이렇게 하면 비용과 성능을 함께 최적화할 수 있습니다.

빠른 확인

렌더링 모드에 대한 지식을 확인해 보십시오.

복습

ServerRoute[]와 provideServerRouting을 사용해 경로별 렌더링을 설정했습니다. 안정적인 공개 페이지에는 Prerender, 동적인 SEO 페이지에는 Server, 비공개 상호작용 페이지에는 Client를 사용하며, 동적 경로에는 프리렌더링 매개변수도 포함할 수 있습니다.

자주 묻는 질문

“서버 경로와 렌더링 모드” 강의는 무료인가요?

네 — “서버 경로와 렌더링 모드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“서버 경로와 렌더링 모드”에서 뭘 배우나요?

경로별로 사전 렌더링, SSR, CSR을 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“서버 경로와 렌더링 모드” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기