Next.js 시작

개발/Next.js

whatd0udo 2024. 3. 18. 22:24

react 기반의 오픈 소스 웹 개발 프레임 워크이다.

다양한 렌더링 방식을 지원하며 개발자가 더 빠르고 효율적으로 웹 사이트를 구축하도록 돕는다

1. 자동 코드 분할 : 페이지별로 자동으로 코드를 분할하여 필요한 코드만 로드하게해서 애플리케이션 로딩 속도 향상

2. 서버사이드 렌더링 : SEO 최적화와 초기 페이지 로딩 시간 단축을 위해 서버에서 React 컴포넌트를 렌더링 함

3. 정적 사이트 생성 : 빌드 타임에 HTML 파일을 생성하여 배포하는 기능 지원 -> 빠른 페이지 로딩 속도 제공

4. 파일 기반 라우팅 : pages 디렉토리에 파일을 추가함으로써 자동으로 라우트 설정됨

5. API 라우트 : API 엔드 포인트를 쉽게 생성할 수 있어 백엔드 로직을 동일한 프로젝트 내에서 관리 가능

6. 내장된 CSS 와 SCSS 지원 : CSS - in - JS 라이브러리를 사용하거나 , 전통적인 CSS/Sass 파일을 컴포넌트에 직접 임포트 가능

7. 이미지 최적화 : 로딩시간 단축 및 성능 개선

웹 페이지의 초기 로딩 속도를 개선하고, 검색 엔진 최적화를 향상시키기 위한 기술

이 기술은 웹 페이지의 HTML을 서버에서 미리 생성하고 이를 클라이언트(브라우저)로 전송하는 방식

클라이언트는 서버로부터 전송받은 HTML을 즉시 렌더링 할 수 있기 때문에

사용자는 페이지의 초기 로딩이 빠르게 이루어진다 인상을 받음

특징

1. 빠른 초기 로딩

2. 검색 엔진 (SEO) 최적화

3. 소셜 미디어 최적화

단점

1. 다량의 리소스 소모 : 서버에서 html을 생성하는 과정이 복잡하여 리소스 소모가 많이 될 수 있음

2. 서버 부하 증가 : 사용자의 요청에 따라 실시간으로 페이지 렌더링 해야하는 경우 서버 부하 증가

해결방법

SSR + CSR 혼합하여 사용하는 하이브리드 접근 방식 지원

정적 사이트 생성 ( SSG , Static Site Generation)

빌드 타임에 모든 페이지를 미리 HTML 파일로 생성하여 서버에 저장하는 기술 , 웹 개발 중 하나

이렇게 생성된 정적 파일들은 요청시 서버에 바로 제공되어 추가적인 서버 사이드 처리나 데이터 베이스 조회없이 클라이언트에 전달 가능

특징

1. 성능 : 미리 생성된 정적 파일을 서비스 하기 때문에 서버 처리 시간이 필요 없어 로딩 시간이 매우 빠름

2. 보안 : 데이터 베이스 조회나 서버 사이드 코드 실행이 없기 때문에 보안 취약점이 상대적으로 적다

3.스케일링 : 정적 ㅏ일을 서빙하는것은 리소스가 적게 들기 때문에 비용이 절감됨

4. 호스팅 비용 : 정적 파일을 호스팅 하는데 필요한 리소스가 적기때문에 비용 절감

5. 검색 엔진 최적화 : 완성된 html 페이지를 제공하기때문에 검색 엔진 콘텐츠를 더 잘 이해하고 인덱싱 할 수 있음