NextJS의 핵심기능과 장점(1)

● NextJS의 핵심기능

• SSR(Server Side Rendering): Client가 아닌 서버 측의 페이지 상에 랜더링되는 콘텐츠에 대한 처리.
• React  만을 이용해서 구축된 Application에서는 기본적인 HTML 뼈대와 Entry point 및 id="root" 부분에만 React app이 로딩되고 랜더링 되므로. 랜더링 되는 전부는 React에 의해 처리가 됨.
• React는 CSR JS library이기 때문에 랜더링은 모두 Client에서 처리되므로 사용자의 브라우저에서 실행됨. 사용자 페이지를 방문했을 때 서버에서 클라이언트 측으로 전송되는 HTML 코드에서는 특별한 내용이 없음.
• 무엇을 구축하느냐에 따라 해당 부분이 문제가 될 수 있음.예를 들어, 일부 데이터를 화면에 '모임 약속' 같은 데이터를 서버로 부터 fetching하는 경우. 데이터가 fetching 되는 동안(요청이 전송될 때) 잠깐 동안에 페이지가 깜빡이는 로딩 상태를 보게 된다.왜냐하면 Clinet 측에서 JS 코드가 실행된 뒤 데이터 fetching이 시작되기 때문에 전송된 요청의 회신을 대기하느라 로딩이 생기게 된다. 간단하게 요청된 페이지가 아직 해당 데이터를 포함하지 않기 때문이다. 물론 이게 문제가 되지 않지만, 사용자 경험의 관점에서는 이러한 로딩이 이상적이지 않을 수 있다.
•  

• SEO(Search Engine Optimization, 검색 엔진 최적화)가 중요한 경우에 문제가 될 수 있는데, 검색 엔진을 통해 검색이 되어야 하고 많은 콘텐츠를 포함하고 있는 공개 페이지가 있는 경우에는 SEO가 중요해진다. '모임 약속' 목록에서 사용자들은 목록을 볼 수 있지만 검색을 하고 있는 사용자들은 서버로부터 가져오는 빈 HTML을 보게 된다. 따라서 검색 엔진 사용자들이 콘텐츠를 볼 수 없다면 문제가 발생한다.
• 이런 경우에 SSR이 유용하게 사용된다. 해당 페이지가 서버에서 미리 랜더링이 되는 즉, 요청이 서버로 도달할 때 데이터 페칭이 서버 측에서 처리된다면 모든 내용을 포함한 페이지가 사용자와 검색 엔진 사용자들에게 제공될 수 있다. 사용자들이 페이지가 깜빡이는 로딩 상태를 경험할 필요가 없으며, 검색 엔진을 통해서도 페이지의 콘텐츠 확인이 가능하게 된다. 즉, React 페이지, 컴포넌트를 서버 측에서 미리 렌더링해주게 된다.
• ReactJS에는 사실 서버 측 렌더링을 추가하도록 해주는 내장 기능이 포함되어 있지만 제대로 추가하기에 상당한 어려움이 있다. 
• NextJs에서는 자동으로 페이지를 미리 렌더링하기 때문에 개발 시 용이롭다. 특별한 추가 설정 없이도 페이지를 방문하면, 서버측에서 렌덩링이 바로 되어 있는 상태로 나타나게 된다. 따라서 이는 SEO(적절한 검색 엔진 최적화)를 이룬다. NextJs 앱의 페이지에 있는 소스 코드를 확인해보면 단순히 HTML 뼈대만 있는 것이 아니라, 서버에서 받은 모든 컨텐츠가 이미 HTML 페이지에 포함되어 있는 것을 확인할 수 있다.

NextJS 사용시 초기 로딩 혹은 초기 요청의 이후에 브라우저에 표준 React 여전히 실행 중이므로 SPA이며 사용자가 콘텐츠를 확인하는 행동들은 브라우저 상에서 React가 모두 처리하게 된다. 이를 통해 빠르고 상호적인 사용자 경험을 제공하는게 React의 역할이다. 따라서 SSR과 CSR의 융합이 된다.

 

 

2023.11.23 - [Front-End/NextJs] - NextJS의 핵심기능과 장점(2)

NextJS의 핵심기능과 장점(2)