[9주차] 위클리페이퍼 - 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.

Next.js를 사용하는 이유 (기본)

1. 리액트의 SPA 및 CSR의 한계
   1. 리액트의 렌더링 방식
      • 리액트는 단일 웹페이지 애플리케이션(SPA)와 클라이언트 사이드 렌더링 방식을 사용
   2. 리액트 렌더링 방식의 한계
      • 초기 로딩 시간 지연: 모든 자바스크립트 파일과 컴포넌트를 클라이언트 측에서 로드해야 하므로, 초기 로딩 시간이 길어질 수 있음
      • SEO 문제: 검색 엔진이 콘텐츠를 제대로 인덱싱하지 못해 SEO에 불리
2. Next.js의 프리렌더링 기능과 이점
   1. 프리렌더링의 방식
      • 서버 사이드 렌더링(SSR): 각 요청마다 서버에서 HTML을 생성하여 브라우저에 전달 → SEO와 초기 로딩 시간을 크게 개선
      • 정적 사이트 생성(SSG): 빌드 시 모든 페이지를 미리 생성하여 정적 파일로 저장 → 매우 빠른 로딩 속도와 보안성을 제공
   2. 프리렌더링의 이점
      • 빠른 초기 로딩 시간: 서버에서 미리 생성된 HTML을 제공하므로, 브라우저에서 빠르게 페이지를 표시
      • SEO 개선: 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있어, SEO 성능의 향상
3. Next.js의 이미지 최적화 기능과 이점
   1. 이미지 최적화 방식
      • 내장된 Image 컴포넌트를 통해, 이미지 최적화 기능을 제공
   2. 이미지 최적화 이점
      • 자동 최적화: 이미지를 자동으로 최적화하여 로드 시간을 단축
      • 지연 로딩: 화면에 보일 때만 이미지를 로드하여 초기 로딩 속도를 개선
      • 크기 조정: 필요에 따라 이미지 크기를 자동으로 조정하여 적절한 크기의 이미지를 제공
4. Next.js의 클라이언트 사이드 네비게이션
   1. 사이드 네비게이션 방식
      • 클라이언트 사이드 네비게이션을 지원하여 페이지 전환을 매끄럽게 처리 (Link 컴포넌트를 사용)
   2. 사이드 네비게이션의 이점
      • 페이지를 이동할 때, 전체 페이지를 로드하지 않고 필요한 데이터만 변경
      • 빠른 페이지 전환: 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하므로, 페이지 전환 속도가 매우 빠름
      • 부드러운 사용자 경험: 사용자는 페이지가 전환될 때 부드럽고 일관된 경험을 할 수 있습니다.
5. 코드 스플리팅과 개발자 경험 개선
   1. 코드 스플리팅의 방식
      • 코드 스플리팅을 자동으로 처리하여 각 페이지에 필요한 최소한의 자바스크립트 코드만 로드
   2. 코드 스플리팅의 이점
      • 파일 시스템 기반 라우팅: 파일 구조에 따라 자동으로 라우팅을 설정하여, 간편하게 라우트를 관리
      • 자동 메타 태그 관리: 페이지마다 메타 태그를 쉽게 설정하여 SEO 최적화
      • 스타일링 간편화: 기본적으로 CSS와 Sass를 지원, Tailwind CSS와 같은 라이브러리도 쉽게 통합

마인드맵 요약

---

Next.js를 사용하는 이유 (추가)

1. App Router & React Server Components(RSC)
   • 서버 컴포넌트 중심으로 데이터 접근·렌더링을 서버로 이전 → 클라이언트 JS 감소, 보안·성능·SEO 동시 개선
   • 레이아웃/중첩 라우팅을 통한 공통 UI 재사용 및 스트리밍과 결합한 점진적 표시 지원
   • 클라이언트 전용 로직은 "use client"로 분리하여 브라우저 전용 라이브러리와 공존
2. 데이터 패칭 & 캐싱 / ISR(증분 정적 재생성)
   • fetch() 캐시와 revalidate로 정적·동적 페이지의 신선도/성능 균형 설계
   • ISR: 정적 페이지를 일정 주기로 자동 재생성하거나, 온디맨드 재검증으로 이벤트 기반 최신화 가능

   // app/products/page.tsx
   export const revalidate = 60; // 60초마다 재검증
   
   export default async function Page() {
     const res = await fetch('<https://api.example.com/products>', { next: { revalidate: 60 }});
     const data = await res.json();
     return ;
   }
   
   

   // app/api/revalidate/route.ts (온디맨드)
   import { revalidatePath } from 'next/cache';
   
   export async function POST(req: Request) {
     const { secret, path } = await req.json();
     if (secret !== process.env.REVALIDATE_SECRET) return new Response('Unauthorized', { status: 401 });
     revalidatePath(path || '/');
     return Response.json({ revalidated: true });
   }
   
   

3. 스트리밍 SSR (Streaming)
   • 서버에서 HTML을 스트리밍해 TTFB를 낮추고, 주요 영역부터 점진적으로 표시
     • TTFB: 서버로부터 첫 번째 응답 바이트(Byte)가 도착하기까지 걸리는 시간
   • Suspense 경계를 활용하여 데이터가 준비된 섹션부터 즉시 렌더

   // app/page.tsx
   import { Suspense } from 'react';
   import Products from './_components/products';
   
   export default function Page() {
     return (
       <><Hero />
         <Suspense fallback={<Skeleton />}>
           {/* 데이터 준비되면 해당 섹션부터 스트리밍 표시 */}
           <Products />
         </Suspense>
       </>
     );
   }
   
   

4. Route Handlers / API Routes
   • 앱 내부에 경량 백엔드 엔드포인트를 정의, 인증/웹훅/프록시 등에 활용

   // app/api/contact/route.ts
   export async function POST(req: Request) {
     const body = await req.json();
     // TODO: 유효성 검사/저장/알림
     return Response.json({ ok: true });
   }
   
   

5. Edge Runtime & Middleware
   • Edge 런타임: 전 세계 PoP에서 실행되어 지연시간 단축 및 쿠키·지역·A/B 기준 분기
   • Middleware로 경로 보호/리다이렉트/지역별 라우팅 등 사전 처리

   // middleware.ts
   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   
   export function middleware(req: NextRequest) {
     const isAuthed = req.cookies.get('session')?.value;
     if (!isAuthed && req.nextUrl.pathname.startsWith('/dashboard')) {
       return NextResponse.redirect(new URL('/login', req.url));
     }
     return NextResponse.next();
   }
   
   

   // app/edge/page.tsx
   export const runtime = 'edge'; // 이 페이지는 Edge에서 실행
   export default function EdgePage() { return <div>Edge</div>; }
   
   

6. 이미지 최적화
   • AVIF/WebP 자동 변환, 기기 DPR 대응(레티나), 사이즈 리사이즈 및 캐싱
   • 지연 로딩(lazy), 프리로딩(priority), 레이아웃 시프트 최소화(고정 크기/fill)

   import Image from 'next/image';
   
   <Imagesrc="/hero.jpg"
     alt="Hero"
     width={1200}
     height={600}
     priority
     sizes="(max-width: 768px) 100vw, 1200px"
   />
   
   

7. 폰트/스크립트 최적화
   • next/font로 FOIT/FOUT 최소화, 서브셋 자동화·캐싱

   // app/layout.tsx
   import { Noto_Sans_KR } from 'next/font/google';
   const noto = Noto_Sans_KR({ subsets: ['latin'], weight: ['400','700'] });
   
   export default function RootLayout({ children }) {
     return <html lang="ko" className={noto.className}><body>{children}</body></html>;
   }
   
   

   • <Script>로 로딩 전략 제어(afterInteractive, lazyOnload) 및 우선순위 관리
8. 운영·보안·배포
   • 보안 헤더(CSP/HSTS/Referrer-Policy/Permissions-Policy) 및 쿠키 스코프(HttpOnly/SameSite/Path)

   // next.config.mjs
   export default {
     async headers() {
       return [{
         source: '/(.*)',
         headers: [
           { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
           { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
           // CSP는 서비스 정책에 맞게 별도 구성 권장
         ],
       }];
     },
   };
   
   

   • CDN 캐시 전략: 정적 에셋은 장기 캐시, HTML은 짧은 TTL + ISR/리밸리데이션
   • 배포 모델: Vercel(무설정 빌드/Edge/이미지 최적화 기본 제공) 또는 자체 인프라(SSR 런타임/이미지 서버 구성 필요)
   • 모니터링/로깅: 웹 비탈율/TTFB/LCP/CLS 추적, 서버 로그와 결합해 병목 구간 식별

마인드맵 요약

참고자료

• https://www.codeit.kr/topics/fs-paper4/lessons/8640
• https://arxiv.org/abs/2502.15707
• https://nextjs.org/learn/seo/rendering-strategies
• https://dev.to/hijazi313/nextjs-14-performance-optimization-modern-approaches-for-production-applications-3n65
• https://www.intuz.com/blog/5-reasons-why-you-should-use-next.js-for-your-front-end-development
• https://en.wikipedia.org/wiki/Next.js