Next.js[주요 기능1: 내장 서버 측 렌더링(SEO 향상!)]

이유정·2023년 2월 14일
0

Redux, Next.js, TypeScript

목록 보기
13/18

Next.js

  • 서버 사이드 렌더링 내장
    : 페이지 콘텐츠를 클라이언트가 아니라 전적으로 서버에서 준비하는것
    : 서버에서 해당 페이지를 사전 렌더링한 상태에서 서버에 요청이 들어왔을 때 해당 데이터를 서버에서 가져오면 완성된 페이지가 사용자와 검색 엔진 크롤러에 제공된다.
    = 서버에서 React 컴포넌트를 사전 렌더링할 수 있게된다.

=> 사용자는 깜빡이는 로딩 상태를 보지 않아도 된다.
=> 검색 엔진도 해당 페이지 콘텐츠를 보게 된다.

  • 추가 설정을 하지 않고도 페이지에 방문했을 때 서버에서 기본적으로 바로 사전 렌더링을 한다.
    => 사용자에게 더 나은 초기 로딩 환경을 제공한다.
    => 검색엔진 최적화에 너무 좋다.

중요한 점은 Next.js를 이용하면 초기 요청으로 읽어 들인 후에도 여전히 브라우저에서 기본 React 앱과 기본 싱글 페이지 애플리케이션을 실행할 수 있다는 사실 !!!!

사용자가 페이지 후속 탐색하는 활동들은 모두 브라우저에서 React가 관리해 사용자에게 빠른 대화형 인터페이스를 제공할 수 있다. : 일반적으로 React에서 제공하고자 하는 것

React 프로젝트를 구축할 때 ReactJS만 쓰기보단 NextJS를 써야할 강력한 이유이다.

profile
팀에 기여하고, 개발자 생태계에 기여하는 엔지니어로

0개의 댓글