Next.js 13에서 서버 컴포넌트와 클라이언트 컴포넌트 fetch 요청

Node.js 쪽에서, 로그인이 되어있지 않은 상태에서 http://localhost:3000/write 페이지로 접근하려고 할때, 에러메세지를 띄어주고 싶었다.

- checkLoggedIn.js

const HttpError = require("../error/http-error");

const isLoggedIn = (req, res, next) => {
  // 로그인 된 사람들만 접근할수 있도록
  if (req.isAuthenticated()) {
    next();
  } else {
    const error = new HttpError("로그인이 필요합니다.", 403);
    return next(error);
  }
};

const isNotLoggedIn = (req, res, next) => {
  // 로그인 안된 사람들만 접근 할 수 있도록
  if (!req.isAuthenticated()) {
    next();
  } else {
    const error = new HttpError("이미 로그인하신 상태입니다.", 403);
    return next(error);
  }
};

exports.isLoggedIn = isLoggedIn;
exports.isNotLoggedIn = isNotLoggedIn;

-Page.tsx 코드 (서버컴포넌트)

import Write from "components/Write/Write";

export default async function Page() {
  const response = await fetch("http://localhost:3002/api/user/write");

  if (!response.ok) {
    const data = await response.json();

    console.log(data.message);
  } else {
    console.log(response.status);
  }
  return (
    <>
      <Write />
    </>
  );
}

여기서는 정상적으로 정상적으로 요청 됐다는 200코드가 계속 나왔다.

- Write.tsx 코드 (클라이언트 컴포넌트)

"use client";

import { useEffect } from "react";

export default function Write() {
  useEffect(() => {
    const getWrite = async () => {
      try {
        const response = await fetch("http://localhost:3002/api/user/write", {
          credentials: "include",
        });

        if (!response.ok) {
          const data = await response.json();

          console.log(data.message);
        }
      } catch (err) {}
    };

    getWrite();
  }, []);

  return <div>Write</div>;
}

여기선 서버쪽에서 설정한 403 코드가 나와서 정상적으로 에러메세지가 나왔다.

서버컴포넌트는 서버쪽에서 실행되는 컴포넌트인데, 서버 컴포넌트 내에서 fetch 요청 자체는 성공적으로 이루어지기때문에 200 코드를 반환하는것이다.

그리고 저 Node.js 쪽에서 작성해놓은 코드는 클라이언트측에서 요청이 들어왔을때 실행할 미들웨어이기 때문에, 서버컴포넌트에서 fetch 요청을 해도 미들웨어가 실행되지 않는다.

서버컴포넌트에서는 클라이언트 컴포넌트측에서 fetch 요청을 통해 받아온 데이터를 받아서 렌더링 하는 방향으로 코드 작성을 해야한다.

아니면 api 에서 사용하는 함수를 호출해서 데이터를 받아와야한다.