🔴 NextJs에 대해 이해하기
NextJS 공식 웹사이트에 접속하면 웹을 위한 React framework라고 명시되어있다. 말 그대로 대규모의 양산형 React 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공하고 있다.
또한 NextJs를 프레임워크라고 얘기하고 있다. React의 경우 공식 사이트에서 라이브러리라고 얘기하고 있다. 여기서 프레임워크는 코드를 작성하는 방법이나 파일 구성하는 방법에 대한 명확한 규칙과 지침이 주어지게 된다.
사실 많은 사람들이 NextJs에서 지원하는 SSR를 주목하는 경우가 많다. 이는 NextJS에서 제공하는 많은 기능을 간과한 것처럼 보인다. 이를 위해 React에 대해 더 자세히 알아야 할 필요가 있다.
React가 프레임워크가 아닌 라이브러리로 불린다. 이는 유연하게 사용할 수 있는 툴로 볼 수도 있겠지만, React는 내장된 라이브러리가 부족하기도 하다. 그렇기 때문에 React를 사용할 때 third-party 라이브러리를 설치하여 React를 보조한다.
그렇기 때문에 생기는 문제들이 생기게 되었다.
- third-party라이브러리와의 궁합 문제
- 자유도가 높기 때문에 best Practice의 부재
🟠 SSR
사용자 경험에 대해(CSR)
클라이언트 사이드 렌더링은 렌더링이 클라이언트 측에서 일어나는 것을 의미한다. 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 JS를 통해 필요한 데이터를 API를 통해 요청하고 받아온 데이터를 이용하여 동적으로 화면을 구성하는 것이다.
지금 사진은 단순히 React앱으로 구현된 페이지의 소스 코드다. 실제로 페이지 처음이 많이 비어 있고 단순 HTML 뼈대만 존재한다.
ID가 root인 div가 보이는 데 react구조를 알면 이 곳에서 react 앱을 읽어 들여 렌더링한다는 것을 알 수 있다. 이것은 서버에서 온 것이 절대 아니다.
문제가 될 수 있는 이유는 사용자 경험을 망칠 수 있는 것이다. 클라이언트 측에서 코드를 받고 실행시키기 때문에 데이터를 가져오는 시간이 걸리기 때문에 사용자에게는 깜빡 거리는 화면을 보여주게 되기 때문이다.
검색 엔진 노출에 대한 문제
보기 사진에서의 React앱 사용자에게 위와 같은 화면을 보여주고 있다. 사용자들은 이 목록을 보며 어떤 값들이 있는지 확인을 할 수 있다.
하지만 검색 엔진 크롤러는 사실 서버에서 들어온 비어있는 초기 HTML페이지만을 보고 있으며 이렇게 검색 엔진 크롤러가 콘텐츠를 가져오지 못하면 문제가 될 수 있다.
NextJs로 구현한 웹 페이지의 소스 코드
검색 엔진이 사용자가 보는 대로 보이며, 깜빡거리는 등의 문제도 일으키지 않는다.
React에서는 SSR을 구현하지 못하는 것인가??
React에서도 사실 SSR을 구현할 수 있다. 하지만 이런 기능을 제대로 구현하기 까다롭다. 왜냐하면 추가적인 설정을 해줘야하기 때문이다.
NextJs의 경우 SSR기능이 내장되어 있기 때문에 이를 구현하기가 쉽다. 자동으로 페이지를 사전 렌더링하기 때문이다. 추가적인 설정을 해주지 않아도 웹 페이지에 방문하게 되면 서버에서 바로 사전 렌더링을 해준다.
🟡 파일기반을 통한 Routing
NextJs가 지닌 또 다른 강점은 파일 기반 라우팅이다. 일반적인 React에는 라우터가 존재하지 않는다.(외부 라이브러리를 설치해야 함..)
NextJs는 외부라이브러리를 설치하지 않고 또 한 추가적인 코드를 설정하지 않아도 파일과 폴더를 이용해서 페이지와 라우트를 정의 해준다.
위의 상위 app폴더에서 [meetID]폴더와 newMeet폴더가 있다 이를 [meetID]폴더의 경우 []로 감싸 동적라우팅이 가능하게 하며, newMeet는 정적으로 라우팅이 가능하게 한다. 그 폴더 경로 아래에 page.tsx파일을 만들면 그곳에 컴포넌트를 넣어 라우팅 된 경로에 보여주고 싶은 것을 보여주면 된다.
보기 사진과 같이 newMeet의 경로로 들어가면 위와 같이 라우팅이 된다.
🟢 풀스택 프레임워크??
또 하나 중요한 사실은 NextJs가 풀스택 프레임워크라는 것이다. NextJs를 사용하게 되면 React앱에 개발자가 백엔드 코드를 넣을 수 있게 되는 말이다. 그렇게 되면 독립적으로 REST API프로젝트를 구축하지 않아도 된다.
그림과 같이 APP폴더 아래에 api폴더를 만들어주고 API콜을 할 URL이름의 폴더를 넣어준다. 나의 경우 api폴더 아래에 Meet폴더를 만들어주고 route.ts파일을 만들었다.
그리고 요청받은 메서드에 따라 처리를 해주면 된다.
필자는 '/api/Meet'경로에 Post요청을 하면 hello NextJs resposne 데이터를 받는 API를 만들었다.
그리고 다음과 같이 클라이언트 코드에서 API콜을 하게 되면
다음과 같이 응답이 오는 것을 확인할 수 있다.
👉 후기
단순히 NextJs를 알기전에 SSR을 지원하여 사용자에게 좋은 경험을 주는 점에만 주목을 했는데, API를 직접 만들어 백엔드 기능을 지원하며 검색 엔진에도 잘 노출되게 하는 장점이 있는지 알지 못하였다. 왜 개발자들이 Next Js로 점점 확장해 나가는 지 이해할 수 있게 되었다.
👍올바른 피드백은 언제든지 환영입니다~!
