Next.js ?

출처

(제일 도움이 된 글을 빨간색 표시 하였습니다. 읽고 도움이 된 모든 글을 출처로 표기하였습니다. )

https://news.hada.io/topic?id=7665 (13 릴리즈에서 달라지는 점)

https://nextjs.org/learn/foundations/about-nextjs

https://namu.wiki/w/Next.js?from=NextJS 

https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/#:~:text=SWC%20(Speedy%20Web%20Compiler),%EC%9D%84%20%EC%A0%9C%EA%B3%B5%ED%95%98%EB%8A%94%20%ED%88%B4%EC%9E%85%EB%8B%88%EB%8B%A4. (swc와 바벨)

https://nextjs.org/

https://nextjs.org/learn/basics/create-nextjs-app/setup 

https://next-learn-starter.vercel.app/posts/ssg-ssr(vercel engineer 포스팅)

https://next-learn-starter.vercel.app/posts/pre-rendering

https://helloinyong.tistory.com/316(Next.js의 hydrate조차도 최적화 시킬 수 있지 않을까에 대한 고민을 한 사람의 글)

---

내 나름의 정리

 

Next.js ....는~  Vercel이라는 회사에서 현재 관리중 이라고 하네요. 

Pros

zero config

swc를 사용해 속도가 빠르다.  swc(speedy web compiler. 러스트로 제작된 빌드 툴:js/ts파일 불러와, 주요브라우저에서 지원하는 코드로 변환하는 도구)

swc (트랜스파일링(구 업계표준 바벨) + 코드 경량화 (구 업계표준 Terser)를 대체한다)는 트랜스파일링에서 바벨보다 17배 나은 결과를 보여줌. 그런데, 실제로 os환경마다 빌드타임에는 차이가 있다고는 함 ㅋ

ssr 서버사이드렌더링. 클라이언트에 주는 부담을 줄인다.

이미지 최적화, 애널리틱, ssg and ssr(정적, 서버 렌더링)를 하이브리드로 제공, Internationalization과 fast refresh, api route, file system routing, typescript support, built-in css support, middleware(이건 뭐지? request에 대하여 다양하게 사용할수 있는 인터셉터를 제공한다는 것 같아요. ) Next.js는 파일 시스템 기반 라우팅을 사용하므로 폴더 경로에 따라 만들어준 페이지의 경로가 설정되어 따로 path를 잡아줄 필요도 없다. - 공식페이지에 말하는 장점 입니다. -

Cons

프레임워크의 공개 빌드된 파일들의 폴더가 .next라서 next.js 사용 프로젝트인게 정말 잘 드러난다. -> 이건 큰, 단점이라고는 생각지 않긴 함.

ssr의 단점으로 서버가 느리면, 웹사이트가 매우 느려진다.

 

 

위와 같은 장/단점이 있습니다.

Next.js 프레임워크가 탄생하게 된 배경에 React.js 페이스북 발발 라이브러리에서의 단점으로, 

 

- 첫사이트 접속시 하나의 페이지를 불러오고, 그 페이지에 있는 모든 js를 한번에 불러오기에 첫 로딩속도가 느리다는 점.

- SEO 검색 엔진 최적화에 불리하다는 점

 

등이 있습니다. 

 

 

그 전에는 다같이 React.js를 썼잖아요? 그전에는 다같이 jQuery를 썼구요.

면접 등에서, Next.js를 꼭 써야하는 이유가 있을까요? 등의 질문이 다소, 답답하게? 느껴지는 이유도 저 개인적으로는 여기에 있는 것 같습니다. (의도는 알겠습니다만. Next.js가 기존의 React.js 패러다임 대비 효용가치가 있음을 설명하라는 것이겠지요.)

 형을 꼭 써야하는 이유가 없으면, 외려 형을 고집할 이유가 없어요. Why not? 아우를 아는 사람들이 더 많아졌으니 아우랑 일 하는거지요. 게다가 언제나 소프트웨어 시장에서는 아우가 형보다 낫잖아요. (이상한 배경으로 탄생한 아우가 아니라는 가정하에) 저 개인적으로는, 이런 질문은 별로 좋지 않다고 느껴요. 차라리 Next.js를 쓰면 너무 안좋은 프로젝트가 있을까요? 라고 질문받는게 더 좋을 것 같아요. 당연히 개발 인력 cost도 고려해야하고요. (너무 당연한 얘기까지 들먹이는건 ㅎㅎ)

 

 

또 새로운 프레임워크가 나와서 짜증이 나는데, 한편으로는 바닐라JS의 중요성을 체감하게 되네요.  

저 개인적으로는, React + 아파치서버 가  Next.js라고 비스무레하게 여기고 있습니다. 

 

Next.js를 쓰면 너무 안좋은 프로젝트가 있을까요? 

에 지금 제가 답을 해 보자면,

정적 생성과 서버측 렌더링을 사용해야하는 경우를 명확히 나눌 수 있느냐 가 현 시점, 웹 클라이언트에서 제일 중요한 트렌드 입니다. 

정적 페이지와 번들링 된 JS파일을 통해 seo와 성능 모두 만족시킬 수 있으므로 next.js는 지금 시점에서는 거의 모든 프로젝트를 핸들 할 수 있는 방법이라 답할 것 같습니다. (생각해보니 제가 만든 질문도 좀 구리네요. 나나 잘해.)

 

우야됐든

정적생성 - 페이지를 한 번 빌드하고 CDN에서 제공할 수 있으므로 가능한 한 정적 생성 (데이터 포함 및 제외)을 사용하는 것이 좋습니다 . 이렇게 하면 요청이 있을 때마다 서버에서 페이지를 렌더링하는 것보다 훨씬 빠릅니다.

ex) 마케팅 페이지 블로그 게시물 전자상거래 제품 목록 도움말 및 설명서

"사용자 요청에 앞서 이 페이지를 미리 렌더링할 수 있습니까?"라고 스스로에게 물어봐야 합니다. 대답이 예인 경우 정적 생성을 선택해야 합니다.

 

 

 

 

 

 

 

 

 

이 글에서 벗어나는 부분 

- 바벨. 트랜스파일러(옛 우리말을 현대 한국어로 번역해 주는 번역). 컴파일러(고급 프로그래밍 언어를 저급 프로그래밍 언어로 변환)

바벨이라는 툴이 트랜스파일러인 이유는, 최신 자바스크립트 문법으로 작성된 코드를 구버전 브라우저도 이해할 수 있는 수준의 오래된 자바스크립트 코드로 변환해 주는 소프트웨어이기 때문입니다. 즉, 바벨은 트랜스파일러로써 유사한 두 언어 사이에서의 변환 기능을 제공해줍니다. 

만약, 바벨이 없었다면 IE가 더 빨리 종료되지 않았을까요? ㅎㅎ...

-swc

 

---

마침글

제 나름대로의 정리로 이루어진 글이므로, 잘못된 부분 있을시 정보와 함께, 댓글 달아주시면 감사드립니다.