암 온 더 Next.js Level
이게 뭔데 씹덕아
Next.js를 간단하게 설명하자면 Vercel에서 만든 React의 프레임워크이다.
기존 SPA에서는 사용하기 힘든 SSR과 SSG 그리고 써보진 않았지만 ISR까지 지원해준다.
SSR ? 그거 옛날꺼 아님 ?
나처럼 응애 개발자들은 SSR이 옛날 JSP로 웹 개발을 할 때 사용한 구시대의 산물로 오해 할 수 있다.
하지만 CSR의 단점을 보완해 줄 엄청난 녀석이 SSR이다.
CSR은 클라이언트에서 빈 HTML에 자바스크립트를 동작시켜 렌더링 하는 형식이다.
이렇게 되면 SEO(검색 엔진 최적화)에 취약 할 수 밖에 없다.
SEO에 대해서는 조금 뒤에 알아보도록 하고
여하튼 저 SEO가 중요한 도메인을 서비스하는 회사들은 SSR 즉 Next.js를 사용해야만 한다.
SEO
SEO란 검색 엔진 최적화라는 뜻을 가진 Search Engine Optimization의 약자이다.
이 검색엔진최적화는 구글과 같은 검색 사이트의 노출이 잘 되도록 하는 역활을 해준다.
그치만 SEO를 해야하는 서비스 회사가 있고 굳이 필요 없는 회사가 있다.
예를 들어 내가 근무하는 회사의 도메인이 내부적으로 사용되는 데이터 시각화를 하는 웹이라면
굳이 검색엔진최적화가 필요없다. 내부적으로 사용하는 웹이 구글에 나오지 않으니 말이다.
하지만 이커머스 회사나 광고의 목적을 둔 회사라면 나의 사이트가 검색 사이트 최상단에 띄워진다면
사용자들이 우선적으로 나의 사이트를 방문하게 될 것이다.
낯설지만 익숙한 너.
리액트의 프레임워크라 리액트 문법을 그대로 사용하기 때문에 리액트를 사용한 사람이라면
넥스트의 러닝커브는 그렇게 높지 않을 거 같다.(실제로 써보니 써볼만은 함)
SSR 사용법
export default function Test({ 대충데이터 }) {
return (
<>
<대충 컴포넌트 대충데이터={대충데이터} />
</>
);
}
export const getServerSideProps = async () => {
const res = await axios.get('대충 URL');
return {
props: { dateTime: res.data.대충데이터},
};
};위와 같이 getServerSideProps라는 함수를 선언하고 export를 해주고 함수 내에서
axios로 데이터를 받아오고 props를 리턴해주면 끝이다.
리턴 된 props는 컴포넌트의 props로 사용할 수 있게 된다.
SSG 사용법
export default function Test({ 대충데이터 }) {
return (
<>
<대충 컴포넌트 대충데이터={대충데이터} />
</>
);
}
export const getStaticProps = async () => {
const res = await axios.get('대충 URL');
return {
props: { dateTime: res.data.대충데이터},
};
};SSR과 다른점은 getStaticProps를 사용한다는 점이다.
🤨: 이 양반아 SSG가 뭔지 설명은 해야지
SSG는 Static Site Generation의 약자이다.
이는 서버에서 정적인 데이터를 받아와 미리 렌더링하는 역활을 한다.
Next.js는 기본적으로 Pre-Rendering이라는 걸하는데 기존 CSR의 방식처럼
빈 HTML에서 자바스크립트를 동작시키는 것이 아니라 이미 만들어진 HTML을 보내준다.
이거 자체로도 일단 SEO 반은 먹고 들어갈 거 같다.
SSG는 서버 데이터를 불러와 정적인 페이지를 생성하도록 한다.
그치만 페이지가 빌드 하기 전에 미리 생성되어 서버 데이터의 변화를 반영하지 못한다.
느낀점
이 외에도 파일명이 path로 사용이 가능하며 CRA와 같이 초반 개발 셋팅이 되어있어 더더욱 편리하게 만들어졌다.
또한 React-router-dom에서 사용한 Link 또한 Next/Link로 사용하여 CSR도 Next.js에서 사용이 가능하도록 되어있다.
기본적인 Next.js 사용을 해보았는데 주로 검색엔진이 중요한 도메인에서 사용이 되고 있으며 개발자들은 Next.js를 사용하여 개인 블로그도 만들고 계신다.
화장품 오픈API를 사용하여 기본적은 Next.js의 SSR과 SSG를 사용해보았는데 리액트 기반의 프레임워크라 친숙한 느낌이 들었고 편리했다.
다음에 사용할 기회가 온다면 공식문서를 조금 더 깊게 공부 할 생각이다.
