토픽 소개
클라이언트-사이드 렌더링의 단점
클라이언트-사이드 렌더링은 초기 로딩이 느리고 검색 엔진에 제공할 수 있는 정보가 적다는 단점이 있습니다. 이런 단점을 극복하기 위해 프리-렌더링(pre-rendering)을 사용합니다.
프리 렌더링
프리 렌더링이란 일반적으로 웹 페이지를 서버 측에서 렌더링하고, 사용자가 요청할 때 이미 생성된 HTML을 전송하는 프로세스를 나타냅니다.
React와 같은 JavaScript 프레임워크에서는, 클라이언트 측 렌더링이 일반적이지만, 이는 브라우저가 JavaScript를 로드하고 실행할 때까지 사용자가 페이지를 볼 수 없게 만듭니다. 이를 해결하기 위해 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)과 같은 전략이 사용됩니다.
- 서버 사이드 렌더링(SSR): 이는 React 애플리케이션을 서버에서 렌더링하는 것을 의미하며, 이를 통해 사용자는 서버로부터 완전히 렌더링된 페이지를 받을 수 있습니다. 이는 특히 초기 로딩 시간을 줄이고 SEO를 향상하는 데 유용합니다.
- 정적 사이트 생성(SSG): 이는 빌드 시간에 페이지를 렌더링하는 것을 의미합니다. 각 요청에 대해 동적으로 페이지를 렌더링하는 대신, 모든 페이지가 미리 생성되어 서버에 배포됩니다. 이는 SSR보다 더 빠르고, 캐싱 등의 이점이 있습니다.
이 두 접근법 모두 "pre-rendering"에 속합니다. 이는 브라우저에서 React 코드를 실행하기 전에 페이지의 일부 또는 전체를 렌더링하므로, 사용자는 더 빠르게 유용한 페이지를 볼 수 있습니다. 이러한 방법은 React 앱의 성능을 향상시키고, SEO를 개선하며, 사용자 경험을 향상시키는 데 도움이 됩니다.
Next.js의 장점
- 프리렌더링을 자동으로 해줍니다.
- Vercel이라는 호스팅 서비스로 쉽고 빠르게 배포할 수 있고, Next.js에 최적화된 서버를 이용할 수 있습니다.
- 파일 시스템 기반 라우팅을 제공하여 편하게 페이지를 나누고 개발할 수 있습니다.
Feedback
- 코드잇 콘텐츠 강의에서는
create-next-js로 프로젝트를 생성하고 CSS Modules를 사용하고 있다. TypeScript, 다른 라이브러리들과 CSS 기술들을 콘텐츠 강의가 끝난 후 Next.js와 함께 활용해보자.
Reference
job's done