이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.
Hello, Next.js > 리뉴얼 강좌 소개
노드는 14, 디자인 버전 ant design도 3 → 4 로 바뀜
Next.js 업데이트로 인해 바뀐점
- 백엔드도 프론트엔드 서버에서 커버할 수 있게 됨.
- 미리 페이지를 빌드해 줌으로써 응답속도가 빨라짐.
- 개발 시 로그가 자세하게 나옴.
강좌 구성
프론트 엔드 개발자 입장에서는 백엔드 개발자들과 협업하는 것처럼, 백엔드 개발자라면 프론트 엔드 개발자와 협업하는 형식으로 진행할 것이다. 프론트 엔드 개발자 입장에서 더미데이터를 활용해서 미리 작업을 하고 있어야 시간적 손실이 발생하지 않을 수 있기 때문.
리액트가 있는데 왜 next?
next는 리액트를 사용한 프레임워크이다. 실무를 위해 갖춰진게 많다. 하지만 자유도는 좀 적다. 코딩의 자유도 대신 next 가 주는 가장 큰 장점 하나가 서버 사이드 렌더링이다.
프론트엔드 서버는 어떤 페이지를 요청하든 하나의 js, html 파일을 내려준다. (js, html, css, img 등) 즉 데이터가 없다. 데이터가 없으므로 로딩창을 띄워주고 있어야 한다. 이때 백엔드 서버에 /posts 데이터를 요청한다. 이게 바로 리액트, 뷰, 싱글페이지가 구동되는 방식이다.
싱글페이지 : 싱글 페이지 애플리케이션은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 이는 단일 페이지로 구성되어 있다. SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여 문서에 추가하는데, 보통 사용자의 동작에 응답하는 방식이다.
프로젝트를 진행하면서 프론트 서버로 요청을 보내는지, 백엔드 서버로 요청을 보내는지 잘 구분해야 한다.
Hello, Next.js > Next.js 역할 소개
전통적인 웹사이트에서는 브라우저에서 페이지 요청을 보내면 프론트 서버에서 바로 백엔드 서버로 달라고 요청한다. 데이터베이스로 요청하고, 다시 백엔드 → 프론트 엔드(그럼 프론트 서버는 데이터와 페이지를 합쳐서 보여준다. ) → 웹 브라우저로 감.
하지만 리액트, 뷰, 앵귤러는 먼저 페이지를 하나 받고, 데이터 없이 화면만 받고, 데이터는 로딩창이 돌아가는 와중에 백엔드 서버에서 직접 받아온다. 화면은 딱 한번만 받아오고, 데이터만 받아오는 것이다. 데이터에 따라 화면이 바뀜
두 방식의 장단점?
- 전통적인 방법 : 화면이 전체가 한방에 그려지는 장점이 있지만, 로딩 속도가 많이 걸린다. 요즘에는 3초 안에 화면을 그려주는 게 중요하다. 화면이 보이기 시작하면 어느정도 인내심이 늘어난다. (ex. 로딩창) 3초 후에 사이트를 떠나버림.
- 리액트 방법: 시간을 벌어서 백엔드 서버에서 데이터를 받아 화면을 그려줄 수 있다.
전체적인 시간은 비슷할 수도, 리액트 방식이 더 오래걸릴 수도 있다. 화면에 뭐라도 보이는 시간이 단축되어서 리액트를 사용하는 것이다. 이것을 잘 생각해야 한다. 장단점을 잘 알아야 한다.
사용자가 빠르게 인터렉션이 필요할 때 사용한다. 하지만 오히려 모든 페이지를 불러와서 느려질 수도 있다.
첫 페이지 검색엔진 방문 시 보여지는 게 로딩창 밖에 없다면? 아무런 콘텐츠가 없고, 로딩창밖에 없다~ 라고 하고 순위가 떨어질 수 있다.
구글 엔진은 똑똑해서 괜찮은데 ..
어떤 국내 모 검색엔진, 로딩창만 보고 나가버릴 수 있다. 해결법이 2가지
- 검색엔진을 위한 서버사이드 렌더링
- 프리렌더 : 검색엔진임을 알아차리고, 그것일 때만 백엔드 서버에서 데이터를 완성해서 htm을 주고, 그냥 일반 유저일 때는 기존 리액트 방식으로 줌
- 첫 방문만, 전통적인 방식으로 하고, 링크 누르거나 a 태그 누를 때는 리액트 방식으로 함. 하이브리드 느낌?
- 모든 페이지를 다 받아오는 건 불필요하니까, 코드 스플링?
서버 사이드 렌더링과 코드 스플리팅은 실무할 때 꼭 적용해야 한다. 대부분의 서비스는 검색 엔진에도 노출되어야 하고 사용자를 대상으로 하는 페이지는 속도도 빨라야 하니까 적용해야 한다.
코드 스플리팅 : 자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다. 그럼 프로젝트의 규모가 커질수록 자바스크립트 파일 용량도 커질 것이다. 용량이 커지면, 인터넷이 느린 환경에서는 페이지 로딩속도도 느려질 것이다. 즉 코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할때 불러와서 사용 할 수 있다. 이를 통하여, 페이지의 로딩 속도를 개선 할 수 있다.
넥스트를 쓸 필요가 없는 서비스는 무엇일까?
→ 코드 스플리팅이 필요없고, 서버 사이드 렌더링도 필요 없는 경우이다. 대표적으로 admin 페이지이다. admin 페이지는 굳이 넥스트를 쓰지 않고, 리액트 써도 된다. B2C(Business to Consumer)는 서버사이드 렌더링 방식 고려해야 한다.
느낀점
나는 현재 회사에서 next 기반의 환경에서 react프론트 개발을 하고 있다. 중간에 들어오게 된 프로젝트라서 왜 next 기반으로 이루어졌는지 이유가 무엇인지 몰랐었는데, 이제야 알게 되었다.. 💫 지금이라도 알게 되어서 다행 😓
https://nextjs.org/blog/next-11
https://zereight.tistory.com/969
https://velog.io/@velopert/react-code-splitting
https://velog.io/@wiostz98kr/TIL48-l-%EC%8B%B1%EA%B8%80-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98Single-Page-Application-SPA-%EA%B0%9C%EB%85%90-z1zkrzr9
