SEO 최적화를 위해서는 getServerSideProps가 나은 방법인가요?

[변준성]

안녕하세요 선생님 질문이 있어서 글남깁니다! 
Next.js의 대표적인 장점으로 SEO 최적화라고 배웠습니다. 서버에서 이미 완성된 HTML을 제공하기 때문에 검색엔진이 더 크롤링을 잘해서 
그렇다고 이해했습니당. 근데 제가 데이터 입출력하는 코드를 page/api 폴더에 서버 코드를 짜고 프론트엔드는 useEffect를 사용해서
데이터를 가져오는거로 코드를 짰는데요,, useEffect는 HTML 렌더링이 다 끝나고 작동하기 때문에 SEO에는 안좋지 않을까 하는 의구심
이 들어서 챗지피티한테 물어보니까 SEO 최적화를 위해서는 getServerSideProps를 사용하는걸 권장하더라고요,, 
다음은 챗지피티가 보내준 예시 코드입니당
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient('https://your-supabase-url', 'your-anon-key');
// getServerSideProps에서 직접 DB에 접근하여 데이터를 가져옴
export async function getServerSideProps() { 
  const { data: products, error } = await supabase 
         .from('products') 
         .select('*');
  if (error) { 
   return { 
      props: { 
         products: [], 
      }, 
  }; 
 }
 return { 
      props: { 
            products, 
      }, 
  }; 
 }

function ProductsPage({ products }) { 
   return ( 
      <div> 
         <h1>Products</h1> 
         <ul> {products.map((product) => ( <li key={product.id}>{product.name}</li> ))} </ul> 
       </div> ); 
  } 
export default ProductsPage;

여기서 질문드리고싶은데, DB 입출력하는 코드는 보안상의 이유로 page/api 폴더에서 관리하지않나요? 저 코드는 서버에서만 돌아가
기때문에 유저에게 보여질 일이 절대 없을거라고 지피티쿤이 그러긴하는데 확인받고싶습니다! Next.js에서 원래 useEffect보다는 
getServerSideProps가 더 권장되는 방법인가요?

[codingapple]

getServerSideProps는 pages폴더에 페이지들 만들때 쓰는 문법이고
app폴더면 서버컴포넌트에서 DB입출력문법 써서 미리 채워서 보내면 됩니다

[변준성]

기본적으로 서버 컴포넌트만들고 서버 컴포넌트안에서 useEffect를 사용하는 클라이언트 컴포넌트를 import해서 사용하라는 얘기신거죠??

[codingapple]

seo에 중요한 내용들은 서버컴포넌트에서 db 출력해서 채우거나
클라이언트 컴포넌트 쓸거면 db출력결과를 props로 보내서 채우거나 하면 됩니다

[글쓴이]

글