데이터를 그리기 위한 Front_End 공부하기 : React _ 02 == React.js vs Next.js [CSR vs SSR / SPA vs MPA / 리액트 라우터(React-Router)]

Data-Forge : 데이터로 세상 이해해보기.·2025년 4월 6일
Reactnext개발공부프론트엔드

데이터를 그리기 위한 Front_End : React & Next

목록 보기
4/7
post-thumbnail

데이터를 그리기 위한 FrontEnd 언어 공부하기 : React 02 == React.js vs Next.js [CSR vs SSR / SPA vs MPA / 리액트 라우터(React-Router)]

▽ React _ 02 = React.js vs Next.js [CSR vs SSR / SPA vs MPA / 리액트 라우터(React-Router)]

목  차

1. 리엑트와 Next.js의 개요.
2. CSR vs SSR
3. SPA vs MPA
4. React-Router
5. SEO와 사용성 측면에서의 선택.

1. 리엑트와 Next.js의 개요.

  • React.js는 JavaScript 라이브러리로,
    • 주로 웹 애플리케이션의 인터랙티브한 사용자 인터페이스를 구축하는 데 사용됩니다.
  • Next.js는 리액트 기반의 프레임워크로,
    • Server-Side Rendering (SSR)과 Static Site Generation (SSG)을 지원하여
      SEO와 성능을 향상시킵니다.

.

리액트의 특징

  • 고성능 렌더링: Virtual DOM을 통해 빠른 렌더링을 제공합니다.

  • 재사용 가능한 컴포넌트: 코드의 재사용성을 높입니다.

  • 큰 커뮤니티: 다양한 리소스와 도구를 제공합니다.

.

Next.js의 특징

  • SSR과 SSG 지원: SEO에 유리하고, 초기 로딩 속도가 빠릅니다.

  • 파일 기반 라우팅: 설정이 간단합니다.

  • 자동 정적 최적화: 페이지를 자동으로 정적 HTML로 최적화하여 성능을 향상시킵니다.

2. CSR vs SSR

CSR(Clinet-Side Rendering)

  • 특징 : CSR은 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링합니다.

    • 초기 HTML 파일은 빈 상태로 제공되며,
      클라이언트가 JavaScript를 실행하여 페이지를 동적으로 업데이트합니다.

  • 장점:

    • 동적 콘텐츠 업데이트:

      • CSR은 클라이언트 측에서 JS를 사용하여 페이지를 업데이트 할 수 있어서,
        '실시간 데이터 업데이트가 필요한 애플리케이션에 적합'합니다.

    • 서버 부담 감소 :

      • 서버는 초기 HTML 파일만 제공하면 되므로, 서버 부담이 줄어들고
        빠른 페이지 업데이트를 제공 가능합니다.

  • 단점:

    • SEO에 불리함
      • 초기 로딩 시간이 느릴 수 있으며, SEO에 불리할 수 있습니다.

React.js와 CSR.

  • 리액트는 기본적으로 CSR을 사용합니다.
  • yarn create-react-app 같은 명령어를 통해 CSR 기반의 SPA를 쉽게 구축 가능합니다.
  • CSR은 '동적인 사용자 경험'을 제공하며,
    • 특히 실시간 데이터 업데이트가 필요한 애플리케이션에 적합합니다.

SSR(Server-Side Rendering)

  • 특징 :** SSR은 서버에서 페이지를 렌더링하여 완성된 HTML을 클라이언트에게 제공합니다. 이는 SEO에 유리하며, 초기 로딩 속도가 빠릅니다.

  • 장점:

    • SEO 우수:
      • SSR은 서버에서 페이지를 렌더링하여 완성된 HTML을 제공하므로, SEO에 유리.
    • 빠른 초기 로딩:
      • 사용자가 콘텐츠를 빠르게 볼 수 있어서 사용자 경험(ux)을 향상시킵니다.

  • 단점:

    • 서버 부담 증가
      • 서버가 각 요청마다 페이지를 렌더링해야 하므로, 서버 부담이 증가할 수 있습니다.

Next.js와 SSR.

  • Next.js는 SSR을 지원하여 SEO와 성능을 향상시킵니다.
  • getServerSideProps 함수를 사용하여 서버 측에서 데이터를 불러와 페이지를 렌더링할 수 있습니다.
  • 이는 동적 콘텐츠가 많은 경우에 적합합니다.

동적 콘텐츠가 많은 경우.

CSR.

  • 동적 콘텐츠가 많은 경우 CSR이 적합할 수 있습니다.
    • CSR은 클라이언트 측에서 실시간으로 데이터를 업데이트할 수 있어,
      사용자 경험을 향상시킬 수 있습니다.
    • 그러나 SEO에 주의가 필요합니다.
      .

SSR.

  • 동적 콘텐츠가 많더라도 SEO가 중요한 경우, SSR을 사용하는 것이 좋습니다.
  • Next.js와 같은 프레임워크를 통해 SSR과 CSR을 혼합하여 사용할 수도 있습니다

결론.

  • 동적 콘텐츠가 많은 경우, CSR은 빠른 사용자 경험을 제공하지만 SEO에 불리할 수 있습니다.
  • 반면, SSR은 SEO에 유리하지만 서버 부담이 증가할 수 있습니다.

따라서 프로젝트의 요구 사항에 따라 CSR과 SSR을 적절히 조합하여 사용하는 것이 중요합니다.
Next.js와 같은 프레임워크를 활용하면 두 가지 방식을 쉽게 혼합할 수 있습니다

3. SPA vs MPA

SPA(Single-Page Application)

  • 특징 : SPA는 한 페이지 내에서 동적으로 콘텐츠를 업데이트합니다.
    - 페이지 전환 시 전체 페이지를 다시 로딩하지 않기 대문에 빠른 사용자 경험을 제공합니다.

  • 장점:

    • 동적 콘텐츠 업데이트 :
      • SPA는 동적으로 콘텐츠를 업데이트할 수 있어서, 실시간 데이터 업데이트가 필요한 애플리케이션에 적합합니다.
    • 사용자 경험:
      • 페이지 전환 시 전체 페이지를 다시 로딩하지 않아 사용자 경험을 향상시킵니다.
      • 이는 특히 실시간 상호작용이 많은 애플리케이션에 유리합니다.

  • 단점:

    • SEO에 불리함:
      • SPA는 SEO에 불리할 수 있으며, 초기 로딩 시간이 느릴 수 있습니다.

리액트와 SPA.

  • 리액트는 주로 SPA를 구축하는 데 사용됩니다.
  • React Router를 통해 클라이언트 측 라우팅을 지원하여 SPA에서 URL을 관리하고,
    사용자 경험을 향상시킵니다.

MPA(Multi-Page Application)

  • 특징 :
    MPA는 각 페이지마다 별도의 HTML 파일을 제공하여 페이지 전환 시 전체 페이지가 다시 로딩됩니다.

  • 장점:

    • SEO 우수.
      • MPA는 각 페이지가 독립적으로 최적화될 수 있어서 SEO에 유리합니다.
    • 초기 로딩 속도.
      • 초기 로딩 속도가 빠를 수 있으며, 각 페이지가 독립적으로 로딩됩니다.

  • 단점:

    • 페이지 전환 시 느림.
      • 페이지 전환 시 전체 페이지를 다시 로딩해야 하므로 느릴 수 있습니다.

Next.js와 MPA

  • Next.js는 MPA와 유사한 경험을 제공하기 위해 파일 기반 라우팅을 지원합니다.
  • 각 페이지는 별도의 파일로 관리되며, 이는 MPA의 장점을 활용할 수 있게 합니다.

결론.

  • 동적 콘텐츠가 많은 경우, SPA가 더 효율적일 수 있습니다.
    • SPA는 동적으로 콘텐츠를 업데이트하고, 사용자 경험을 향상시킬 수 있기 때문입니다.
  • 그러나 SEO가 중요한 경우, MPA를 고려할 수도 있습니다.
    • MPA는 각 페이지가 독립적으로 최적화될 수 있어 SEO에 유리합니다.

따라서 프로젝트의 요구 사항에 따라 적절한 아키텍처를 선택하는 것이 중요합니다.

  • SPA: 동적 콘텐츠가 많은 경우 SPA를 사용하여 실시간 업데이트와 사용자 경험을 향상시킬 수 있습니다.

    • React와 같은 라이브러리를 활용하면 SPA 개발이 용이합니다.

  • MPA: SEO가 중요한 경우 MPA를 사용하여 각 페이지를 독립적으로 최적화할 수 있습니다.

    • 이는 특히 대규모 콘텐츠가 있는 웹사이트에 적합합니다.

4. React-Router

  • React Router는 클라이언트 측 라우팅을 지원하는 라이브러리입니다.

    • 이는 SPA에서 URL을 관리하고, 사용자 경험을 향상시킵니다.
    • 그러나 SEO에 주의가 필요합니다.

  • 특징:

    • BrowserRouter, Link, Route 등의 컴포넌트를 제공하여
    • 클라이언트 측에서 URL을 관리하고 페이지를 렌더링합니다.

  • 장점:

    • 빠른 페이지 전환:

      • 페이지 전환 시 빠른 사용자 경험을 제공합니다.

    • 서버 요청 감소:

      • 서버 요청을 줄여 성능을 향상시킵니다.

  • 단점:

    • 초기 설정 필요:

      • 초기 설정이 필요하며, 복잡한 라우팅 로직을 관리해야 할 수 있습니다.

    • SEO 최적화 필요:

      • SEO 최적화가 필요합니다.

  • SEO와 사용성 측면에서의 선택

    • SEO 우선: Next.js의 SSR과 SSG을 사용하여 SEO를 향상시킬 수 있습니다.

      • 이는 검색 엔진 크롤러가 콘텐츠를 쉽게 인덱싱할 수 있게 해줍니다.

    • 사용성 우선: React의 CSR을 사용하여 동적인 사용자 경험을 제공할 수 있습니다.

      • 이는 빠른 페이지 업데이트와 클라이언트 측 처리로 인해 서버 부담이 줄어듭니다.

  • CSR vs SSR:

    • 프로젝트의 요구에 따라 CSR과 SSR 중 하나를 선택하거나, 두 가지를 조합하여 사용할 수 있습니다.

  • SPA vs MPA:

    • SPA는 빠른 사용자 경험을 제공하지만 SEO에 불리할 수 있습니다.
    • MPA는 SEO에 유리하지만 페이지 전환 시 느릴 수 있습니다.

React Router: React Router는 SPA에서 필수적인 도구로, 클라이언트 측 라우팅을 통해 빠른 페이지 전환과 동적인 사용자 경험을 제공합니다.

5. SEO와 사용성 측면에서의 선택.

  • SEO 우선:

    • Next.js의 SSR과 SSG을 사용하여 SEO를 향상시킬 수 있습니다.
    • 이는 검색 엔진 크롤러가 콘텐츠를 쉽게 인덱싱할 수 있게 해줍니다.

  • 사용성 우선:

    • React의 CSR을 사용하여 동적인 사용자 경험을 제공할 수 있습니다.
    • 이는 빠른 페이지 업데이트와 클라이언트 측 처리로 인해 서버 부담이 줄어듭니다.

  • 성능 최적화 측면.

    • Lazy Loading:

      • React.lazy와 Suspense를 사용하여 필요한 컴포넌트만 로딩하여 성능을 향상시킵니다.

    • 이미지 최적화:

      • ImageOptim이나 TinyPNG를 사용하여 이미지 파일을 압축하여 로딩 속도를 향상시킵니다.

profile
Data-Forge : 데이터로 세상 이해해보기.
Roll with the punches
이전 포스트

데이터를 그리기 위한 Front_End 언어 공부하기 : React _ 01

다음 포스트

데이터를 그리기 위한 Front_End 언어 공부하기 : React _ 03 == API에 대해서 이해해보기.

0개의 댓글