와블로그Wablog

NextJS가 뭘까?

September 18, 2022

next.js 로고

Next.js란?

 vercel팀에서 만든 React Framework로 주요 장점으로는 SSR/SSG, SEO, 동적 라우팅 등이 있다.

장점

 사용하는 여러가지 장점들이 있지만, 그중에서도 핵심이라고 생각되는 3가지 장점을 소개한다. 더 많은 내용은 NextJS 공식 홈페이지에서 확인할 수 있다.

SSG/SSR

 두 방식 모두 클라이언트 단에 처음부터 서버에서 만들어진 HTML을 그려줄 수 있다는 공통점이 있다.

  • SSG(Static Site Generation) SSG description image  빌드 시간에 만들어진 HTML을 요청에 따라 재사용한다. (블로그, 마켓팅 사이트 등 요청에 따라 응답이 매번 변화하지 않는 사이트에 사용)
  • SSR(Server Side Rendering) SSR description image  요청에 따라 그때그때 HTML을 생성한다. (실시간으로 요청에 따라 응답이 다른 사이트에 사용)

SEO(Search Engine Optimization)

 구글 검색창에 검색어를 입력하고 엔터를 눌렀을 때, 검색 결과가 나오는 과정은 다음과 같다.

Google bot
  • 크롤러가 페이지 데이터를 추출한다.
  • 기준에 따른 순위를 세운다.
  • 순위에 따른 검색 결과를 노출한다.

 검색 엔진을 최적화하기 위해서는 다음과 같은 내용을 고려해야한다. (링크 참고)

  • title 및 meta 태그를 때에 따라 알맞게 수정
  • 시멘틱 마크업 작성
  • 사용자가 원하는 콘텐츠 작성(콘텐츠 최적화) 등

👀 리액트와의 차이점

React description

React

  • 처음에 빈 페이지 렌더 → SEO 문제 발생
  • JS가 로드 된 후, 리렌더링
Next description

Next

  • 처음에 서버에서 만들어진 HTML 렌더
  • JS가 로드 된 후, 인터랙티브 컴포넌트만 활성화 작업

⇒ 각 1번의 이유로 실행속도에서도 많은 차이가 남

** React의 SEO 문제를 극복하기 위한 노력**

 React 사용자들은 이러한 문제를 해결하기 위해 React-helmet이라는 라이브러리를 사용한다.

💡 **React-helmet이란?**

 React에서 head 태그 내부요소(title, meta 태그 등)를 동적으로 변경하기 위해 사용하는 라이브러리

=> 그래서 대부분 안정적인 SEO 지원을 위해, SSR, SSG 렌더링 방식을 지원하는 프레임워크를 사용한다.

 React 프레임워크로는 Next, Gatsby, Remix 등이 있다. 개발자들은 어떤 프레임워크를 선호하나 궁금해서 찾아봤는데 인기차트를 보니 Next가 현재로서는 압도적인 인기를 끌고 있는 것을 볼 수 있었다. 대박..!

동적 라우팅

  • React에서는 React-router-dom와 React.lazy등을 이용해 구현
  • Next에서는 기본 제공
    • pages 폴더 아래에 폴더 또는 파일을 만들 경우 경로를 생성
    • 경로가 pages/file/[id]일 경우, file/123152413

실제로 사용해보면 Next가 훨씬 간단하다.

🐴 주저리

 Next를 조사하고 정리하는 과정에서 이 블로그를 만들었는데, 아직 Next에서 제공해주는 장점들을 100% 활용하지는 못한 것 같다. 앞으로 사이드 프로젝트를 몇 가지 진행하면서 이용해보고 더 좋은 점이 있으면 포스팅 할 계획이다. 사이드 프로젝트를 진행하려고 하는 이유는, 신기술을 접하는 건 늘 새롭고 재밌지만, 한 편으로는 정보의 양이 방대해서 어떤 게 맞고 어떤 게 틀린지 판단하는 게 조금 힘든 것 같다. 그래서 직접 겪어보면서 깨닫는 게 제일 나은 것 같다는 결론을 내렸다.

결론: 다들 Next 한 번 잡솨보세요!