요즘 대부분 서비스를 확인해보면 프론트엔드 프레임워크로 nextjs를 대부분 사용하고 있는 것을 확인할 수 있다.

nextjs 등장 이전 대대수 react를 사용했었는데 이제는 왜 다들 nextjs를 사용하는 걸까?

react

리액트는 SPA(Single Page Application)으로 단일 페이지(index.html)로 구성되어있다. 서비스의 여러 페이지에 각각 진입하였을 때,정확히 말해서는 여러 라우트(route)에 진입하였을 때, 각각의 페이지가 있는 것이 아니라 처음 웹페이지 진입했을 때 로드된 javascript가 렌더링되는 것이다.

html로 만들면 되지? 리액트 왜 써?

리액트를 사용하는 이유는 이전에 작성했던 글이 있으니 이 글을 참고하면 되겠다.

리액트를 사용하는 이유

위 글에서는 컴포넌트를 중심으로 하여 장점들을 설명한다.
컴포넌트를 사용함으로써

• 재사용성,
• 복잡한 코드의 단순화,
• 컴포넌트 단위로 서비스 설계

이러한 장점들을 설명하고 있다. HTML로 웹 페이지를 구성할 때보다 훨씬 효율적으로 코드들을 구성할 수 있다.

그렇다면 리액트의 어떠한 한계점 때문에 nextjs가 나오게 되었고 어떠한 부분들을 해결해줄 수 있을까?

nextjs

Next.js는 React의 한계를 보완하면서 SSR(서버사이드 렌더링)과 정적 사이트 생성(SSG) 기능을 제공하기 위해 등장하였다.

Next.js는 React를 기반으로 한 오픈 소스 웹 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하며, 특히 성능 최적화와 SEO를 개선할 수 있다.

특징

서버사이드 렌더링 (SSR)

Next.js는 클라이언트에서만 렌더링되는 React와 달리, 서버에서 HTML을 미리 생성해 빠르게 사용자에게 제공할 수 있습니다 브라우저는 서버에서 전달받은 HTML을 바로 렌더링하므로, 초기 로딩 속도가 빨라지고, SEO에 유리합니다. 이 방식은 특히 동적인 데이터가 필요한 페이지에서 유용합니다.

정적 사이트 생성 (SSG)

빌드 시점에 모든 페이지를 미리 HTML로 생성하여 저장하고, 사용자 요청 시 서버나 CDN에서 제공하는 방식입니다. 이 방법은 성능이 뛰어나며, 자주 변경되지 않는 콘텐츠에 적합합니다.
이는 또한 트래픽이 많은 경우에도 유용합니다. 이미 빌드시점에 생성된 HTML을 가져다주기 때문입니다.

자동 코드 분할

Next.js는 페이지 단위로 코드를 자동으로 분할하여 성능을 최적화해 줍니다. 필요한 페이지의 코드만 로드되므로, 불필요한 코드 로딩을 최소화할 수 있습니다.

라우팅 내장

Next.js는 파일 기반의 라우팅 시스템을 기본적으로 제공하기 때문에, 추가적인 라우팅 라이브러리를 사용할 필요가 없습니다. 페이지 파일을 생성하면 자동으로 URL 경로가 설정됩니다.

예를 들어, pages/about.js는 /about 경로로 설정됩니다. 이와 함께 Next.js는 동적 라우팅도 지원하여, [id].js 같은 방식으로 동적으로 경로를 생성할 수 있습니다.

API Routes

Next.js에서는 API Routes라는 기능을 통해, 서버리스 방식의 API를 간단하게 구현할 수 있습니다. app router의 경우 app/api 폴더에 파일을 생성하면, 해당 파일이 API 엔드포인트로 제공됩니다. 이를 통해 별도의 백엔드 서버를 구성하지 않고도 간단한 API 서버를 구축할 수 있습니다.

SEO 최적화

Next.js는 SSR과 SSG를 통해 검색 엔진이 크롤링할 수 있는 HTML을 미리 생성해 제공하기 때문에, SEO 성능이 크게 향상됩니다

nextjs가 react의 단점을 해결하고 있는 부분

초기 로딩 속도 개선 및 자동 코드 분할

클라이언트사이드 렌더링(CSR) 방식에서는 브라우저가 서버에서 HTML 파일과 함께 JavaScript를 받아, 서비스에 대한 JavaScript가 실행된 후에야 화면이 렌더링됩니다. 이 과정에서 시간이 걸리기 때문에, 특히 네트워크가 느리거나 복잡한 애플리케이션에서는 첫 화면이 보일 때까지 시간이 많이 소요될 수 있습니다.

반면, 서버사이드 렌더링에서는 서버가 미리 HTML을 생성하여 사용자에게 전달하므로, 브라우저가 즉시 HTML을 렌더링할 수 있습니다. 이는 초기 로딩 시간을 크게 줄여 사용자가 빠르게 페이지를 볼 수 있도록 합니다.

또한 위 특징에서 확인한 것과 같이 Next.js는 페이지 단위로 코드를 자동으로 분할하여 성능을 최적화해준다. 필요한 페이지의 코드만 로드되므로, 불필요한 코드 로딩을 최소화할 수 있다.
리액트처럼 수동으로 코드스플리팅 기법을 적용하지 않아도 되니 개발적으로 수고가 덜 든다.

리액트에서 코드 스플리팅 기법을 사용하면 되지 않나?

React의 코드 스플리팅은 각 페이지나 컴포넌트에 필요한 JavaScript 파일을 분리하여, 처음부터 모든 코드를 로드하지 않고 필요한 코드만 로드하는 방식입니다. 이를 통해 성능을 개선할 수 있는데, React의 React.lazy()와 Suspense나 Webpack 같은 번들러를 활용하면 쉽게 구현 가능합니다.

이를 통해 페이지에 필요한 코드만 로드하기 때문에, 불필요한 코드 로딩을 방지하여 초기 로딩 속도를 개선합니다.

한계점
페이지에 필요한 자바스크립트를 불러오게 설정하더라고 초기 HTML이 여전히 비어 있다.
코드 스플리팅을 하더라도 초기 HTML은 여전히 클라이언트에서 렌더링되기 전까지는 비어 있을 수 있다.

해결방법
nextjs에서는 서버가 미리 HTML을 생성하여 사용자에게 전달하므로, 브라우저가 즉시 HTML을 렌더링할 수 있다.

그러므로 nextjs가 react보다는 사용자에게 조금 더 빠르게 페이지를 보여줄 수 있다는 장점이 있는 것이다.

인터넷 연결 상태와 디바이스 성능

위에서도 언급하였지만 리액트는 클라이언트 사이드 렌더링, nextjs는 주로 서버사이드 렌더링 방식으로 화면을 렌더링해준다.

그렇다면

• A:리액트에서 코드 스플리팅 기법을 적용한 페이지
  와
• B:nextjs에서는 SSG를 제외하고 오로지 SSR로 적용한 페이지

가 있을 때, 과연 A와 B 중 어떤 방법을 택하는 것이 나을까?

CSR는 브라우저에서 html을 렌더링해준다.
SSR은 서버에서 html을 렌더링해준다.

인터넷 연결 상태와 디바이스 성능측면을 고려 했을 때에는 SSR이 더 유리하다고 판단된다.
여기서 인터넷 연결 상태라하면 와이파이 연결 상태나 모바일 데이터 연결 상태를 예를 들을 수 있을 것 같다.

인터넷 연결 상태 문제

• Wi-Fi 연결 문제: Wi-Fi 신호가 약하거나, 인터넷 제공업체의 네트워크 속도가 느릴 경우입니다. 예를 들어, 카페나 공공장소에서 Wi-Fi 신호가 불안정하거나 느릴 수 있습니다.
• 모바일 데이터 환경: 사용자가 LTE, 4G 또는 5G와 같은 모바일 데이터 네트워크를 사용하는데, 네트워크 속도가 제한적이거나, 신호가 약한 경우가 있습니다. 특히 지하철, 지하, 외진 지역 등에서는 네트워크 속도가 느릴 수 있습니다.

디바이스 문제
네트워크 속도와는 별개로, 유저의 디바이스 성능도 영향을 줄 수 있습니다. 예를 들어, 저성능 디바이스에서는 JavaScript 실행 속도가 느릴 수 있고, 페이지 렌더링이 더 오래 걸릴 수 있습니다. 하지만 이 경우는 네트워크 속도가 느리다기보다는 디바이스 성능이 낮다고 표현하는 것이 맞습니다.

위처럼 만약 유저의 인터넷 연결 상태나 디바이스 성능에 문제가 있다고 하였을 때, 웹 페이지에 진입하게 되면 페이지가 느리게 나타날 수 있다는 것이다. 하지만 SSR을 적용한다면 페이지에 대한 HTML을 서버에서 만들어서 주기 때문에 CSR보다는 더 빠르게 페이지를 볼 수 있다.

유저의 인터넷 연결상태나 디바이스 성능이 항상 좋다고 가정할 수 없다. 그렇기 때문에 위와 같이 유저의 인터넷 연결 상태나 디바이스 성능을 고려한다면 SSR이 더 적합하다고 판단한다.

접속량이 많아진다면 서버 부하가 발생할 수 있지만 유저의 인터넷 연결 상태나 디바이스 성능 관점에서 변수만큼 다양성보다는 더 안정적이라고 생각한다.

nextjs의 SSG

SSG(정적 사이트 생성) 는 프로덕션 빌드 과정에서 모든 페이지를 미리 정적 HTML 파일로 생성해 두고, 사용자가 페이지를 요청하면 서버는 그 미리 생성된 HTML 파일을 즉시 제공하는 방식이다.

한 번 빌드되면 이후 요청이 들어올 때마다 미리 생성된 정적 HTML 파일이 제공됩니다. 빌드 시점은 프로젝트를 배포할 시점에 빌드가 되므로 이미 웹 서비스에 진입했을 때에는 해당 페이지는 완성되있는 것이다. 때문에 SSG 방식은 트래픽이 많아도 서버 부하가 거의 없으며, 페이지 로딩 속도가 매우 빠릅니다.

실시간 데이터 처리가 필요하지 않은 페이지에서 사용되는데 주로 변경되지 않는 콘텐츠나 자주 업데이트되지 않는 페이지(블로그, 마케팅 페이지 등)에 적합하다.

React에서는 서버가 따로 존재하지 않기 때문에 이러한 SSG를 사용할 수 없다.서비스 중에 정적인 특성을 가진 페이지가 있더라도 무조건 CSR로 적용해야한다.

반면에 nextjs는 페이지 특성에 따라 정적인 페이지라하면 SSG를 선택함으로써 페이지별로 더 빠른 페이지를 보여줄 수 있는 전략을 선택할 수 있다.

SEO 최적화

SEO

SEO(Search Engine Optimization)는 검색 엔진에서 웹사이트의 가시성을 높여 더 많은 트래픽을 유도하는 전략입니다. 검색 엔진(예: Google, Bing)의 알고리즘이 페이지의 컨텐츠와 구조를 분석해 검색 결과에서 해당 페이지를 얼마나 상위에 노출시킬지를 결정합니다. 좋은 SEO는 웹사이트의 접근성을 높이고, 브랜드 인지도와 방문자를 증가시키는 데 매우 중요한 역할을 합니다.

SEO의 핵심 요소는 다음과 같습니다:

• 키워드 최적화: 사람들이 자주 검색하는 키워드를 웹사이트에 자연스럽게 포함시키는 것
• 메타 데이터: 웹페이지의 제목, 설명, 키워드 등 메타 태그를 최적화하여 검색 엔진에 중요한 정보를 제공
• 페이지 로딩 속도: 로딩 속도가 빠를수록 검색 엔진은 해당 웹사이트를 긍정적으로 평가함

React와 Next.js의 SEO 관점 비교

React의 SEO 단점:

• 초기 로딩 시 검색 엔진 봇 문제: 검색 엔진 크롤러가 페이지를 방문할 때, 페이지가 처음에는 빈 HTML을 가져오고 이후에 자바스크립트를 통해 콘텐츠를 로딩합니다. 일부 검색 엔진 봇은 자바스크립트를 완전히 실행하지 않거나 실행하는 데 시간이 걸리기 때문에, 콘텐츠가 제대로 인덱싱되지 않을 수 있습니다.

  검색 엔진은 HTML 콘텐츠를 우선적으로 본다:
  검색 엔진은 HTML을 기반으로 페이지를 크롤링하고 인덱싱합니다. 즉, 검색 엔진은 웹 페이지에서 메타 태그뿐만 아니라 페이지의 실제 콘텐츠(텍스트, 이미지 등)를 기반으로 순위를 매깁니다.

• SEO 성능 개선 방법: React의 SEO를 개선하려면 서버 사이드 렌더링(SSR)을 구현하거나, react-snap 같은 프리 렌더링 도구를 사용해 SEO 문제를 보완할 수 있습니다.

Next.js의 SEO 장점:

• 서버 사이드 렌더링(SSR): SSR을 사용하면, 페이지가 서버에서 미리 렌더링된 HTML을 제공하기 때문에 검색 엔진 봇은 즉시 콘텐츠를 크롤링할 수 있습니다. 자바스크립트 로딩 없이도 콘텐츠가 즉시 보이므로 SEO에 매우 효과적입니다.

• 정적 사이트 생성(SSG): Next.js는 빌드 시점에 정적 HTML 파일을 생성할 수 있습니다. 이러한 정적 파일은 매우 빠른 로딩 속도를 제공하며, 검색 엔진이 바로 콘텐츠를 인덱싱할 수 있어 SEO에 매우 유리합니다.

다중 페이지 SEO 최적화라면? Nextjs 선택!

SEO를 고려해서 Next.js를 사용하려는 이유는 보통 여러 페이지가 검색 엔진에서 최적화되도록 하기 위해서이다. 즉, Next.js는 다중 페이지 SEO 최적화에 적합하다.

서비스 자체만 SEO 노출되도 괜찮아! React 선택!

단, 웹 서비스 자체만 검색엔진에 노출하는 것이 목적이라면, 즉 다중 페이지가 검색 엔진에 노출될 필요없이 html 하나에만 meta들에 서비스에 대한 정보를 기재하여 서비스 자체만 노출하면 되는 것이 목적이라면 굳이 nextjs를 선택하기에 애매해진다.
물론 검색엔진이 meta뿐만 아니라 실제 콘텐츠(h1,p~~)를 기반으로 순위를 매긴다고 하니 콘텐츠 또한 중요하겠지만 리액트의 index.html에 meta 및 title 태그를 잘 작성하면 되긴 한다.

검색엔진 노출만 가지고 프레임워크를 선택하지는 않을 테지만 검색엔진관점에서만 본다면 위와 같이 판단할 수 있을 것 같다. 그래도 검색엔진 측면에서 nextjs가 react보다는 더 장점을 가지고 있다고 생각하면 될 것 같다.