[react] What is The Difference Point Between Next.js & Create-React-App? (React의 CRA와 Next.js는 대체 뭐가 다를까?)

As you know, Create-React-App(CRA) made by Facebook is first recommanded Tool Chain in react environment.

Create-React-App(줄여서 CRA)는 React 공식 가이드에서 첫 번째로 추천하는 툴체인이다.

 

(first recommanded !== most recommanded)

(물론 첫 번째로 추천한다는 말이 제일 추천한다는 말은 아니긴 하다)

Anyway, CRA is powerful ToolChain to make single-page-application And also useful starter-kit for who learning react recently! (like me)

아무튼 공식 가이드에서 소개하는 바와 같이 CRA는 리액트를 막 시작해서 배워가는 단계나, SPA 프로젝트를 뚝딱 만들고자 하는 사람에게 상당한 편의를 제공하는 툴이라고 보면 되겠다.

 

but if you are not interested in client-side-rendering(CSR) And more interested in server-side-rendering(SSR), then you could have more curiosity in next.js (that can be even static-site-generator.(SSG))

하지만 클라이언트 렌더링(CSR)이 아니라 서버사이드 렌더링(SSR) 혹은 정적 웹사이트 제공(SSG)을 원한다면?

자연스럽게 옆에 소개된 Next.js에 관심을 가지게 될 것이다.

 

Why people say 'If you want SSR, you should learn Next.js'?

그럼 왜 사람들은 SSR을 하려면 Next.js를 쓰라고 하는 걸까?

 

Now Let's go over the difference point between CRA and Next.js.

이제부터 본격적으로 CRA와 Next.js의 차이를 알아보자.

 

Before we start, each tool chain has own strength by each case(case by case), this is clearly not a competition to tell of superiority.

시작하기에 앞서, 각 툴체인 모두 각각의 상황에 강점을 가지고 있으므로, 우열을 가리기 위한 비교가 아니라는 점을 분명히 해두려고 한다.

 

---

CRA

CRA is a kind of boilerplate & scaffolding tool that used to make a new React application. 

CRA는 일종의 보일러 플레이트이며, 새 리액트 앱을 만드는 데 사용되는 도구다.

 

CRA was hide something like config file about babel and webpack from developers. so that was comfortable point for who face a React at the fisrt time! of course, that can be handle config file by eject script command or some other 3rd party library

(ex. craco, rewired, ....)

CRA는 초심자에게 익숙하지 않은 babel이나 webpack의 설정 파일을 숨긴 상태에서 시작되는데, 이 점은 리액트를 처음 마주하는 사람들에게 큰 장점으로 작용한다. 물론 숨겨진 설정 파일들은 추후에 라이브러리나 Eject 명령어를 사용해서 오버라이딩 혹은 직접 편집이 가능하다.

 

Some people say that this point is cons about CRA. Because it discourages developers from learning about how these tools work and also hard to customizing these configs.

찾아보니까 어떤 사람들은 이게 CRA의 단점이라고 한다. 설정을 추상화해놔서 개발자들이 bable이나 webpack 같은 필수 프로그램의 작동방식을 배울 기회가 없어지고 config파일을 수정하기가 힘들다나?

 

But I do not agree personally. It is literally an optional.

If you face a problem, That's when you should learn about babel and webpack!

개인적으로는 그 의견에 동의하지 못한다. 정 필요하다면 eject를 통해 설정 파일 추출이 가능한 데다가, 나는 문제가 생기면 항상 그때 배우면서 헤쳐나가면 된다는 생각을 가지고 있기 때문이다.

 

Another disadvantages point of CRA is hard to SEO. (cons of client side rendering)

또 다른 CRA의 큰 특징은 사실 CSR의 특징이기도 한데, SEO에 불리하다는 것이다.

 

If not your page used for Internal(ex. Admin page), mostly web page is made for B2C. So your administrator are thought that SEO is veeery important! (and that's true)

내부적으로 사용할 관리자 페이지가 아니라면, 대부분의 웹 페이지는 소비자에게 노출이 되는 SEO부분이 중요할 수밖에 없는 것이 사실이다.

 

I have a posting plan about this topic. Something like personal experience about try to adapt react-snap and react-helmet in corp project. for SEO.

이 부분에서 발생하는 많은 문제에 대해서는 언젠가 다른 포스팅으로 다뤄보려고 한다.

(react-snap과 helmet을 이용해서 랜딩페이지를 정적으로 제공하기 위해 노력했던 경험이나, google의 크롤링 봇이 모든 JS를 실행하지는 않는 것 같다는 흥미로운 실험 게시물 등)

 

 

Next.js

In fact, Next.js is framework not a boilerplate or scaffolding tools. It means Next.js has more powerful features like  Routing, Automatic Static Optimization, Data Fetching Image Optimization, Dynamic Import and so on.

Next.js랑 CRA의 비교는 공평하지는 않다. CRA는 굉장히 경량화된 보일러 플레이트로 원하는 라이브러리를 선택해서 기능을 다양하게 구성할 수 있다는 장점이 있지만, 그 말은 기본 기능이 부실하다는 말이기도 하다.

Next.js 같은 경우에는 프레임워크로 기능하면서 기본적으로 귀찮은 작업들(기본 라우터 구성, 정적 파일 최적화, 동적 Import 등등)을 기본적으로 지원하고 있기 때문에 기본 기능 자체가 더 많다.

 

What is the most strength point of Next.js? That is obviously SPEED! Due to SSR and SSG, Next.js show nice performance to user.

Next.js의 가장 큰 장점은 뭐니 뭐니 해도 속도라고 할 수 있다. 서버사이드 렌더링의 특성상, CSR처럼 청크 파일을 다 받기 전에 정적인 페이지가 노출되다 보니 사용자 경험에 큰 강점을 가지게 된다.

 

as you know about this

Pros and Cons of Next.js, looks like reversal factor of CRA's pros and cons.

Next.js가 가진 많은 장점과 단점은 사실 cra의 장점과 단점을 뒤집은 것과 마찬가지다.

 

Next.js can be easy to customizing about babel and webpack config file. But at the same time it has a stiff point because it was framework!

Next.js에서는 CRA처럼 설정 파일을 숨겨놓지 않기 때문에 바벨과 웹팩의 설정에 대한 커스터마이징이 쉽다. 하지만 프레임워크이다 보니 기본 제공하는 기능들에 어느 정도 규칙이 있어서 그 부분은 지켜줘야 한다.

 

For example, Next.js has a routing rule like folder-file entry point, CRA has no routing rule and can be any ways.

예를 들어 라우팅 방식의 경우 CRA는 원하는 라이브러리를 통해 혹은 직접 구현으로 자유롭게 정할 수 있는 반면에, Next.js에서는 폴더와 파일 경로라는 정해진 규칙을 따라 구현해야 한다. (Page 폴더 안에 폴더와 index.jsx or tsx 파일을 위치시키면 자동으로 라우팅 경로로 인식한다)

 

Also, one of the undeniable fact is Next.js is optimized in SEO via SSR or SSG. That is why you choose Next.js!

하지만 이러나저러나 결국 Next.js를 선택하는 제일 큰 포인트는 서버사이드 렌더링 혹은 정적 파일 생성을 통한 SEO 최적화라고 할 수 있을 것이다.

 

---

In summary, When to use Next.js or CRA?

• Build a static website like a landing page - Next.js
• When SEO matters. In case create B2C website with many dynamic detail pages  - Next.js
• Need a Speeeeed or when forecasted your target customer has less computing power - Next.js 
• When Build a web applications and dosen't want know about detail config settings - CRA
• If you don't have any plan to hosting with server like node.js and you wanna just host by static like S3 - CRA

 

그래서, 결론은 언제 뭘 쓰자는 얘기야?

• 랜딩 페이지나 마케팅 페이지와 같은 정적 페이지를 만들기 위해서 - Next.js
• SEO가 중요한 B2C 사이트의 경우 - Next.js
• 속도가 중요하고 우리나라처럼 통신 인프라나 컴퓨터 사양이 상향평준화되지 않은 곳일 경우 - Next.js
• 설정 파일 같은 거에 시간 낭비하기 싫다! 나는 SPA만 만들면 돼! 코드에 집중하고 싶은 경우 - CRA
• 호스팅은 그냥 아마존 S3 같은 곳에 정적 호스팅을 하고 따로 Node.js용 서버를 두기는 싫어 ㅠㅠ - CRA

 

 

항상 느끼고 또 배우지만, 절대적인 우위를 가진 기술이란 없는 것 같다.

CRA와 Next.js 또한 전혀 다른 상황에서 전혀 다른 역할을 할 수 있기 때문에, 상황과 필요에 따른 선택으로 시행착오를 줄이기 바란다.

 

그나저나 영어 포스팅은 처음 써봤는데, 영어 실력도 미천한데다 한글로 쓰는거랑 느낌이 완전히 달라서 애를 많이 먹었다...