SSR, SSG, CSR (feat. NextJS)

23.02.15 공부 정리

Nextjs 로 구현가능한 종류 (Data Fetching)

 

Next.js는 React 기반의 프레임워크로, SSR(Server Side Rendering), SSG(Static Site Generation), CSR(Client Side Rendering) 등의 다양한 페이지 렌더링 방식을 지원합니다. 이번에는 각각의 방식에 대해 알아보도록 하겠습니다.

SSR (Server Side Rendering)

SSR은 서버에서 HTML을 생성하는 방식입니다. 클라이언트가 페이지를 요청하면, 서버에서 해당 페이지의 HTML을 미리 렌더링하여 클라이언트에 전달합니다. 이를 통해 초기 로딩 속도를 개선하고 SEO(Search Engine Optimization)를 최적화할 수 있습니다.

Next.js에서는 getInitialProps 메서드를 사용하여 데이터를 미리 가져올 수 있습니다. 이를 통해 서버에서 렌더링하는 페이지에 필요한 데이터를 미리 로드하여 클라이언트에 제공할 수 있습니다.

SSR은 모든 페이지 요청마다 서버에서 HTML을 생성하기 때문에, 서버의 부하가 증가할 수 있습니다.

SSG (Static Site Generation)

SSG는 미리 정적인 HTML 파일을 생성하는 방식입니다. 서버 측에서 미리 HTML 파일을 생성하여 클라이언트에 전달합니다. 이를 통해 초기 로딩 속도를 개선하고 서버 부하를 줄일 수 있습니다.

Next.js에서는 getStaticProps 메서드를 사용하여 미리 데이터를 가져올 수 있습니다. 이를 통해 미리 생성된 HTML 파일에 필요한 데이터를 삽입하여 정적인 HTML 파일을 생성할 수 있습니다.

SSG는 정적인 페이지에서만 사용할 수 있습니다. 데이터가 자주 변경되는 동적인 페이지에서는 사용하기 어렵습니다.

CSR (Client Side Rendering)

CSR은 클라이언트 측에서 HTML을 생성하는 방식입니다. 서버에서는 빈 HTML 페이지를 전달하고, 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링합니다. 이를 통해 초기 로딩 속도를 개선할 수 있습니다.

CSR은 클라이언트 측에서 HTML을 생성하기 때문에, SEO 최적화가 어렵습니다. 또한, 초기 로딩 속도가 느릴 수 있습니다.

위와 같이, 각각의 페이지 렌더링 방식에는 장단점이 있습니다. Next.js에서는 이러한 페이지 렌더링 방식을 선택할 수 있도록 다양한 기능을 제공합니다. 적절한 방식을 선택하여 사용하면, 더 나은 사용자 경험을 제공할 수 있습니다.

 

+ 덧

ISR (Incremental Static Regeneration)

ISR은 SSG와 SSR의 장점을 결합한 방식입니다. SSG와 비슷하게 미리 정적인 HTML 파일을 생성하지만, 일부 페이지는 지정된 간격으로 업데이트됩니다.

Next.js에서는 revalidate 속성을 사용하여 몇 초 간격으로 페이지를 업데이트할 수 있습니다. 이를 통해 초기 로딩 속도를 개선하고 서버 부하를 줄일 수 있습니다.

ISR은 SSG와 마찬가지로 정적인 페이지에서만 사용할 수 있습니다.

 

 

 

참고 :

https://nextjs.org/docs/basic-features/data-fetching