SSR이 뭔데? 왜 필요한 거야? 🤔

야, 웹 개발하다 보면 SSR이라는 말 진짜 많이 듣지? Server-Side Rendering의 약자인데, 말 그대로 서버에서 렌더링을 해준다는 뜻이야. 🖥️

예전에는 웹사이트가 다 이렇게 작동했어. 서버에서 HTML을 완성해서 보내주면 브라우저는 그냥 보여주기만 하면 됐거든. 근데 React 같은 SPA(Single Page Application) 프레임워크가 나오면서 CSR(Client-Side Rendering)이 대세가 됐지. 브라우저에서 자바스크립트로 모든 걸 렌더링하는 방식이야.

그런데 말이야, CSR에는 치명적인 문제가 있어. 첫 페이지 로딩이 느리고, SEO(검색 엔진 최적화)가 안 좋다는 거지. 구글 봇이 와서 페이지를 크롤링할 때 빈 HTML만 보게 되니까 검색 결과에 제대로 안 뜨는 거야. 😱

Next.js는 이런 SSR을 엄청 쉽게 구현할 수 있게 해주는 프레임워크야. React 기반이라서 React 개발자라면 금방 배울 수 있고, 타입스크립트 지원도 완벽해서 타입 안정성까지 챙길 수 있지. ✨

Client Components와 상호작용 추가하기 🎮

Server Component는 좋지만, 사용자 인터랙션이 필요한 경우에는 Client Component를 써야 해. 버튼 클릭, 폼 입력, 애니메이션 같은 거 말이야. 🖱️

Client Component를 만들려면 파일 맨 위에 'use client' 지시어를 추가하면 돼.

좋아요 버튼 만들기

// src/components/LikeButton.tsx
'use client';

import { useState } from 'react';

interface LikeButtonProps {
  postId: number;
  initialLikes: number;
}

export default function LikeButton({ postId, initialLikes }: LikeButtonProps) {
  const [likes, setLikes] = useState(initialLikes);
  const [isLiked, setIsLiked] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleLike = async () => {
    if (isLoading) return;
    
    setIsLoading(true);
    
    try {
      const response = await fetch(`/api/posts/${postId}/like`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      
      if (response.ok) {
        setLikes(prev => isLiked ? prev - 1 : prev + 1);
        setIsLiked(prev => !prev);
      }
    } catch (error) {
      console.error('Failed to like post:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button
      onClick={handleLike}
      disabled={isLoading}
      className={`
        flex items-center gap-2 px-4 py-2 rounded-lg transition
        ${isLiked 
          ? 'bg-red-500 text-white' 
          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
        }
        ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}
      `}
    >
      <span>{isLiked ? '❤️' : '🤍'}</span>
      <span>{likes}</span>
    </button>
  );
}

이제 이 Client Component를 Server Component에서 사용할 수 있어:

// src/app/posts/page.tsx
import LikeButton from '@/components/LikeButton';

export default async function PostsPage() {
  const posts = await getPosts();
  
  return (
    <div className="container mx-auto px-4 py-8">
      {posts.map((post) => (
        <article key={post.id} className="border rounded-lg p-6 mb-6">
          <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
          <p className="text-gray-600 mb-4">{post.content}</p>
          <LikeButton postId={post.id} initialLikes={post.likes} />
        </article>
      ))}
    </div>
  );
}

API Routes로 백엔드 구축하기 🔧

Next.js의 또 다른 강력한 기능은 API Routes야. 별도의 백엔드 서버 없이도 API 엔드포인트를 만들 수 있어. 🎯

App Router에서는 route.ts 파일을 사용해서 API를 만들어.

간단한 API 만들기

// src/app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { Post } from '@/types';

// GET /api/posts
export async function GET(request: NextRequest) {
  try {
    // 실제로는 데이터베이스에서 가져오겠지만
    // 여기서는 예시로 하드코딩
    const posts: Post[] = [
      {
        id: 1,
        title: 'Next.js 시작하기',
        content: 'Next.js는 정말 멋진 프레임워크야...',
        author: {
          id: 1,
          name: '김개발',
          email: 'dev@example.com',
        },
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      },
      // ... 더 많은 포스트
    ];
    
    // 쿼리 파라미터 처리
    const searchParams = request.nextUrl.searchParams;
    const limit = searchParams.get('limit');
    
    const filteredPosts = limit 
      ? posts.slice(0, parseInt(limit)) 
      : posts;
    
    return NextResponse.json({
      data: filteredPosts,
      success: true,
      message: 'Posts fetched successfully',
    });
  } catch (error) {
    return NextResponse.json(
      {
        data: null,
        success: false,
        message: 'Failed to fetch posts',
      },
      { status: 500 }
    );
  }
}

// POST /api/posts
export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    
    // 타입 검증
    if (!body.title || !body.content) {
      return NextResponse.json(
        {
          data: null,
          success: false,
          message: 'Title and content are required',
        },
        { status: 400 }
      );
    }
    
    // 새 포스트 생성 로직
    const newPost: Post = {
      id: Date.now(),
      title: body.title,
      content: body.content,
      author: body.author,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    };
    
    return NextResponse.json(
      {
        data: newPost,
        success: true,
        message: 'Post created successfully',
      },
      { status: 201 }
    );
  } catch (error) {
    return NextResponse.json(
      {
        data: null,
        success: false,
        message: 'Failed to create post',
      },
      { status: 500 }
    );
  }
}

Dynamic API Routes

특정 포스트를 가져오는 API도 만들어보자:

// src/app/api/posts/[id]/route.ts
import { NextRequest, NextResponse } from 'next/server';

interface RouteParams {
  params: {
    id: string;
  };
}

// GET /api/posts/[id]
export async function GET(
  request: NextRequest,
  { params }: RouteParams
) {
  try {
    const postId = parseInt(params.id);
    
    // 데이터베이스에서 포스트 조회
    // const post = await db.post.findUnique({ where: { id: postId } });
    
    // 예시 데이터
    const post = {
      id: postId,
      title: `포스트 ${postId}`,
      content: '내용...',
    };
    
    if (!post) {
      return NextResponse.json(
        {
          data: null,
          success: false,
          message: 'Post not found',
        },
        { status: 404 }
      );
    }
    
    return NextResponse.json({
      data: post,
      success: true,
      message: 'Post fetched successfully',
    });
  } catch (error) {
    return NextResponse.json(
      {
        data: null,
        success: false,
        message: 'Failed to fetch post',
      },
      { status: 500 }
    );
  }
}

// PATCH /api/posts/[id]
export async function PATCH(
  request: NextRequest,
  { params }: RouteParams
) {
  try {
    const postId = parseInt(params.id);
    const body = await request.json();
    
    // 포스트 업데이트 로직
    const updatedPost = {
      id: postId,
      ...body,
      updatedAt: new Date().toISOString(),
    };
    
    return NextResponse.json({
      data: updatedPost,
      success: true,
      message: 'Post updated successfully',
    });
  } catch (error) {
    return NextResponse.json(
      {
        data: null,
        success: false,
        message: 'Failed to update post',
      },
      { status: 500 }
    );
  }
}

// DELETE /api/posts/[id]
export async function DELETE(
  request: NextRequest,
  { params }: RouteParams
) {
  try {
    const postId = parseInt(params.id);
    
    // 포스트 삭제 로직
    // await db.post.delete({ where: { id: postId } });
    
    return NextResponse.json({
      data: { id: postId },
      success: true,
      message: 'Post deleted successfully',
    });
  } catch (error) {
    return NextResponse.json(
      {
        data: null,
        success: false,
        message: 'Failed to delete post',
      },
      { status: 500 }
    );
  }
}

실전 프로젝트: 블로그 플랫폼 만들기 🎨

지금까지 배운 걸 종합해서 실제로 동작하는 블로그 플랫폼을 만들어보자! 재능넷 같은 플랫폼에서 지식을 공유하는 블로그를 상상해봐. 📝

프로젝트 구조

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── posts/
│   │   ├── page.tsx
│   │   ├── [slug]/
│   │   │   ├── page.tsx
│   │   │   └── loading.tsx
│   │   └── new/
│   │       └── page.tsx
│   ├── api/
│   │   └── posts/
│   │       ├── route.ts
│   │       └── [id]/
│   │           └── route.ts
│   └── globals.css
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── PostCard.tsx
│   ├── PostEditor.tsx
│   └── LikeButton.tsx
├── lib/
│   ├── db.ts
│   └── utils.ts
└── types/
    └── index.ts

레이아웃 구성하기

// src/app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: {
    default: '재능넷 블로그',
    template: '%s | 재능넷 블로그',
  },
  description: '다양한 재능과 지식을 공유하는 블로그 플랫폼',
  keywords: ['블로그', '재능공유', '지식', 'Next.js', 'TypeScript'],
  authors: [{ name: '재능넷' }],
  openGraph: {
    type: 'website',
    locale: 'ko_KR',
    url: 'https://blog.jaenung.net',
    siteName: '재능넷 블로그',
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className={inter.className}>
        <div className="min-h-screen flex flex-col">
          <Header />
          <main className="flex-1">
            {children}
          </main>
          <Footer />
        </div>
      </body>
    </html>
  );
}

헤더 컴포넌트

// src/components/Header.tsx
import Link from 'next/link';

export default function Header() {
  return (
    <header className="bg-white shadow-sm">
      <nav className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="text-2xl font-bold text-purple-600">
            재능넷 블로그 ✨
          </Link>
          
          <div className="flex items-center gap-6">
            <Link 
              href="/posts" 
              className="text-gray-700 hover:text-purple-600 transition"
            >
              포스트
            </Link>
            <Link 
              href="/posts/new" 
              className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"
            >
              글쓰기
            </Link>
          </div>
        </div>
      </nav>
    </header>
  );
}

포스트 카드 컴포넌트

// src/components/PostCard.tsx
import Link from 'next/link';
import { Post } from '@/types';

interface PostCardProps {
  post: Post;
}

export default function PostCard({ post }: PostCardProps) {
  return (
    <Link href={`/posts/${post.id}`}>
      <article className="border rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer">
        <h2 className="text-2xl font-semibold mb-3 text-gray-900 hover:text-purple-600 transition">
          {post.title}
        </h2>
        
        <p className="text-gray-600 mb-4 line-clamp-3">
          {post.content}
        </p>
        
        <div className="flex items-center justify-between text-sm text-gray-500">
          <div className="flex items-center gap-2">
            {post.author.avatar && (
              <img 
                src={post.author.avatar} 
                alt={post.author.name}
                className="w-8 h-8 rounded-full"
              />
            )}
            <span>{post.author.name}</span>
          </div>
          
          <time dateTime={post.createdAt}>
            {new Date(post.createdAt).toLocaleDateString('ko-KR', {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
            })}
          </time>
        </div>
      </article>
    </Link>
  );
}

포스트 목록 페이지

// src/app/posts/page.tsx
import { Post } from '@/types';
import PostCard from '@/components/PostCard';

async function getPosts(): Promise<Post[]> {
  const res = await fetch('http://localhost:3000/api/posts', {
    next: { revalidate: 60 }
  });
  
  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }
  
  const data = await res.json();
  return data.data;
}

export const metadata = {
  title: '모든 포스트',
  description: '재능넷 블로그의 모든 포스트를 확인하세요',
};

export default async function PostsPage() {
  const posts = await getPosts();
  
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="mb-12">
        <h1 className="text-5xl font-bold mb-4">모든 포스트 📚</h1>
        <p className="text-xl text-gray-600">
          재능넷에서 다양한 지식과 경험을 공유하는 글들을 만나보세요
        </p>
      </div>
      
      {posts.length === 0 ? (
        <div className="text-center py-20">
          <p className="text-2xl text-gray-500 mb-4">아직 포스트가 없어요 😢</p>
          <Link 
            href="/posts/new"
            className="inline-block bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition"
          >
            첫 포스트 작성하기
          </Link>
        </div>
      ) : (
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {posts.map((post) => (
            <PostCard key={post.id} post={post} />
          ))}
        </div>
      )}
    </div>
  );
}

폼 처리와 Server Actions 🎯

Next.js 13.4부터 도입된 Server Actions는 폼 처리를 혁신적으로 바꿨어. 클라이언트 자바스크립트 없이도 폼을 제출할 수 있고, 타입 안정성도 보장돼! 🚀

Server Action 만들기

// src/app/actions/posts.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  // 유효성 검사
  if (!title || !content) {
    return {
      error: '제목과 내용을 모두 입력해주세요',
    };
  }
  
  if (title.length < 5) {
    return {
      error: '제목은 최소 5자 이상이어야 합니다',
    };
  }
  
  try {
    // 데이터베이스에 저장
    const response = await fetch('http://localhost:3000/api/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ title, content }),
    });
    
    if (!response.ok) {
      throw new Error('Failed to create post');
    }
    
    const result = await response.json();
    
    // 캐시 무효화
    revalidatePath('/posts');
    
    // 새 포스트 페이지로 리다이렉트
    redirect(`/posts/${result.data.id}`);
  } catch (error) {
    return {
      error: '포스트 생성에 실패했습니다',
    };
  }
}

export async function updatePost(id: number, formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  try {
    const response = await fetch(`http://localhost:3000/api/posts/${id}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ title, content }),
    });
    
    if (!response.ok) {
      throw new Error('Failed to update post');
    }
    
    revalidatePath(`/posts/${id}`);
    revalidatePath('/posts');
    
    return { success: true };
  } catch (error) {
    return {
      error: '포스트 수정에 실패했습니다',
    };
  }
}

export async function deletePost(id: number) {
  try {
    const response = await fetch(`http://localhost:3000/api/posts/${id}`, {
      method: 'DELETE',
    });
    
    if (!response.ok) {
      throw new Error('Failed to delete post');
    }
    
    revalidatePath('/posts');
    redirect('/posts');
  } catch (error) {
    return {
      error: '포스트 삭제에 실패했습니다',
    };
  }
}

폼 컴포넌트 만들기

// src/components/PostForm.tsx
'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { createPost } from '@/app/actions/posts';

function SubmitButton() {
  const { pending } = useFormStatus();
  
  return (
    <button
      type="submit"
      disabled={pending}
      className={`
        w-full bg-purple-600 text-white py-3 rounded-lg font-semibold
        hover:bg-purple-700 transition
        ${pending ? 'opacity-50 cursor-not-allowed' : ''}
      `}
    >
      {pending ? '작성 중...' : '포스트 작성하기'}
    </button>
  );
}

export default function PostForm() {
  const [state, formAction] = useFormState(createPost, { error: '' });
  
  return (
    <form action={formAction} className="space-y-6">
      {state?.error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
          {state.error}
        </div>
      )}
      
      <div>
        <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
          제목
        </label>
        <input
          type="text"
          id="title"
          name="title"
          required
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"
          placeholder="포스트 제목을 입력하세요"
        />
      </div>
      
      <div>
        <label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-2">
          내용
        </label>
        <textarea
          id="content"
          name="content"
          required
          rows={15}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"
          placeholder="포스트 내용을 입력하세요"
        />
      </div>
      
      <SubmitButton />
    </form>
  );
}

새 포스트 작성 페이지

// src/app/posts/new/page.tsx
import PostForm from '@/components/PostForm';

export const metadata = {
  title: '새 포스트 작성',
  description: '새로운 포스트를 작성하세요',
};

export default function NewPostPage() {
  return (
    <div className="container mx-auto px-4 py-12 max-w-4xl">
      <div className="mb-8">
        <h1 className="text-4xl font-bold mb-4">새 포스트 작성 ✍️</h1>
        <p className="text-gray-600">
          재능넷에서 당신의 지식과 경험을 공유해보세요
        </p>
      </div>
      
      <div className="bg-white rounded-lg shadow-sm border p-8">
        <PostForm />
      </div>
    </div>
  );
}

실전 팁과 베스트 프랙티스 💎

마지막으로 실무에서 유용한 팁들을 공유할게! 🎓

1. 에러 바운더리 활용

// src/app/error.tsx
'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // 에러 로깅 서비스로 전송
    console.error('Error:', error);
    // Sentry, LogRocket 등으로 전송
  }, [error]);

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-3xl font-bold mb-4">앗! 문제가 발생했어요 😢</h2>
        <p className="text-gray-600 mb-6">
          {error.message || '알 수 없는 오류가 발생했습니다'}
        </p>
        <button
          onClick={reset}
          className="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700"
        >
          다시 시도하기
        </button>
      </div>
    </div>
  );
}

2. 로딩 상태 개선

// src/app/posts/loading.tsx
export default function Loading() {
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="animate-pulse">
        {/* 스켈레톤 UI */}
        <div className="h-12 bg-gray-200 rounded w-1/3 mb-8"></div>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="border rounded-lg p-6">
              <div className="h-8 bg-gray-200 rounded mb-4"></div>
              <div className="space-y-2">
                <div className="h-4 bg-gray-200 rounded"></div>
                <div className="h-4 bg-gray-200 rounded"></div>
                <div className="h-4 bg-gray-200 rounded w-2/3"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

3. 타입 안전한 환경 변수

// src/lib/env.ts
import { z } from 'zod';

const envSchema = z.object({
  DATABASE_URL: z.string().url(),
  NEXT_PUBLIC_API_URL: z.string().url(),
  SECRET_KEY: z.string().min(32),
});

export const env = envSchema.parse({
  DATABASE_URL: process.env.DATABASE_URL,
  NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
  SECRET_KEY: process.env.SECRET_KEY,
});

// 이제 env.DATABASE_URL은 타입 안전해!

4. 커스텀 훅 만들기

// src/hooks/useDebounce.ts
import { useEffect, useState } from 'react';

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

// 사용 예시
function SearchComponent() {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 500);

  useEffect(() => {
    // API 호출
    if (debouncedSearch) {
      fetchResults(debouncedSearch);
    }
  }, [debouncedSearch]);

  return (
    <input
      value={search}
      onChange={(e) => setSearch(e.target.value)}
      placeholder="검색..."
    />
  );
}

5. 접근성 고려하기

// 시맨틱 HTML 사용
<article>
  <header>
    <h1>{post.title}</h1>
    <time dateTime={post.createdAt}>
      {formatDate(post.createdAt)}
    </time>
  </header>
  
  <main>
    {post.content}
  </main>
  
  <footer>
    <button aria-label="좋아요">
      ❤️ {post.likes}
    </button>
  </footer>
</article>

// 키보드 네비게이션
<button
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      handleClick();
    }
  }}
  tabIndex={0}
>
  클릭
</button>