난 왜 Next.js를 썻는가?

처음 React를 통해 프로젝트를 진행하려 몇가지를 스스로에게 질문하고 또 검색을 통해 조사하고 조금 알아보았다.

1. 리액트를 왜 쓰는가?
쓴다면 리액트의 장점은 뭘까?
리액트의 단점은 뭐지?

먼저 순수 javascript인 vanila.js 를 통해 무언가 간단하게(js 기초를 학습하기 위한 게임 만들기) 만들수는 있지만
막상 순수 js만으로 어떤 프로젝트를 진행하려하니 동적인 페이지를 유지 보수하는데 어려움이 있을 것으로 생각이 되었다.
규모가 있는 프로젝트를 진행하는데 있어 vanila.js 만으로는 유저의 행동에 따라 웹페이지의 구성을 달리해주어야 하는데
이때 발생하는 상태변화를 관리하는 점에 있어서 순수 js만으로는 힘들다고 느꼈다.

위의 문제가 파악이 된 후 기능 개발 부분과 사용자 경험에 더 집중하기 위해 프론트앤드 라이브러리 리액트를 선택하게 되었다.
물론 vue를 선택할 수도 있었지만, 좀 더 어렵고 고민을 많이 할 수 있으며 표현의 자유도에 초점을 맞춰 선택에 비중을 두었다.

React 말고도 다른 라이브러리가 있지만 React를 선택한 이유가 있다. 대표적으로 vue가 있는데 간단하게 비교해보자면

개인적으로 표현의 자유도가 높고 나은 코드에 대한 고민을 많이 할 수 있는 리액트를 선택했다.
반면 vue는 react에 비해 진입장벽이 낮다는 장점이 있고 생산성이 높다는 것은 알겠으나 결국 react의 어려운점을 보완하고자
만들어진 것으로 알고있기에 나는 먼저 react를 경험하고 어려운점과 문제를 겪어보는 것이 먼저라고 생각했다.

React의 단점은 배워야 할 것들이 많고 코드의 자유도 또한 높아 학습량이 많으며, 많은 모듈들을 사용할 수 있는데 때문에 생태개는
풍성해지지만 그만큼 배워야 할 것들이 또 많다는 것

결론: 표현의 자유도가 높고 많은 것을 배울 수 있는 프론트앤드 라이브러리인 리액트를 선택했다.

 

---

2. Next.js의 도움 없이도 순수 React로 SSR을 구현하고 SEO 문제를 해결 할 수 있지 않은가?
나는 결국 Next.js를 왜 쓰는가?

 

리액트 기본 앱을 사용해 Next.js의 기능들을 지원할 수 있다. 그전에 CSR과 SSR의 대해 알아야 한다.

1. CSR(Client Side Rendering)의 경우 모든 js 파일을 로드하고 사용자의 웹을 비추어준다. 이때 사용자는 긴 로딩 시간을
대기해야 한다. (HTML 다운로드-> JS 다운로드 -> JS 실행 -> DATA 서버로부터 받기 -> Content)
또한 SEO(search engine optimization, 검색 엔진 최적화) 문제로 CSR의 경우 js 파일이 로드되지 않을 때 아무런 정보를
보이지 않는다.
구글의 검색엔진 경우 js가 로드되지 않은 페이지를 스캔함으로 검색에 아무 페이지도 걸리지 않게된다.

2. CSR의 문제점을 해결해 주는 것이 SSR(Server Side Rendering)이다. 클라이언트가 아닌 서버에서 js를 로딩하기 때문에
사용자가 대기하는 시간이 줄어든다. 또한 검색엔진이 js를 읽는 것이 아닌 서버 측에서 js, html, css를 만들어 직접 업로드
하기 때문에 검색엔진에 걸리게 된다.

그럼 SSR을 통해 사용자 대기시간을 줄이고 검색엔진 최적화를 위해 어떻게 해야할까?

첫 줄에 말했듯이 리액트 기본 앱을 사용해 SSR의 기능을 구현할 수 있다. 다만 과정이 조금 복잡할 뿐이다.
SSR을 위해 신경써야 될 3가지가 있다.

1. @loadable-component 적용

리액트 공식 홈페이지에서 서버 사이드 렌더링용 코드 스플리팅으로 추천하는 라이브러리이다.
공식문서 참고: https://ko.reactjs.org/docs/code-splitting.html#reactlazy

오픈소스 라이브러리: https://github.com/gregberge/loadable-components

GitHub - gregberge/loadable-components: The recommended Code Splitting library for React ✂️✨

코드 분할 – React

코드 스플리팅이 필요한 이유는 내가 원하는 페이지에서 원하는 javascript와 라이브러리를 렌더링하기 위해서이다.
좀 더 효율적으로 js 로딩 시간을 개선가능.

2. Webpack과 babel 설정

Server-side-rendering 에서는 Webpack과 babel을 사용해 코드를 node/ , web/ 이렇게 2종류로 컴파일해야 한다.
Webpack으로 여러종류의 Output을 만들어 내는 방식을 Multil-compiler 라고 하는데, Array로 export 해주면
webpack engine이 각각 컴파일해준다.

3. Rendering 용 express server 구축

URL에 맞는 초기 렌더링과 static file, SEO 설정이 어려울 수 있다. 하지만 @loadable-component 와 react-helmet 에서 제공하는 API를 사용하면 손쉽게 처리 가능하다.

출처: https://minoo.medium.com/next-js-%EC%B2%98%EB%9F%BC-server-side-rendering-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-7608e82a0ab1

https://www.digitalocean.com/community/tutorials/react-server-side-rendering

https://d2.naver.com/helloworld/7804182

How to Enable Server-Side Rendering for a React App | DigitalOcean

Next.js 처럼 Server-side-rendering 구현하기

 

결론: 리액트 기본 앱으로도 Next.js 기능 충분히 구현 가능 하지만 조금은 편리한 방법인 Next.js를 선택한 것일 뿐
(추후 리액트 기본 앱으로 Next.js 기능을 구현하는 튜토리얼을 만들 계획)

---