SSR(Server-Side Rendering)에서 뮤테이션(Mutation)은 언제 사용할까?

📌 뮤테이션(Mutation)이란?

뮤테이션(Mutation)은 데이터를 변경하는 작업(쓰기 작업, POST, PUT, DELETE 요청 등)에 사용됩니다.

즉, 사용자의 액션(예: 게시글 수정, 좋아요 클릭, 댓글 작성 등)에 의해 데이터가 변경될 때 뮤테이션을 활용할 수 있습니다.

일반적으로 SSR(Server-Side Rendering)을 사용할 때는 초기 데이터를 서버에서 가져와 렌더링하기 때문에,

클라이언트에서 직접 상태를 변경할 필요가 적습니다.

하지만, 즉각적인 UI 반영이 필요한 경우에는 클라이언트에서 뮤테이션을 활용하는 것이 더 좋은 선택이 될 수 있습니다.

---

📌 1. 뮤테이션을 사용하면 좋은 경우

✅ 1) 사용자의 액션이 즉각적으로 UI에 반영되어야 할 때

SSR을 사용할 때는 보통 getServerSideProps()를 이용하여 데이터를 서버에서 가져오지만,

사용자의 클릭 이벤트(좋아요, 댓글 작성 등)가 있을 때는 서버의 응답을 기다리지 않고 UI를 먼저 업데이트하는 방식이 더 빠릅니다.

📌 예제: 게시글 좋아요 수 업데이트

javascript
코드 복사
import { useState } from "react";
import axios from "axios";

const Post = ({ initialLikes, postId }) => {
  const [likes, setLikes] = useState(initialLikes);

  const handleLike = async () => {
    setLikes(likes + 1); // ✅ UI에서 즉시 반영
    await axios.post(`/api/posts/${postId}/like`); // ✅ 백엔드에 요청
  };

  return (
    <div>
      <p>좋아요 {likes}개</p>
      <button onClick={handleLike}>좋아요</button>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const response = await axios.get(`/api/posts/${params.postId}`);
  return { props: { initialLikes: response.data.likes, postId: params.postId } };
}

export default Post;

✅ SSR로 데이터를 가져오지만, 사용자가 클릭하면 UI가 즉시 업데이트됨!

✅ 서버 응답을 기다리지 않고 먼저 상태를 변경한 후, API 요청을 보낼 수 있음

---

✅ 2) SSR을 사용하지 않는 페이지에서 API 데이터를 변경할 때

Next.js에서 getStaticProps() 또는 useEffect()를 사용하는 페이지에서는 뮤테이션을 활용하는 것이 더 적합합니다.

API 데이터를 클라이언트에서 가져와 사용하고, 변경 작업을 할 때 뮤테이션을 사용하면 빠른 UX를 제공할 수 있습니다.

📌 예제: 사용자 프로필 업데이트

javascript
코드 복사
import { useState, useEffect } from "react";
import axios from "axios";

const Profile = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    axios.get("/api/user/me").then((response) => {
      setUser(response.data);
    });
  }, []);

  const handleUpdateProfile = async () => {
    setUser({ ...user, name: "새로운 이름" }); // ✅ UI에서 즉시 반영
    await axios.put("/api/user/update", { name: "새로운 이름" }); // ✅ 백엔드에 요청
  };

  return (
    <div>
      <h2>사용자 프로필</h2>
      <p>이름: {user?.name}</p>
      <button onClick={handleUpdateProfile}>프로필 수정</button>
    </div>
  );
};

export default Profile;

✅ API 데이터를 클라이언트에서 가져오고, UI에서 즉시 변경해야 할 때 뮤테이션이 유용합니다.

---

✅ 3) React Query의 useMutation()을 활용한 상태 업데이트

React Query나 Apollo Client를 사용하면 useMutation()을 활용해서 상태 변경을 효율적으로 관리할 수 있습니다.

📌 React Query의 useMutation()을 활용한 게시글 삭제

javascript
코드 복사
import { useMutation, useQueryClient } from "react-query";
import axios from "axios";

const PostList = () => {
  const queryClient = useQueryClient();

  // ✅ 게시글 삭제 API 요청
  const deletePostMutation = useMutation((postId) => axios.delete(`/api/posts/${postId}`), {
    onSuccess: () => {
      queryClient.invalidateQueries("posts"); // ✅ 데이터 다시 불러오기
    },
  });

  const handleDeletePost = (postId) => {
    deletePostMutation.mutate(postId);
  };

  return (
    <div>
      <button onClick={() => handleDeletePost(1)}>게시글 삭제</button>
    </div>
  );
};

✅ React Query를 활용하면 API 요청 후 자동으로 UI 상태를 업데이트할 수 있습니다.

✅ SSR과 함께 사용할 수도 있지만, 클라이언트 상태 관리를 쉽게 만들 때 유용합니다!

---

📌 2. 뮤테이션을 사용하지 않는 게 좋은 경우

❌ 1) SSR로 데이터를 불러오고, UI에서 즉시 변경할 필요가 없는 경우

SSR을 활용하면 이미 서버에서 최신 데이터를 불러오기 때문에 클라이언트에서 굳이 뮤테이션을 사용하지 않아도 됩니다.

예를 들어 로그인 페이지에서 사용자 정보를 받아오는 경우에는 SSR이 더 적합합니다.

📌 SSR 기반 로그인 페이지

javascript
코드 복사
import { getUserInfo } from "../services/restApi";

const LoginPage = ({ user }) => {
  return (
    <div>
      <h2>로그인 성공!</h2>
      <p>사용자 이름: {user?.name}</p>
    </div>
  );
};

// ✅ 서버에서 로그인된 사용자 정보를 가져옴
export async function getServerSideProps() {
  const user = await getUserInfo();
  return { props: { user } };
}

export default LoginPage;

✅ SSR을 활용하면 로그인 정보를 가져오고, 별도의 뮤테이션 없이 페이지를 렌더링할 수 있습니다.

---

❌ 2) 데이터가 자주 변경되지 않는 경우

데이터가 자주 업데이트되지 않는 경우에는 SSR을 통해 한 번만 데이터를 가져오고, 이후 API 요청 없이 그대로 유지하는 것이 더 좋습니다.

예를 들어 사이트의 공지사항, 설정 정보 같은 것들은 SSR로 한 번만 받아오면 충분합니다.

📌 공지사항을 SSR로 불러오기

javascript
코드 복사
import { getAnnouncements } from "../services/restApi";

const Announcements = ({ announcements }) => {
  return (
    <div>
      <h2>공지사항</h2>
      <ul>
        {announcements.map((item) => (
          <li key={item.id}>{item.message}</li>
        ))}
      </ul>
    </div>
  );
};

// ✅ 공지사항은 SSR로 한 번만 불러오면 됨
export async function getServerSideProps() {
  const announcements = await getAnnouncements();
  return { props: { announcements } };
}

export default Announcements;

✅ 공지사항 같은 정적인 데이터는 SSR을 활용하는 것이 더 적합합니다.

---

🚀 최종 정리: 뮤테이션 vs SSR, 언제 사용해야 할까?

사용 방식	언제 사용?	예제
SSR (getServerSideProps)	페이지 최초 로딩 시, 서버에서 최신 데이터를 가져올 때	로그인된 사용자 정보 가져오기, 공지사항
클라이언트 상태 변경 (useState)	UI에서 즉시 반영이 필요할 때	좋아요 버튼 클릭, 댓글 입력
뮤테이션 (useMutation())	API 요청 후 자동으로 UI 상태를 업데이트할 때	게시글 삭제, 설정 변경

---

📌 결론: SSR에서는 뮤테이션보다 API 호출을 활용하는 것이 더 좋다!

✔️ SSR을 사용하면 데이터를 서버에서 최신 상태로 유지하므로, 클라이언트에서 뮤테이션을 사용할 필요가 없습니다!

✔️ 하지만, 사용자 인터랙션이 많고 즉시 반영이 필요한 데이터는 뮤테이션을 사용하면 더 좋은 UX를 제공할 수 있습니다!