[Next js] CSR과 SSR 분리하기, supabase 설정

임보라·2024년 10월 23일

CSR React SSR next supabase typescript

Next.js

목록 보기

10/23

우선 이번 프로젝트에서의 목표는 서버사이드 렌더링을 이용한 성능 개선 경험 챙기기와
최대한 클라이언트와 서버를 나눠서 작업하기로 서버의 비중을 최대한 늘려보면서 작업하는걸 목표로 할 것이다.

시작 전 간단히 해야할 부분들을 스텝으로 나누었다.

Step1 (get)
더미데이터 만들기
스템프 모음 > 스탬프 개별 맵으로 뿌리기
컴포넌트 클릭 후 스템프 상세로 넘어가게 링크
스탬프 아이디 가진 정보 가져와서 상세에 펼치기

Step2 (get)
더미데이터 기반 전체스탬프 뿌려주기
최근 얻은 스탬프 날짜기반 뿌리기 (임의 1달)

Step3 (post)

SSR / CSR 분리하기 2가지 방법

메인페이지 SSR / CSR컴포넌트 추가로 생성하여 연결하기
서버엑션으로 비동기함수 빼서 메인페이지에 임폴트로 연결 후 메인페이지를 CSR환경으로 만들어 useQuery사용하기

1번째방법

fetchPlayList.ts(서버엑션)

import browserClient from "@/utils/supabase/client";

const fetchList = async () => {
    const { data, error } = await browserClient.from("stamp").select("*").eq("user_id", userId);
    if (error) console.error("가져오기 오류:", error.message);
    return data;
  };

page.tsx(SSR)

import StampList from '@/components/stamp/StampList';

const StampAll = () => {
  return (
    <div className="p-[24px]">
      <h3>최근에 얻은 스탬프</h3>
      <h3>전체 스탬프</h3>
      <StampList />
    </div>
  );
};
export default StampAll;

StampList.tsx(CSR)

'use client';

import React from 'react';
import StampItem from '@/components/stamp/StampItem';
import { useQuery } from '@tanstack/react-query';
import browserClient from '@/utils/supabase/client';
const userId = '61ee6ebf-ec4f-4f81-9115-be57f6d3a97e'; //임시 로그인유저

//로그인유저의 스템프 항목 전부 가져오기
const fetchStampList = async () => {
  const { data, error } = await browserClient.from('stamp').select('*').eq('userid', userId);
  if (error) {
    console.error('가져오기 오류:', error.message);
  } else {
    console.log('가져온 데이터:', data);
  }
  return data;
};

const StampList = () => {
  const {
    data: stampList,
    isLoading,
    error
  } = useQuery({
    queryKey: ['stamp'], //고유키
    queryFn: fetchStampList
  });
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;

  return (
    <ul className="grid grid-cols-2 gap-4">{stampList?.map((stamp) => <StampItem key={stamp.id} stamp={stamp} />)}</ul>
  );
};

export default StampList;

2번째방법

fetchPlayList.ts(서버엑션)- 동일
page.tsx(CSR)

'use client';

import React from 'react';
import StampItem from '@/components/stamp/StampItem';
import { useQuery } from '@tanstack/react-query';
import browserClient from '@/utils/supabase/client';
const userId = '61ee6ebf-ec4f-4f81-9115-be57f6d3a97e'; //임시 로그인유저

//로그인유저의 스템프 항목 전부 가져오기
const fetchStampList = async () => {
  const { data, error } = await browserClient.from('stamp').select('*').eq('userid', userId);
  if (error) {
    console.error('가져오기 오류:', error.message);
  } else {
    console.log('가져온 데이터:', data);
  }
  return data;
};

const StampList = () => {
  const {
    data: stampList,
    isLoading,
    error
  } = useQuery({
    queryKey: ['stamp'], //고유키
    queryFn: fetchStampList
  });
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;

  return (
    <ul className="grid grid-cols-2 gap-4">{stampList?.map((stamp) => <StampItem key={stamp.id} stamp={stamp} />)}</ul>
  );
};

export default StampList;

수퍼베이스가 안불러지는 문제

1. 코드에서 client.ts 값 넣어주기

import { createBrowserClient } from '@supabase/ssr';
import { SupabaseClient } from '@supabase/supabase-js';

export const createClient = (): SupabaseClient =>
  createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!);

const browserClient: SupabaseClient = createClient();

export default browserClient;