서버 사이드 렌더링
React를 SSR로 구현할 수 있다.
Next.js: Universal(어디서든 작동한다) react application의 서버렌더링을 쉽게 구현할 수 있도록 해주는 프레임워크
서버 사이드 렌더링이란
렌더링을 서버에서부터 하는 것.
보통 서버는 화면만을 제공하고 클라이언트에서 페이지를 그려내는 것이 일반적이다.
서버 사이드 렌더링을 하게 될 경우 1. 서버에서 페이지를 그려서 클라이언트에 보낸다. 2. 클라이언트에서는 바뀔 부분이나 클라이언트에만 존재하는 기능에 관한 작업만 수행하게 된다. 3. 바뀌는 부분은 가상DOM을 활용하여 클라이언트의 부하를 최소화한다.
장점
- SEO : 페이지를 서버에서 그리지 않고 내보내면 검색 기능이 활용되기 어렵다.
SSR을 이용한다면 서버에서부터 페이지를 제공할 때 컨텐츠가 담겨있어 SEO를 활용하기 쉬워진다.
- 초기 로딩 속도 이슈 해결 : 브라우저의 빈 화면을 SSR을 통해 해결한다.
단점
- 서버 코드에서 JSX를 사용할 수 있도록 빌드나 변환하는 과정이 필요해진다.
- Node.js로 서버를 하는 경우의 같은 js여도 클라이언트와 서버가 모든 것을 공유하지는 못한다.
DOM, Document URL 등
해당 부분의 예외 처리를 해줘야하고, 라이브러리를 사용하는 경우 복잡성 증대
- 클라이언트의 부하를 줄인만큼 서버의 부하는 증가한다.
API서버를 따로 두는 등의 부하를 줄일 작업이 필요하다.
Next.js
Universal(어디서든 작동한다) react application의 서버렌더링을 쉽게 구현할 수 있도록 해주는 프레임워크
- Universal : 서버에서 사전 작업을 해놓고 클라이언트에게 던져 클라이언트가 조금 더 작업을 하는 식의 양쪽에서 코드와 뷰를 공유한다.
서버 사이드 렌더링을 실제 구현하려 하면 넘나 복잡하다. 그래서 Next.js에서는 쉽게 서버 사이드 렌더링을 구현할 수 있도록 보일러플레이트 를 제공해준다.
- Code Split : SPA에서는 한 파일로 결합되어있어 한 페이지만 보는 데도 다른 페이지에 대한 정보도 다운로드하게 된다. 이를 새 페이지를 불러오지 않으면서 유동적으로 해결해주는 역할을 한다. 즉, 페이지 로딩 속도를 개선해준다.
참고
- https://holywater-jeong.github.io/blog/react-ssr-next-js/
- https://velopert.com/3293
- https://velog.io/@velopert/react-code-splitting
- https://holywater-jeong.github.io/blog/react-ssr/