이 글의 발단은 이전에 써놨던 노션을 정리하던 도중 왜 저렇게 제목을 지은지 모르겠는 글에서 시작되었다.
내가 저렇게 충격받은 이유가 뭔가 하니... NextJs 개발 초기에 이것저것 찾아보던 도중 nextjs 를 검색하면 가장 많이 나오는 SSR 즉, 서버사이드 랜더링에 대해 공부하고 적용해보다가 react의 훅을 사용하려면 컴포넌트에 무조건 'use client'를 사용해야한다. 는 점에 의문이 생겼다.
"...? 엥? 서버사이드 랜더링의 장점이 데이터를 미리 html위에 뿌려주고 있기 때문에 검색엔진에 노출되기 쉽다그랬는데.. use client 를 사용하면 SSR의 장점이 없어지잖아..?? "
에서 뻗어 나갔고 이것저것 검색을 해 보던중 충격적인 사실을 알게되었다. 여태껏 데이터를 받아오면 해당 데이터를 useState로 받아서 화면에 뿌려주기만 했었던 나에겐 신선한 충격이 아닐수 없었던 것이다.
import axios from 'axios';
import Head from 'next/head';
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react';
import { Loader } from 'semantic-ui-react';
import Item from '../../src/component/Item';
const Post = ({item}) => {
return (
<>
<Head>
<title>{item.name}</title>
<meta name="description" content={item.description}></meta>
</Head>
{item && <Item item={item} />}
</>
);
};
export default Post;
export async function getServerSideProps(context){
const id=context.params.id;
const apiUrl=`http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
const res=await axios.get(apiUrl);
const data=res.data;
return{
props:{
item:data,
},
};
}위 예시를 보면..! useState로 데이터를 받아 state값을 뿌려주는 것이 아닌 서버에서 내려온 데이터를 props로 그대로 뿌려주는것을 볼 수 있었다..!! 저렇게 서버데이터를 받아와야지만 서버사이드에서 랜더링 시에 검색 노출이 높아지는 거시다...!...! 0ㅇ0!!!!(나만 충격일수도..ㅜ.ㅜ)
나자식 어디가서 SEO 최적화를 높이기 위해서 NextJS 써봤다고 하지말어라!
좋아하는걸 배우는건 신나🎵