컴포넌트에서 이미지를 출력

1. 클라이언트 컴포넌트에서 이미지 출력 하기

https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side

- 함수만 모아 놓은 파일.ts

import { createClient } from "@/utils/supabase/client";

const supabase = createClient();

export async function fetchImageUrl(){
    const { data } = await supabase.storage
      .from("img")
      .getPublicUrl("select/test1.png");
     
      return data.publicUrl;
  };

 

- 클라이언트 컴포넌트(페이지 라우터일 경우swr사용)

'use client';

import useSWR from 'swr'
import { fetchImageUrl } from '@/lib/function';

export default function LoginPageImg() {
  
  const fetcher = () => fetchImageUrl();

  const { data, error } = useSWR('image', fetcher);
    if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <div>
      <img src={data} alt='이미지'/>
    </div>
  )
}

 

클라이언트 컴포넌트에서 이미지를 출력 했는데 서버컴포넌트로 변경 했음

클라이언트 컴포넌트가 많으면 nextjs를 한 의미가 없는거 같아서

 

2. 서버 컴포넌트

형식1

- 함수만 모아 놓은 파일.ts 동일

import { fetchImageUrl } from '@/lib/function';

export default async function LoginPageImg() {
  const fetcher = await fetchImageUrl();

  return (
    <div>
      <img src={fetcher} alt='이미지'/>
    </div>
  )
}

 

형식2

- https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props