개요
요새 Next.js에 대해서 공부하다가, '이거는 React 처음 배울 때 같이 배우고 썼어야 했구나' 같은 생각을 하고 있다.
물론 Next.js라는 이름을 들은적은 있다. 왜 이걸 배워야 하는가? 하는 글도 읽었었다. 근데 그 때의 나는 별 관심이 없었나보다.
그래서 Next.js 프로젝트를 시작하기 전에 이것을 배워야 하는 이유를 정리하는 시간을 가져볼 것이다.
왜 Next.js 인가?
1. SEO를 잘 한다.
1.1. SEO는 무엇인가?
SEO가 뭐냐면 Search Engine Optimization 의 약자로, 검색 엔진 최적화라는 뜻이다. 구글이든 뭐든 검색엔진이 웹사이트를 검색 결과에 띄우기 전에, 웹사이트는 분석을 당한다. 그리고 분석 할 때에 가장 크게 참고하는 것이 HTML 코드이다.
1.2. CSR은 SEO에 약하다.
React로 만든 웹은 HTML 코드 분석을 못 한다. 정확히는 CSR은 못 한다. (빌드 도구의 플러그인을 사용하면 가능하긴 하지만, 너무나 비효율적이다.)
React 웹을 빌드하면 body태그 내용물이 없는 HTML 파일 하나에 번들된 css와 js가 있을 뿐이다. 사용자는 이 HTML 파일을 열면 css와 js가 실행되어 DOM을 만드는 흐름이 이어진다.
문제는 모든 검색엔진이 이 HTML을 분석할 때, js 코드를 실행하지는 않는다는 것이다. (구글 검색엔진은 js코드도 고려하여 분석한다.)
1.3. SSR은 SEO에 강하다.
SSR은 서버에서 렌더링을 다 한 다음에 완성된 HTML 파일을 사용자에게 준다. 이것은 검색엔진이 SSR방식의 웹페이지를 분석할 때에 또한 완성된 HTML 파일을 보게 되는 것을 의미한다.
그것은 분명히 SEO에 유리하게 작용한다.
2. Next.js는 프레임워크다.
2.1. React는? 라이브러리다.
오피셜이다
React를 처음 사용할 때가 생각나는가? 나는 HTML, CSS, JS만으로 웹페이지를 만들다 React를 처음 썼을 때 너무 편해서 너무 좋았다.
엄청나게 긴 HTML 코드를 뒤적거리며 마크업을 추가하지 않아도 되고, 반복되는 구조의 마크업을 일일이 복사 붙여넣기 하지 않아도 되며, 데이터를 기반으로 동적으로 반응하는 마크업을 만들 수 있었다. 그 이외에도 엄청나게 편한 코딩이 가능해서 감동했다.
근데 이런 React는 라이브러리다. react-router, redux, styled-components 같은 라이브러리들을 더 붙여서 프레임워크처럼 사용이 가능하지만, react는 라이브러리다.
2.2. Next.js는 React를 사용하는 프레임워크이다.
무슨 말이 하고 싶냐면, 프레임워크가 라이브러리보다 더 개발이 편하다는 것이다. 물론, 보통 정확한 사용법을 익혀야하는 프레임워크가 러닝커브가 더 심하겠지만 그것을 고려하더라도 프레임워크를 익혔을 때의 간편함이 압도적이다.
게다가 Next.js는 react 라이브러리를 사용하는 프레임워크이기 때문에, react를 배웠고 사용해온 개발자라면 러닝커브가 매우매우 짧아진다. 라우팅 방식도 react-router와 매우 유사하기 때문에 더더욱 쉽다.
정말 정말 개발이 편해진다. react로 웹 개발을 해봤다면, 꼭 배워보길 바란다.
3. SSR과 CSR를 선택할 수 있다.
3.1. Next.js에서도 CSR을 쓸 수 있다.
SSR도 장점과 단점이 있다. 어떤 상황에서는 CSR이 더 유리하고, 또 다른 상황에서는 SSR이 더 유리하다. CSR과 SSR, 무슨 방법을 사용할지 유동적으로 선택할 수 있다면 굉장히 좋을 것이다.
그게 Next.js에서 가능하다.
Next.js에서는 CSR을 사용하고 싶을 때, SSR을 사용하고 싶을 때를 개발자가 구분하여 다르게 웹페이지를 제공할 수 있다.
4. URL 마스킹이 가능하다.
웹을 개발하다보면 어떤 요청 URL에서 API KEY 같은 것을 숨기고 싶을 수도 있고, 라우트 URL에 담긴 정보를 사용자에게 보이고 싶지 않을 때가 있을 것이다.
그럴 때에 Next.js에서는 실제로 요청하는 URL과 사용자에게 보여지는 URL을 다르게 할 수 있다. 아주 간편하게 말이다.
매우 소소한 부분이라고 생각할 수 있지만, 나는 이것을 React와 비교했을 때 굉장히 장점이라고 생각한다.
react에서도 다른 라이브러리를 사용해서 URL 마스킹이 가능하겠지만, 그게 다 빌트인 되어있는 프레임워크가 훨씬 편하다. 그것은 비교적 개발에 온전히 집중할 수 있다는 뜻이다.
그러니까 꼭 한 번 배워보십시오.
react를 써봤다면 꼭! Next.js를 배워보라. 나는 왜 이제 이걸 배웠을까 조금 후회중이다.
나는 이제 배우는 중이라 나열할 수 있는 장점이 적지만, 분명 더욱 더 많은 장점이 있다.
🛠
이것을 계기로 다음 프로젝트는 프레임워크를 사용해서 진행하려고 한다.
CSS도 tailwindcss 라는 프레임워크를 알아보고 있는데, 이것도 굉장하다. 개발시간의 대부분을 차지하는 CSS를 작성하는 시간이 줄어들면, 개발에 집중할 수 있는 시간도 늘어나고 프로젝트 진행 기간도 대폭 단축될 것이다. 사용법에 익숙해지고 나면 꼭 포스팅하려고 한다.
