WEB개발/REACT

[React] Next.js

wooyeon06 2023. 12. 5. 10:01

 : Next.js는 React 기반의 웹 애플리케이션을 빌드하기 위한 JavaScript 프레임워크입니다. Next.js는 React를 사용하여 정적 및 동적 웹 페이지를 빌드하는 데 도움을 주며, 많은 기능과 성능 최적화를 제공합니다.

 

기존의 전통적인 SSR 방식은 웹페이지 이동 시에 페이지를 요청할 때마다 서버로부터 새롭게 생성된 HTML 파일을 받아와 화면에 렌더링하였습니다. 이러한 방식은 서버 자원을 많이 소모하고 불필요한 트래픽을 유발했습니다.

Next.js는 초기 페이지 로딩에 대해서는 정적 사이트 생성(SSG), SSR 방식으로 동작시킬 수가 있고, 이후의 요청에 대해서는 기본적으로 클라이언트사이드 렌더링(CSR) 방식으로 동작하기 때문에 SSR 방식의 장점인 SEO에 유리하면서도 CSR의 이점을 활용할 수 있습니다.

React는 CSR(Client-side Rendering)로, 처음에 브라우저가 빈 HTML을 파일을 받아 아무것도 보여주지 않다가, 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여줍니다

 

 

  • 서버 사이드 렌더링(SSR) : Next.js는 기본적으로 서버 사이드 렌더링을 지원합니다. 이것은 페이지를 서버에서 렌더링하고 클라이언트에게 결과를 제공함으로써 초기 로딩 속도를 향상시킵니다.

  • 정적 생성(Static Generation) : 정적 생성을 사용하여 사전에 페이지를 렌더링하고 CDN에 저장함으로써 성능을 극대화할 수 있습니다. 이는 자주 변경되지 않는 페이지에 적합합니다.

  • 동적 라우팅(Dynamic Routing) : Next.js는 동적 라우팅을 통해 쉽게 동적 페이지를 만들 수 있습니다. 파일 시스템을 기반으로한 경로 매핑을 통해 유연한 동적 라우팅이 가능합니다.

  • API Routes : 서버리스 함수를 구현할 수 있는 API Routes를 제공합니다. 이를 통해 서버에서 데이터를 가져와 페이지에 제공하거나 데이터를 업데이트할 수 있습니다.

  • Hot Module Replacement (HMR) : 개발 중에 모듈이 수정될 때 페이지를 다시 로드하지 않고도 모듈을 업데이트할 수 있는 HMR을 지원합니다.

  • TypeScript 지원: Next.js는 TypeScript를 공식적으로 지원하며, TypeScript를 사용하여 더 강력한 정적 타입 검사를 수행할 수 있습니다.

  • React, Webpack, Babel 및 기타 많은 도구들이 미리 구성되어 있어, 설정에 대한 걱정 없이 빠르게 프로젝트를 시작할 수 있습니다.

  • Next.js는 React 개발자들이 좋아하는 React의 선언적 구문과 함께 서버 사이드 렌더링, 정적 생성, 동적 라우팅 등의 기능을 제공하여 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 데 도움이 되는 강력한 프레임워크입니다.

 

 

 

Pre-rendering

: 각 페이지의 HTML을 미리 생성합니다.

 

Next.js에서 미리 렌더링 하는 방식은 두 가지로 나뉘며, HTML이 생성되는 시점이 다르다. 

하나는 빌드 타임에 HTML에 생성되어 매 요청마다 이를 재사용하게 해주는 SSG(Static-site Generation)이고, 

다른 하나는 매 요청마다 HTML을 생성하는 SSR(Server-side Rendering)이다.

Next.js는 기본적으로 SSG를 이용합니다.

 

 

 

Hydration

: Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭시키는 과정을 말한다.

 

Next.js Server에서는 Pre-Rendering된 웹 페이지를 클라이언트에게 보내고 나서, 바로 리액트가 번들링 된 자바스크립트 코드들을 클라이언트에게 전송한다. 

 

이 자바스크립트 코드들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서, 각자 자기 자리를 찾아가며 매칭이 된다.

이 과정을 Hydrate라고 부른다.

 

 

단점 

  • 너무 느린 핫 리로드 
  • 개발 모드에서는 느린 정적 페이지
  • 서버 코드와 클라이언트 코드가 혼재

 

환경구축

 

1. vscode 확장프로그램 설치

  • better comments: 주석이 여러가지 색상으로 강조됨
  • path autocomplete: 파일을 import 할 때 경로를 완성시켜 주는 도구이다. 원래 이미지 파일 경로는 자동완성되지 않는데 이를 통해 이미지 파일 경로도 자동완성 된다.
  • ayu: 코드 색상 테마. 설치하고 원하는 색상을 설정하면 되는데 책에서는 Ayu Mirage Bordered 를 사용한다.
  • EsLint: 코드 분석기
  • Prettier: 코드 포맷

 

 

2. Next.js  + typescript 프로젝트 생성

yarn create next-app --typescript ${프로젝트이름}

 

 

 

3. 프로젝트 실행

yarn dev

 

 

 

CSR, SSG, SSR 변천사

 

 

CSR (Client-Side Rendering), SSG (Static Site Generation), SSR (Server-Side Rendering) 기술은 웹 애플리케이션의 성능과 사용자 경험을 최적화하기 위한 다양한 접근 방식을 나타내며, 이들은 웹 개발의 역사와 함께 발전해 왔습니다. 다음은 이들 기술의 변천사에 대한 설명입니다.

 

1. SSR (Server-Side Rendering - 초기 웹의 지배적 방식 1990년대 ~ 2000년대 초반)

  • 정의: 서버에서 모든 HTML을 생성한 후, 클라이언트(브라우저)로 전송하는 방식입니다.

  • 역사: 초기 웹사이트는 대부분 SSR 방식으로 구축되었습니다. 사용자가 페이지를 요청하면 서버가 데이터를 처리하고 HTML을 생성하여 클라이언트에게 전달했습니다. 이 방식은 사용자가 보는 내용이 서버에서 완전히 렌더링 되었기 때문에 SEO(검색 엔진 최적화)에 유리했습니다.

  • 한계: 매번 새로운 페이지를 로드할 때마다 서버에서 전체 페이지를 다시 렌더링하고 전송해야 하기 때문에, 복잡한 웹 애플리케이션에서는 성능 문제(특히 느린 페이지 로딩 시간)가 발생할 수 있습니다.

 

2. CSR (Client-Side Rendering - 싱글 페이지 애플리케이션(SPA)의 등장 2000년대 후반 ~ 2010년대)

  • 정의: 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링하고, 서버는 주로 JSON 데이터만을 제공하는 방식입니다.

  • 역사: 2000년대 후반에 JavaScript와 AJAX 기술이 발전하면서 CSR이 인기를 끌기 시작했습니다. Angular, React, Vue.js와 같은 JavaScript 프레임워크가 등장하면서 SPA(싱글 페이지 애플리케이션)가 널리 사용되었습니다.

  • 장점: 애플리케이션이 처음 로드된 후, 사용자와의 상호작용에 따른 페이지 전환이 매우 빠릅니다. 서버와의 통신 없이 클라이언트에서 즉각적으로 UI를 업데이트할 수 있어 사용자 경험이 개선되었습니다.

  • 한계: 초기 로딩 시간이 길어질 수 있으며, 클라이언트 측에서 많은 처리가 이루어지기 때문에 저사양 장치에서 성능 저하가 발생할 수 있습니다. 또한, CSR 기반의 SPA는 SEO에 불리할 수 있습니다.

3. SSG (Static Site Generation - 정적 사이트의 부활 2010년대 중반 ~ 현재)

  • 정의: 빌드 시점에 모든 HTML 파일을 미리 생성하여, 서버에서 요청이 있을 때마다 미리 생성된 정적 파일을 제공하는 방식입니다.

  • 역사: Jekyll, Hugo, Gatsby, Next.js와 같은 정적 사이트 생성 도구들이 인기를 끌면서, SSG 방식이 부활했습니다. 초기의 정적 사이트는 간단한 블로그나 포트폴리오 사이트에 주로 사용되었지만, 최신 SSG 툴들은 데이터 소스와 API를 통합하여 복잡한 웹사이트도 정적으로 생성할 수 있게 되었습니다.

  • 장점: 매우 빠른 페이지 로딩 속도와 SEO 최적화가 가능하며, 서버 부하가 적습니다. 정적 파일은 CDN(Content Delivery Network)을 통해 전 세계적으로 빠르게 제공될 수 있습니다.

  • 한계: 콘텐츠가 자주 업데이트되는 동적인 웹 애플리케이션에서는 적합하지 않을 수 있으며, 빌드 과정이 오래 걸릴 수 있습니다.

 

4. 현대적 통합 방식: Hybrid Rendering  (최신 웹 프레임워크의 통합적 접근 (2020년대 ~ 현재)

 

  • 발전: 최근에는 SSR, CSR, SSG의 장점을 결합한 하이브리드 방식이 주목받고 있습니다. 예를 들어, Next.js와 같은 프레임워크는 특정 페이지를 SSR로 렌더링 하거나 SSG로 미리 생성할 수 있으며, 동적인 부분은 CSR로 처리합니다.

  • 이점: 웹 개발자는 애플리케이션의 각 페이지나 컴포넌트의 요구에 따라 최적의 렌더링 방식을 선택할 수 있어, 성능과 SEO, 사용자 경험을 모두 고려한 웹 애플리케이션을 개발할 수 있습니다.

 

요약

  • SSR은 초기 웹에서 주류였으며, SEO와 데이터 중심의 웹사이트에 유리했습니다.
  • CSR은 SPA와 함께 등장하여 사용자 경험을 향상시켰으나, SEO와 초기 로딩 속도에서 한계를 보였습니다.
  • SSG는 정적 파일을 미리 생성하여 제공함으로써 속도와 SEO에 최적화된 방식을 제시했으며, 최근 다시 인기를 얻고 있습니다.
  • 현대의 하이브리드 접근법은 이 세 가지 방식을 통합하여 웹 애플리케이션을 더 유연하고 효율적으로 만들고 있습니다.

 

 

 

https://velog.io/@hyeewooon/nextjs

https://helloinyong.tistory.com/315