Angular 메타 프레임워크(SSR, SSG) Analog.js

Analog.js 소개

Analog.js는 Vue의 Nuxt.js 또는 React의 Next.js와 유사한 프레임워크로 Angular를 위한 서버사이드 프레임워크 혹은 메타 프레임워크입니다. 이를 이용하면, Angular의 서버 렌더링 및 정적 사이트 생성과 같은 기능을 매우 빠르고 쉽게 사용할 수 있습니다.

이전부터 Angular의 서버 렌더링(SSR)은 Angular Universal을 통해 지원하였습니다. Angular Universal을 이용하면 Angular의 서버 렌더링 및 정적 사이트를 쉽게 생성할 수 있었지만, 잠재적인 문제점이 많았습니다.

Analog.js 는 이러한 잠재적인 문제로부터 Angular의 프로젝트의 서버렌더링 및 다양한 기능을 내포한 풀 스택 메타 프레임워크로 발돋음 할 수 있도록 도와줍니다.

Analog.js 특징

Analog.js는 다음과 같은 특징을 가지고 있습니다.

Vite/Vitest/Playwright 지원
파일 기반 라우팅
콘텐츠 경로로 마크다운 사용 지원
API/서버 라우팅 지원
하이브리드 SSR/SSG 지원
Angular CLI/Nx 워크스페이스 지원
Astro에서 Angular 컴포넌트 지원

File-based Routing

파일 기반 라우팅 규칙은 일반적인 Angular 앱에서는 라우팅 모듈을 구성하고 경로와 특정 경로가 사용하는 컴포넌트를 선언함과 달리 Analog.js 앱에서는 경로를 자동으로 생성하고 파일의 컴포넌트에 연결하는 파일 레이아웃을 사용합니다.

Analog 앱을 생성할 때 앱의 폴더 구조에는 페이지 디렉터리가 있습니다. 해당 폴더에 배치되고 .page.ts로 끝나는 모든 컴포넌트는 경로로 전환됩니다. 또한, 폴더에 정적 경로와 동적 경로를 정의할 수 있으며, 중첩 라우팅 구성도 가능합니다.

Content Routes

Analog는 마크다운 콘텐츠를 경로로 사용하고 구성 요소에서 마크다운 콘텐츠를 렌더링하는 것을 지원합니다.

---
title: About
meta:
  - name: description
    content: About Page Description
  - property: og:title
    content: About
---

## About Analog

Analog is a meta-framework for Angular.

[Back Home](./)

API Routes

Analog는 애플리케이션에 데이터를 제공하는 데 사용할 수 있는 API 경로 정의를 지원합니다.

이를 통해 Analog를 통해 풀 스택 프로젝트를 설계할 수 있습니다.

// /server/routes/v1/users/[id].get.ts
import { defineEventHandler, getRouterParam } from 'h3';

export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');
  // TODO: fetch user by id
  return `User profile of ${id}!`;
});

Building Static Sites

Analog는 배포를 위해 구축할 때 정적 사이트 생성을 지원합니다.

클라이언트 측 애플리케이션과 함께 정적 HTML 파일에 대한 사전 렌더링 제공 경로가 포함됩니다.

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      prerender: {
        routes: async () => [
          '/',
          '/about',
          '/blog',
          '/blog/posts/2023-02-01-my-first-post',
        ],
      },
    }),
  ],
}));

Analog는 이 밖에도 메타 프레임워크로서 다양한 기능을 제공하며, 사용자 편의에서 쉽게 프로젝트를 구성할 수 있도록 도와주고 있습니다.

Analog.js 아쉬운 점

어느 라이브러리/프레임워크마다 각자의 아쉬움과 단점들이 있는데, Analog 또한 이러한 아쉬움과 단점들이 존재합니다. 먼저, Analog라는 프로젝트 자체가 얼마 되지 않은 프로젝트로 아직 잘 알려지지 않았으며, 실제 운영에서 사용 사례가 많이 없다는 점이 가장 큽니다.

이는 곧 생태계의 크기, 이슈의 해결 등 운영하면서 발생할 수 있는 다양한 사항에 능동적으로 대처하기가 어렵다는 점이 있습니다. 또한, Next.js 와 Nuxt.js 만큼 프로젝트 자체가 개발되어 있지 않아 Next.js 와 Nuxt.js에서는 제공하는 기능이 Analog에서는 가능하지 않을 수도 있습니다. 이는 아직 그만큼의 프로젝트가 성숙되지 않은 문제인데요.

아직은 초기인 만큼 다양한 운영 및 도입 사례가 많이 생겨나야 해결 될 문제일 것 같습니다.

VIAE의 IT 이모저모