TIL - 20220627

 오늘은 프로젝트 주제에 대한 구상을 진행하면서 프로젝트에 적용해보면 좋지 않을까에 대한 일환으로 서버 사이드 렌더링을 한번 경험해보고 싶어서 Next.js에 대해 공부했다. Next.js를 공부해보면서 라이브러리와 프레임워크의 차이점을 명확하게 알게 됐다.

 

라이브러리는 개발자로서 내가 사용하는 것. 내가 라이브러리를 불러온 다음 라이브러리를 사용하며 무언가를 만든다. 라이브러리를 사용할 때는 내가 원하는 대로 코드를 작성할 수 있고 사용하고 싶을 때 사용하면 된다.

 

프레임워크는 내 코드를 불러오는 것. 내가 코드를 적절한 위치에 알맞게 작성했다면 프레임워크가 내 코드를 불러와 모든 걸 동작하게 만든다.

 

자유도의 차이인 것 같다. 예를 들어, React.js와 Next.js를 라우팅이라는 주제로 비교해보면 React.js는 react-router-dom을 설치하여 어떤 주소에 어떤 컴포넌트를 보여줄 것인지 모두 개발자가 자유롭게 지정해줄 수 있다면, Next.js는 pages 폴더 안에 about.js라는 파일을 만들게 된다면 /about url에 about.js에 작성한 내용을 개발자가 아무 설정을 하지 않아도 자동으로 보여주게 된다.

 

또한, React.js와 Next.js의 큰 차이점은 렌더링 과정에도 있다.

 

React.js는 Client Side Rendering으로 내 브라우저에서 유저가 보는 모든 UI를 만들어낸다. 따라서, 유저가 보는 모든 UI들은 HTML 소스 코드에 들어가지 않는다. 브라우저가 React.js를 다운로드하고 내 코드를 다운로드한 다음에서야 React.js는 모든 것들을 렌더링하고 유저는 모든 UI를 볼 수 있게 된다. 다시 한번 정리하면, 브라우저가 HTML을 가져올 때, 비어있는 div로 가져오고 그 후에 모든 JavaScript를 요청해서 브라우저가 JavaScript와 React.js를 실행시킨 다음에야 앱이 유저에게 보이게 된다.

 

Next.js는 Server Side Rendering으로 API로부터 가져오는 데이터가 로딩될 때까지 시간이 오래 걸릴 수 있지만, 유저는 적어도 어떠한 HTML을 볼 수 있다. 유저가 페이지를 요청하면 JavaScript와 같은 동적인 행동을 할 수 없어도 유저는 그들이 보게 될 실제 HTML을 볼 수 있는 것이다. 이렇게 할 수 있는 이유가 Server Side Rendering으로 앱의 초기 상태를 활용하여 pre-rendering을 진행한 다음에 보내주어 HTML을 먼저 보고 요청한 JavaScript 파일이 로딩되면 React.js가 넘겨받아서 자연스러운 동적 기능이 가능한 화면을 만들게 되는 것이다. 다시 한번 정리하면, Next.js는 React.js를 백엔드에서 동작시켜 component를 렌더 시켜 페이지를 미리 만들고 렌더링이 끝났을 때, 그건 HTML이 되고 Next.js는 그 HTML을 페이지의 소스 코드로 넣어준다. 그러면 유저는 JavaScript와 React.js가 로딩되지 않았더라도 콘텐츠를 볼 수 있게 된다. 그리고 React.js가 로딩되었다면 기존에 존재하는 것과 연결되어 일반적인 React.js 앱이 되는 것이다.

 

React.js를 처음 배울 때, 바뀐 부분만 다시 그린다는 점도 너무 신기했었는데, Next.js는 HTML 요소들을 미리 보여주고 그다음에 JavaScript와 React.js를 로딩하여 React.js 앱이 된다는 점도 너무 신기하고 재밌었다. 좀 더 공부해보면서 내 프로젝트에 적용해볼 수 있으면 적용하고, 아니라면 다른 프로젝트 때 꼭 Next.js를 사용해야겠다.