📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 + 성능 최적화 및 캐싱 전략

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 + 성능 최적화 및 캐싱 전략

1. 성능 최적화의 중요성

쇼핑몰 애플리케이션의 성능 최적화는 **사용자 경험과 SEO(검색 엔진 최적화)**에 직접적인 영향을 미칩니다.
페이지 로딩 속도가 빠를수록 사용자 이탈률 감소, 검색 순위 상승, 서버 비용 절감 효과를 얻을 수 있습니다.

✅ 이 챕터에서 다룰 성능 최적화 기술:

• Next.js의 최적화 기법 (ISR, Lazy Loading, Code Splitting)
• NestJS API 성능 개선 (쿼리 최적화, Redis 캐싱)
• 이미지 최적화 및 CDN(Content Delivery Network) 적용

💡 이제 Next.js와 NestJS의 성능 최적화 방법을 단계별로 살펴보겠습니다.

---

2. Next.js의 성능 최적화 기법

2.1. 정적 사이트 생성 (SSG) & ISR 적용

Next.js에서 **정적 사이트 생성(SSG)과 증분 정적 생성(ISR)**을 활용하면 페이지 로딩 속도를 향상할 수 있습니다.

💡 ISR 적용 (pages/products.tsx)

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

  return {
    props: { products },
    revalidate: 60, // 60초마다 새로운 데이터로 업데이트
  };
}

✅ ISR을 활용하면 페이지를 미리 생성하면서도 최신 데이터를 유지할 수 있습니다.

---

2.2. 이미지 최적화 (next/image 활용)

Next.js의 next/image를 사용하면 자동으로 이미지 최적화 및 Lazy Loading이 적용됩니다.

💡 상품 이미지 최적화 (components/ProductCard.tsx)

import Image from 'next/image';

export default function ProductCard({ product }) {
  return (
    <div>
      <Image src={product.imageUrl} alt={product.name} width={300} height={300} />
      <h2>{product.name}</h2>
    </div>
  );
}

✅ 이제 이미지는 자동으로 최적화되며, 사용자가 스크롤할 때만 로드됩니다.

---

2.3. 코드 스플리팅 및 동적 로딩

Next.js의 dynamic()을 사용하면 컴포넌트를 필요할 때만 로드하여 초기 페이지 로딩 속도를 개선할 수 있습니다.

💡 리뷰 목록을 동적 로딩으로 변경 (pages/products/[id].tsx)

import dynamic from 'next/dynamic';

const ReviewList = dynamic(() => import('../../components/ReviewList'), { ssr: false });

export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <ReviewList productId={product.id} />
    </div>
  );
}

✅ 이제 리뷰 목록 컴포넌트는 필요할 때만 로드됩니다.

---

3. NestJS API 성능 최적화

3.1. Prisma 쿼리 최적화 (select와 include 활용)

Prisma에서 select와 include 옵션을 사용하면 불필요한 데이터 로딩을 방지할 수 있습니다.

💡 최적화된 상품 조회 (products.service.ts)

async getAllProducts() {
  return this.prisma.product.findMany({
    select: {
      id: true,
      name: true,
      price: true,
      imageUrl: true,
    },
  });
}

✅ 불필요한 데이터를 제외하고 필요한 필드만 가져와 성능을 개선합니다.

---

3.2. Redis 캐싱을 활용한 API 응답 속도 개선

데이터베이스 조회 요청을 줄이기 위해 Redis 캐싱을 적용할 수 있습니다.

Redis 설치 및 설정

npm install cache-manager cache-manager-redis-store

💡 Redis 캐싱 적용 (products.service.ts)

import { Cache } from 'cache-manager';
import { Inject, Injectable } from '@nestjs/common';

@Injectable()
export class ProductsService {
  constructor(@Inject('CACHE_MANAGER') private cacheManager: Cache) {}

  async getAllProducts() {
    const cachedProducts = await this.cacheManager.get('products');
    if (cachedProducts) return cachedProducts;

    const products = await this.prisma.product.findMany();
    await this.cacheManager.set('products', products, { ttl: 60 });
    return products;
  }
}

✅ 이제 상품 목록은 60초 동안 Redis에 저장되므로 API 요청 속도가 빨라집니다.

---

4. CDN(Content Delivery Network) 적용

정적 파일(이미지, CSS, JS)은 CDN을 통해 배포하면 글로벌 사용자의 로딩 속도를 향상할 수 있습니다.

💡 Vercel에서 자동으로 CDN 최적화를 지원하므로, Next.js를 Vercel에 배포하면 최적의 성능을 얻을 수 있습니다.

vercel deploy

✅ 이제 정적 파일은 Vercel CDN을 통해 빠르게 제공됩니다.

---

5. 프론트엔드 및 API 성능 모니터링

5.1. Lighthouse를 이용한 프론트엔드 성능 분석

Chrome DevTools에서 Lighthouse를 실행하여 페이지 성능을 분석할 수 있습니다.

1. Chrome DevTools (F12) → Lighthouse 탭 이동
2. Performance, SEO, Accessibility 테스트 실행
3. 최적화가 필요한 요소 확인 후 개선

✅ Lighthouse 점수를 분석하여 성능을 지속적으로 개선합니다.

---

5.2. API 요청 속도 분석 (Postman, New Relic)

NestJS API의 응답 속도를 측정하려면 Postman, New Relic, Prometheus 등을 사용할 수 있습니다.

💡 API 응답 속도 로깅 (main.ts)

import { Logger, NestMiddleware } from '@nestjs/common';

export class LoggerMiddleware implements NestMiddleware {
  private logger = new Logger('HTTP');

  use(req: Request, res: Response, next: Function) {
    const start = Date.now();
    res.on('finish', () => {
      const duration = Date.now() - start;
      this.logger.log(`${req.method} ${req.url} - ${duration}ms`);
    });
    next();
  }
}

✅ 이제 API 요청별 응답 속도를 로그에서 확인할 수 있습니다.

---

🎯 마무리하며

이번 챕터에서는 Next.js와 NestJS에서 성능을 최적화하는 다양한 방법을 살펴봤습니다.

• Next.js 최적화 → ISR, Lazy Loading, Code Splitting
• NestJS 최적화 → Prisma 최적화, Redis 캐싱
• CDN 적용 및 성능 모니터링

다음 단계에서는 6.2. 보안 강화 및 데이터 보호 전략을 다룰 예정입니다. 🚀

---