[nextjs] SSR을 위한 리액트 프레임워크

 리액트는 상태 기반으로 렌더링 및 정보를 처리하기 위한 프레임워크로, 리액트 기반의 사이트는 하나의 html 파일에 대해 가상 DOM을 설정하고, 자바스크립트에 기반하여 해당 내용을 페이지 내에 반영하는 방식으로 동작한다. 

 리액트 페이지 주소를 처음 방문하면 클라이언트는 html 파일 하나와 가상 DOM을 구성하는 자바스크립트 객체를 얻게 된다. 이때 html 페이지는 사실상 아무런 내용도 가지지 않으므로 초기 페이지는 흰색을 띈다. 이후 가상 DOM이 자바스크립트 코드를 통해 실제 DOM과 대응되면, 우리가 아는 페이지를 볼 수 있게 되며, 리액트가 동작하게 된다. 이후 페이지는 갱신 없이 자바스크립트 코드 및 사용자의 반응에 따라 변경된다.

 위와 같은 이유로 리액트 기반 페이지는 몇가지 제한점이 존재한다.

1. 페이지 방문 초기에는 가상 DOM이 반영되지 않아 화면이 흰색이므로, 반짝이는 듯한 느낌을 줄 수 있다.
   (페이지 배경이 어두우면 해당 현상이 두드러질 수 있다.)
2. 브라우저가 자바스크립트를 차단하도록 설정하면 페이지 전체가 동작하지 않는다.
   (가상 DOM은 자바스크립트 객체)
3. SSR 방식에 비해 속도가 상대적으로 느리다.

 이러한 문제들은 리액트가 클라이언트 측에서 모든 화면을 렌더링하기 때문에 발생한다. 그렇다면, 리액트의 초기 페이지를 서버측에서 어느정도 생성하여 전달하는 것은 어떨까? 클라이언트가 받을 페이지가 생성되어 있으므로 화면이 점별되거나, 자바스크립트가 실행되지 않는다고 전체 페이지가 무효화되는 일은 없을 것이다.

---

nextjs

 nextjs 는 리액트 페이지를 정적으로, 혹은 서버측에서 렌더링할 때 사용되는 프레임워크로, 리액트를 서버측에서 렌더링하기 위해 필요한 다양한 설정을 프레임워크 자체적으로 처리하고 최적화해주며, express와 비슷한 느낌의 서버 API 를 구현할 수 있기 때문에, 풀스택 개발을 쉽게 할 수 있다.

nextjs 프레임워크는 다음과 같은 특징을 가진다.

• 실제 파일 시스템과 대응되어 직관적인 페이징 기반 라우팅이 가능하다.
• 페이지 단위로 pre-rendering, 정적 렌더링(SSG), 서버측 렌더링(SSR) 을 수행할 수 있다.
• 별도의 설정 없이 자동적으로 최적화해주는 부분이 많다.
• 라우팅 대상이 되는 페이지를 미리 렌더링하여 페이지 방문 속도를 높일 수 있다.
• pages/api 폴더 내부에 API 코드를 작성할 수 있으므로, 통상적인 서버 기능도 수행할 수 있다.
  이를 통해 제한적인 풀스택 개발이 가능하다. ( 서버 기능이 중요하면, 다른 프레임워크를 쓰는게 나아보인다. )

 개인적으로 리액트 이후 nextjs을 잠깐 사용해본 결과, 리액트의 기능을 사용할 수 있으면서도 외부 라이브러리의 dependency 관계 없이 리액트 페이지를 구현하기 위한 기능이 가능했던 부분이 상당히 좋았다. 예를 들어 리액트 앱에서는 head 태그의 내용을 바꾸는 경우 react-helmet 라이브러리가, 라우팅 기능을 구현하는 경우 react-router 라이브러리가 필요하다. 그러나, nextjs을 이용하면 이러한 라이브러리 대신 next/head 및 next/router 혹은 next/link 등 내장된 기능을 이용하여 이러한 작업을 모두 처리할 수 있다. nodejs 서버에 기반하여 동작하므로, nodejs에서 지원하는 다양한 메서드들을 사용할 수 있다는 것도 일부 장점이 될 수 있다.

---

next 앱 만들기

https://nextjs.org/docs/api-reference/create-next-app

npx create-next-app@latest

npx create-next-app@latest --ts // 타입스크립트

create-react-app 이용하여 리액트 앱을 생성했던 것처럼, create-next-app을 이용하면 next 앱을 이용하는데 필요한 여러 라이브러리를 알아서 설치해주고, 일부 지원 기능이 있다고 한다. 

필요한 패키지를 알아서 설치한다.

---

환경 변수 설정

https://nextjs.org/docs/basic-features/environment-variables

Basic Features: Environment Variables | Next.js

.env 형식의 파일을 이용하지만, dotenv 라이브러리를 따로 설치할 필요 없이 nextjs가 알아서 처리해준다. 이때 프로그램이 실행되는 환경이 개발 환경인지, 프로덕션 환경인지에 따라 다른 환경 파일을 사용할 수 있다.

• .env.production : 프로덕션 환경에서 사용하는 환경 변수 파일.
• .env.development : 개발 환경에서 사용하는 환경 변수 파일.
• .env.local : 공통적으로 사용하는 파일로, 위 두 파일보다 우선시된다.
• .env.test : NODE_ENV 가 test일 때 사용되는 환경 변수 파일로, 

 접두사가 NEXT_PUBLIC_ 이면, 해당 설정은 브라우저 상에도 노출된다. 

DB_ID=blaxsior1
DB_PASSWORD=iloveapple123
# dotenv와 규칙은 동일한 것으로 보인다.

PORT=8080
HOSTNAME=localhost
HOST=http://$HOSTNAME:$PORT
# 선언된 변수를 $ 기호를 이용하여 참조할 수 있다.
# $을 기호 자체로 사용하려면 \$ 로 표현한다.

NEXT_PUBLIC_API_ROUTE='https://some.site'
# NEXT_PUBLIC_으로 시작하면, 브라우저 상에 노출된다.

---

이외의 내용은 다른 문서에서 설명한다.