Next.js란

@2023/10/15

안녕하세요 lika-7입니다

이번시간에는 Next.js가 무엇인지 정리하겠습니다

Next.JS란 / 사용 이유

• React의 SSR(Server Side Rendering)을 쉽게 구형할수 있도록 도와주는 프레임워크

• React는 라이브러리이고, Next.JS는 프레임워크

• React로 개발 할 때 SPA(Single Page Application)을 이용해 CSR(Client Side Rendering)을 하면 좋은점도 있는데

• 검색엔진 최적화(Search Engin Optimazation) 부분에서 문제가 생깁니다.
  • CSR은 첫페이지에서 빈 html을 가져와 JS파일을 해석하여 화면을 구성하기 때문에 포탈 검색에 거의 노출 안되는 문제가 있습니다.

• 하지만 Next.js에서 Pre-Rendering을 통해 미리 렌더링된 HTML을 가져와 검색 엔진 크롤러에게 렌더링된 페이지를 전달하여 SEO에 대응할수 있습니다.

💡

리엑트에서도 SSR을 지원하지만 Next.js를 통해 구현하는것이 훨씬 쉽기에 Next.js를 사용하는것이 더 유리합니다.

SSR / CSR

이미지 출처: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

SSR (Server Side Rendering)

• 랜더링 위치
  • 서버에서 HTML 컨텐츠를 동적으로 생성하고 클라이언트에 제공합니다.
  • 서버에서 초기 HTML 마크업이 생성되므로, 최초 로드 시에 렌더링된 HTML이 바로 보이며, 검색 엔진이 이를 쉽게 색인화할 수 있습니다.

• 로딩 속도
  • 초기 페이지 로딩 속도가 빠릅니다.
  • 사용자가 페이지에 액세스할 때 모든 컨텐츠가 서버로부터 전달되므로 첫 페이지 로딩은 빠릅니다.

• 검색 엔진 최적화 (SEO)
  • SEO에 유리합니다.
  • 검색 엔진 크롤러가 초기 렌더링된 HTML을 쉽게 읽고 색인화할 수 있습니다.

• 서버 부하
  • 서버에서 페이지 렌더링이 발생하므로 서버 부하가 크게 증가할 수 있습니다.

• 사용자 경험
  • 초기 페이지 로딩은 빠르고 사용자에게 더 나은 성능을 제공합니다.
  • 하지만 페이지 갱신 시에 서버에 재요청이 필요할 수 있어 사용자 경험에 영향을 줄 수 있습니다.

• 캐싱
  • 캐싱이 상대적으로 어렵습니다.
  • 서버에서 동적 렌더링이 이루어지므로, 캐싱 전략을 명확히 해야 합니다.

CSR (Client Side Rendering)

• 랜더링 위치
  • 클라이언트(브라우저)에서 JavaScript를 사용하여 동적으로 화면을 생성합니다.
  • 초기 요청 시에 서버에서는 비어있는 HTML 파일을 반환하고, 브라우저에서 JavaScript를 사용해 페이지의 내용을 렌더링합니다.

• 로딩 속도
  • 초기 페이지 로딩은 빠를 수 있지만,
  • 페이지에서 추가 데이터를 가져와 렌더링해야 하는 경우, 이로 인해 추가 로딩 시간이 필요할 수 있습니다.

• 검색 엔진 최적화 (SEO)
  • 검색 엔진 최적화가 더 어렵습니다.
  • 자바스크립트를 실행해야 페이지 내용을 볼 수 있으므로, SEO를 위해 추가 작업이 필요할 수 있습니다.

• 서버 부하
  • 서버에서는 초기 HTML 파일을 제공하며, 렌더링은 클라이언트 측에서 이루어지므로 서버 부하가 낮을 수 있습니다.

• 사용자 경험
  • 초기 페이지 로딩 이후에 페이지 내비게이션은 빠를 수 있지만,
  • 초기 빈 페이지에서 렌더링되므로 사용자는 페이지 콘텐츠가 나타날 때까지 대기할 수 있습니다.

• 캐싱
  • 클라이언트에서 자바스크립트 및 리소스를 캐싱하는 것이 더 쉬울 수 있습니다.

pre rendering VS non pre rendering

• Next.js로 만들어진 App은 처음에 prerendered 된 것을 표시합니다
  • 그 다음 JavaScript를 로드하여 hydration을 하면 React 컴포넌트를 사용합니다.

• React.js로 만들어진 App은 처음에 아무것도 렌더링 하지 않습니다.
  • 그 다음 JavaScript를 로드하여 hydration을 하면 React 컴포넌트를 사용하여 렌더링을 합니다