🔖 개요
Next.js의 가장 대표적인 특징으로는 SSR(Server Side Rendering)을 제공한다는 것이다. 기존 SPA 방식인 React에서 Next.js 프레임워크를 도입하면, 원하는 페이지를 SSR로 제공할 수 있다.
CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이점을 SSR의 개념, 동작방식 등을 통해 알아보자.
🔖 CSR의 한계
프레임워크 없이 CRA(Create-React-App)로 생성된 React 웹사이트의 실제 소스코드는 비어있는 것을 알 수 있다. 개발자도구를 통해 html 코드를 확인해보면 아래와 같이 비어있다.
You need to enable JavaScript to run this app.
React 웹사이트는 브라우저에서 모든 js 파일을 다운로드 후, UI를 렌더링한다. 이것이 CSR 방식이다.
📍 유저의 대기 시간 증가
페이지 최초 실행 혹은 새로고침 시, React를 실행시키고 모든 js 파일을 다운로드 받아 UI를 렌더링하고 보여주기까지의 시간이 걸린다. 이 때, 빈 화면이나 깜빡임이 발생하여 UX 측면에서 좋지 않기에 CSR의 한계라고 볼 수 있다.
📍 SEO 한계
대기 시간이 증가함에 따라, 유저에게 빈 화면을 보여줄 때가 많을 것이다. html 요소가 비어있는 빈 페이지를 보여주는 건 크롤러가 웹사이트를 판단하기 어렵기 때문에 SEO(Search Engine Optimization) 측면에서 불리해진다.
🔖 Next.js의 SSR
Next.js는 위와 같은 CSR의 한계를 보완할 수 있다. 자동으로 SSR을 수행하기 때문이다.
페이지 최초 실행 혹은 새로고침 시, CSR과 다르게 모든 html 요소가 존재하기 때문에 모든 js 파일이 load될 때까지 기다릴 필요가 없다. Next.js 서버에서 pre-rendering을 수행하기 때문이다. 덕분에 페이지 최초 접속 시 js 파일 다운로드에 의존할 필요가 없어진다. 😉
💡 pre-rendering
- 서버에서 미리 DOM 요소를 빌드하여 이미 완성된 html 페이지를 렌더링하는 작업을 말한다. 이 작업 이후에 React가 브라우저에서 활성화된다.
🔖 Hydration
<a href="/"></a>와 같이, a 태그를 예시로 들 수 있다. a 태그의 href 사용 시, hard navigation이 수행되어 전체 페이지를 refresh하게 된다.
하지만, React에서 a 태그를 사용할 땐 그렇지 않다. React 내부 a 태그의 href 사용 시, 해당 navgation event를 React가 intercept하여 Client Side Only Navigation을 수행하게 되어 빠르게 이동할 수 있다. 따라서, a 태그는 React에 의해 제어되고 있음을 알 수 있다. 이 과정을 Hydration이라고 한다.
이미 렌더링된 단순 HTML 요소에 React를 붙여 interactive한 React Application으로 초기화하는 작업이라고 할 수 있다.
📍 "use client"
그렇다면 h1 태그처럼, js 기능이 부여될 필요가 없는 html 요소는 Hydrate될 필요가 없지 않을까? 🤔
기본적으로 Next.js가 생성하는 component는 Hydrate되지 않는 server component이다. Hydrate될 필요가 있는 component임을 알려주기 위해 파일 상단에 "use client"을 작성할 수 있다. 이 명시를 가진 component의 js 파일만 load하게 된다.
이를 통해 해당 파일은 back-end에서 렌더링을 수행하고, front-end에서 hydrate돼야 한다는 것을 명시할 수 있다. 이러한 명시로, 의미 없는 js 파일 load를 줄일 수 있다. 유저가 다운받아야 할 js 코드의 양이 줄어드므로 페이지 로딩 속도를 개선할 수 있다. interactive해질 component를 선택할 수 있는 것이다! 👋
💡 Client Component는 Server Component를 가질 수 없지만, 반대는 가능하다.
💡 모든 것이 SSR로 렌더링되고, 그 후에는 Client Component만 hydrate된다.
💡 Server Component의 자유로움
- interactive하지 않은 Server Component에서 API를 호출하거나 DB에 접근할 수 있다. Server Component는 브라우저에 노출되지 않으므로, API나 DB와 통신하기 좋은 환경이 된다.
