3줄요약
1. pre-rendering
2. SSG
3. SSR
Next.js를 사용하기 위해서는 어떻게 데이터를 받아오는지 이해해야하고,
SSR, SSG에 대한 기본적인 이해도가 필요해서 그 부분에 대해서 알아보았다.
https://www.daleseo.com/spa-ssg-ssr/
https://han-py.tistory.com/489
위 두 글을 참고해서 작성하였다.
1. pre-rendering이란
Nextjs의 기본은 pre-renders이다. pre-render란 페이지에서 js를 우선하는게 아니라, HTML을 미리 만드는 것을 말한다. 따라서 더 좋은 성능과 SEO를 기대할 수 있다. 이때 생성된 HTML은 최소한의 javascript 코드와 연결된다. 그 후에 브라우저가 로딩될 때 남은 javascript가 페이지와 상호작용하면서 페이지가 render 된다. 이러한 개념은 hydration이라는 개념이라고 부르기도 한다.
정리하면, SSG는 빌드 시에 HTML을 만들고 각각의 요청 시 재사용한다. 그리고 SSR을 각각의 요청 시에 html을 만든다. 이러한 두 가지 방법을 Nextjs에서 제공을 한다. 기본적으로 SSG가 SSR보다 높은 성능을 가지기 때문에 SSG를 사용하는 것이 좋다. 하지만 상황에 따라 SSR을 사용하는 것이 좋을 때가 있다. CSR의 경우는 SSG나 SSR 내부에서 필요시 포함시켜 사용을 하면 된다. 조금 더 디테일하게 알아보자.
2. SSG
SSG 데이터 처리 방식
react에서는 useEffect통해 데이터를 가지고 온다. 그러나 여기서는 useEffect를 사용하면 SSG로 작동하지 않는다. Nextjs에서 SSG를 하려면, Nextjs에서 제공하는 getStaticProps나 getStaticPaths를 사용한다.
getStaticProps: 데이터 내용을 가져올 때 사용함
getStaticPaths: Param 데이터를 받아올 때 사용함
3. SSR
기본적으로 Server-side Rendering은 SSR이나 Dynamic Rendering이라고도 부른다. SSR을 사용하면 매 요청마다 HTML 페이지가 생성된다. 이러한 SSR을 사용하기 위해서는 매 요청마다 서버에 의해 호출되는 getServerSideProps 함수를 export 하는 것이 필요하다.
4. 정리
SSG와 SSR 정리
우리는 위에서 Nextjs에서 사용하는 pre-render 방식인 SSG와 SSR에 대해 알아보았다. SSG(Static site Generation)의 경우에는 빌드 시에 HTML이 생성되고, 매 요청마다 재사용을 한다. getStaticProps와 getStaticPaths를 통해 만들기가 가능하며, 요청 이전에 미리 렌더링 하는 페이지에 적합하다. SSG보다 SSR이 느리기 때문에 필요할 때만 사용하는 것이 좋다.
중간에 필요한 데이터가 있다면 CSR을 통한 useEffect로 가져오기도 가능하다고 한다.
오늘 공부를 통해서 Next.js rendering 방식에 대해 정리하였다.
다음에는 Next가 가지고 있는 몇가지 장점들에 대해 더 찾아보겠다.
