23.12.22 Next.js 간단 설명

Next.js 는 무었인가

• React.js를 기반으로 만들어진 프레임워크

https://www.interviewbit.com/blog/framework-vs-library/

Framework vs Library: Full Comparison

 

• with library → React, React-router-dom, redux(recoil) etc…
• with framwork → everything is in it
• Full stack web application
• FE + BE

 

라이브 러리와 프레임 워크의 차이

• 라이브 러리 (개별적으로 가지고올수있음)(특정한 문제를 해결하기 위한 툴)
• -> 리액트 ,리액트라우터돔,리덕스,리코일
• 프레임 워크 (큰 단위의 솔리션을 위한 골격을 제공해준다.문제를 해결하는 툴도 포함되어 있다.)
• -> 이미 갖춰진 환경을 사용하면도딤 (앵귤러,스프링,넥스트js ) 개발자가 코딩만 집중하면된다
• 요즘 가벼운 개발은 개발자 한명이 맡아 하는경우가 많고 next를 사용하는 경우가 굉장히 많아지고있다

 

next 6가지 특징

• 복잡한 설정이 없다 -여러가지 설정이 필요없어 개발에만 집중가능
• 자바스크립트만으로 프론트,벡엔드 모두 가능
• 자동으로 코트 스플리팅 가능,(웹페이징 로딩을 줄여주는 기능):사용자가 필요한 부분만 로딩해서 로딩시간절약
• ㄴ 그리고 서버사이드 렌더링 가능함
• 다양하게 data-fetching 가능(언제,어디서,어떻게,얼마나) 1번/일정주기/영구
• 요청사항 예상 가능 : 사용자가 필요한것만 데이터를 받아올수있음
• 배포가 쉬워짐 : 기존의 풀스택 배포방식과 다름

---

주요 렌더링 기법

 

1. CSR(Client Side Rendering)

 

• 특징
• 순수 리액트 사용했을 때 100%
• 브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링하는 방식입니다.
• 렌더링을 누가 하는지 같이 생각해봅시다.
• React.js에서 최초 렌더링이 일어나는 원리
• 장점
• (최초 한번 로드가 끝나면) 사용자와의 상호작용이 빠르고 부드럽습니다.
• 서버에게 추가적인 요청을 보낼 필요가 없기 때문에, 사용자 경험이 좋습니다.
• 서버 부하가 적음
• 단점
• 첫 페이지 로딩 시간(Time To View)이 길 수 있습니다.
• JavaScript가 로딩되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리합니다.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, Client Side Rendering!</h1>;
}

// index.js
ReactDOM.render(<App />, document.getElementById('root'));

 

 

2. SSG(Static Site Generation)

• 특징
• 서버에서 페이지를 렌더링하여 클라이언트에게 HTML을 전달하는 방식입니다.
• 최초 빌드시에만 생성이 됨
• 사전에 미리 정적페이지를 여러개 만들어놓음 → 클라이언트가 홈페이지 요청을 하면, 서버에서는 이미 만들어져있는 사이트를 바로 제공! → 클라이언트는 표기만 함
• 장점
• 첫 페이지 로딩 시간이 매우 짧아(TTV) 사용자가 빠르게 페이지를 볼 수 있습니다. 또한, SEO에 유리합니다.
• CDN(Content Delivery Network) 캐싱 가능
• 단점
• 정적인 데이터에만 사용할 수 있음
• 사용자와의 상호작용이 서버와의 통신에 의존하므로, 클라이언트 사이드 렌더링보다 상호작용이 느릴 수 있습니다. 또한, 서버 부하가 클 수 있습니다.
• 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가

import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;

 

https://www.gatsbyjs.com/

The Best React-Based Framework | Gatsby

 

3. ISR(Incremental Static Regeneration)

• 특징
• SSG처럼 정적 페이지를 제공
• 설정한 주기만큼 페이지를 계속 생성해 줌
• ex : 주기가 10분이라면?
• → 10분마다 데이터베이스 또는 외부 영향 때문에 변경된 사항을 반영하는 역할
• 정적 페이지를 먼저 보여주고, 필요에 따라 서버에서 페이지를 재생성하는 방식입니다.
• 장점
• 정적 페이지를 먼저 제공하므로 사용자 경험이 좋으며, 콘텐츠가 변경되었을 때 서버에서 페이지를 재생성하므로 최신 상태를 유지할 수 있습니다.
• CDN 캐싱 가능
• 단점
• 동적인 콘텐츠를 다루기에 한계가 있을 수 있습니다. 실시간 페이지 아님
• 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가

import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { 
    props: { data },
    revalidate: 60, // 1초 후에 페이지 재생성
  };
}

export default HomePage;

 

 

4. SSR

• 특징
• 빌드 시점에 모든 페이지를 미리 생성하여 서버 부하를 줄이는 방식입니다.
• SSG, ISR처럼 렌더링 주체가 서버!
• 클라이언트의 요청 시 렌더링
• C → S : 이 페이지 줘!
• S → C : (데이터베이스 읽고 등등 한 후) html 파일을 제공
• 장점
• 빠른 로딩 속도(TTV)와 높은 보안성을 제공합니다. 또한, 서버 부하가 적습니다.
• SEO 최적화 좋음
• 실시간 데이터를 사용
• 마이페이지 처럼 데이터에 의존한 페이지 구성 가능
• CDN 캐싱 불가
• 단점
• 사이트의 콘텐츠가 변경되면 전체 사이트를 다시 빌드해야 하는데, 이 과정이 시간이 오래 걸릴 수 있습니다. → 서버 과부하
• 요청할 때 마다 페이지를 만들어야 함

import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getServerSideProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;

 

---

Hybrid, Hydration

1. Hybrid

• 완벽한 렌더링 방식은 없음!
• 여러 렌더링 방식을 혼합해서 완벽한 페이지를 구성
• EX: 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 활용하는 방식
• → 똑같은 프로젝트라고 해도, 모든 페이지의 렌더링 구성 방법이 다를 수 있음

1. Hydration

• 서버에서 렌더링된 정적 HTML을 브라우저에서 동적으로 다시 렌더링하는 과정
• 서버에서 렌더링된 정적 페이지가 클라이언트에서 JavaScript에 의해 동적인 웹 페이지로 변화하는 과정

 

=> ✅ 비유를 통해 알아보기!

그림을 그리는 과정에 비유해볼께요.

먼저, 서버에서는 스케치북에 초안을 그리는 것처럼 웹 페이지의 기본적인 틀을 HTML로 그립니다. 이것이 바로 서버 사이드 렌더링(SSR)의 과정입니다.

그 다음으로, 이 초안을 가지고 있는 사용자의 브라우저는 그림의 세부 사항을 채워나가는 작업을 합니다. 예를 들어, 색칠을 하거나, 세부적인 선을 그려나가는 것처럼, JavaScript를 사용하여 웹 페이지에 동적인 기능을 추가합니다. 이 과정이 바로 하이드레이션입니다.

즉, 하이드레이션은 서버에서 제공한 웹 페이지의 초안에 브라우저에서 세부 사항을 채워나가는 것입니다. 이를 통해 사용자는 빠르게 웹 페이지를 볼 수 있으면서도, 동적인 상호작용을 경험할 수 있습니다.