Next.js
성능 (Performance)
- 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 제공하여 초기 로드 시간을 단축한다.
- 코드 스플리팅 및 이미지 최적화와 같은 기능으로 런타임 성능을 향상시킨다.
📌 잠깐! Next.js 가 제공하는 렌더링 방식에는 어떤 것들이 있을까?
1. SSR (Server Side Rendering)
- 브라우저가 요청을 보낼 때마다 서버에서 HTML 을 생성하여 반환
- 요청마다 새로운 데이터를 가져오기 때문에, 실시간 데이터 반영이 필요한 경우에 적합
- SEO (검색 엔진 최적화) 에 강한 유형이다.
🧩 뉴스 사이트의 경우
실시간 뉴스를 제공하는 사이트
-> 항상 최신 뉴스 기사를 표시해야 하기 때문에, 사용자가 방문할 때마다 최신 데이터를 렌더링- 사용자가 뉴스 페이지에 접속하면 Next.js 서버가 요청을 받음
- News API 에서 최신 기사 데이터를 받아옴
- 받아온 데이터를 기반으로 HTML 페이지를 생성하여 클라이언트에 전달
- 브라우저는 받은 HTML 을 렌더링, 이후 React 가 hydration* 하여 인터랙티브하게 동작함
hydration*
: 서버에서 렌더링된 HTML을 클라이언트에서 React가 자신의 가상 DOM과 비교하면서 컴포넌트를 다시 구성하는 과정이다. 이 과정이 필요한 이유는 서버가 미리 생성한 HTML은 정적 콘텐츠일 뿐이기 때문에, React 가 동적 UI로 변환하는 과정이 필요하다.
2. CSR (Client-Side Rendering)
- 초기에는 빈 HTML 을 전달하고, 브라우저에서 데이터를 요청하여 렌더링하는 방식이다.
- React 의
useEffect를 사용하여 클라이언트에서 데이터를 가져온다. - 사용자 인터랙션이 필요한 대시보드, 채팅앱과 같은 페이지에 적합하다.
- SEO 에 취약하다. (데이터 로드까지 빈 화면 상태)
3. SSG (Static Site Generation)
- 빌드 시에 미리 HTMl 을 생성하여 배포하는 방식
- API 요청이 없어도 즉시 파일을 제공하기 때문에 속도가 매우 빠르다.
- 블로그, 문서 사이트처럼 사용자 인터랙션이 적고 변경 사항이 적은 페이지에 적합하다.
- SEO 최적화에 매우 유리하다.
- 데이터의 실시간 반영이 어렵다.
4. ISR (Incremental Static Regeneration)
- SSG 의 단점을 보완하여, 일정 주기마다 정적 페이지를 다시 생성하는 방식
revalidate옵션을 사용하여 특정 시간 간격으로 페이지를 새로 생성- SSG 의 단점을 보완해, 빠른 속도를 유지하면서도 최신 데이터 반영 가능
- SEO 최적화 가능
- 갱신 전까지는 이전 데이터가 유지되는 한계가 있다.
export async function get페이지() {
const res = await fetch("https://패치주소");
const post = await res.json();
return {
props: { 게시글 },
revalidate: 10, // 10초마다 새로운 HTML 생성
};
}
export default function ISRPage({ 게시글 }) {
return (
<div>
<h1>ISR (점진적 정적 생성)</h1>
<h2>{게시글.title}</h2>
<p>{게시글.body}</p>
</div>
);
}
-> 이처럼 일정 간격으로 HTMl 을 새롭게 생성하도록 설정할 수 있다.
같은 페이지에서도 섹션별로 다른 렌더링 방식을 사용할 수 있을까?
생각해보니 블로그 같은 페이지는, SSG 같은 방식으로 사용자가 작성한 데이터를 불러올 수 있겠지만 댓글 부분은? 인터랙션이 있어야 하지 않나?
가능.
Next.js 에서는 동일한 프로젝트 내에서 다양한 렌더링 방식을 혼합하여 사용 가능하다.
// 블로그 페이지 예시
// 클라이언트 상태 관리 훅 import
import { useState, useEffect } from "react";
// SSR 렌더링 방식으로 블로그 기본 데이터를 가져옴
export async function getProps(context) {
const res = await fetch(`https://doniBlog.com/posts/${context.params.id}`);
const post = await res.json();
return {
props: { post }, // SSR로 가져온 데이터
};
}
export default function BlogPost({ post }) {
// 댓글 상태 관리
const [comments, setComments] = useState([]);
// CSR을 사용하여 댓글 데이터를 가져옴
useEffect(() => {
fetch(`https://doniBlog.com/posts/${post.id}/comments`)
.then((res) => res.json())
.then((data) => setComments(data));
}, [post.id]);
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<h2>댓글 (CSR 적용)</h2>
{comments.length === 0 ? <p>로딩 중...</p> : (
<ul>
{comments.map((comment) => (
<li key={comment.id}>{comment.body}</li>
))}
</ul>
)}
</div>
);
}
이처럼 사용자가 블로그를 방문하면, SSR 렌더링 방식이 실행되며 기본 블로그 데이터를 패칭해온다.
이후에 CSR 렌더링 방식을 적용하여, useEffect 를 사용하여 클라이언트에서 추가 데이터를 가져와 UI 업데이트한다.
이렇게 혼합하여 사용하면, SEO 에 최적화되면서도 서버 부하를 최소화하는 사이트 제작 가능!
📌 오늘의 단어장
- 크롤링(Crawling) : 웹 페이지의 데이터를 자동으로 수집하는 기술
검색 엔진에서 사용되며, 크롤러, 웹봇, 스파이더 등이 자동으로 웹 페이지를 탐색하고 데이터를 가져오는 것을 말한다.
| 개념 | 설명 |
|---|---|
| 크롤링 (Crawling) | 웹 페이지를 자동으로 탐색하는 과정 (전체 웹사이트 탐색) |
| 스크래핑 (Scraping) | 크롤링한 웹 페이지에서 특정 데이터만 추출하는 과정 (제목, 링크, 날짜 등) |
쇼핑 가격 비교나 주식/코인 시세 정보 수집, SNS 데이터 분석, 부동산 매물 정보 등을 수집하여 다양한 분야에서 활용된다.
하지만!!! 기업에서는 보안과 규제 준수가 최우선 과제라고 생각하는 경우가 많기 때문에, 크롤링보다는 API 를 사용하는 것이 대부분의 경우에 더 적합하다고 판단된다. 따라서 크롤링보다는 공식 API 를 사용하는 것이 더 안전하고 빠르다.
그러나!!!!! API 는 제공되지 않거나 데이터 제공자가 정해진 형식으로 제공하는 데이터만 받아올 수 있기 때문에, 각 방법의 장점을 적절히 활용하여 데이터를 안전하고 효율적으로 관리하는 것이 가장 중요하겠다.
BTW...
강의 중 Next.js 의 버전이 현재 최신 버전과 달라서, @latest 로 설치했더니 약간의 문제가 있었다. 기본적으로 설치되는 파일이 다르다던가..Tailwind.CSS config 파일 이름이 다르다던가...여하튼 이런 경우에 작업 중인 버전을 다운그레이드하는 방법이 있을까? 지우고 프로젝트를 다시 셋업하나요?
물론 그래도 되겠지만 이런 방법도 있다.
npx next -v일단 뭐를 하건 간에 현재 버전을 확인한다.
"dependencies": {
"next": "14.2.18",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}package.json 파일에서 next 의 버전을 원하는 버전으로 수동으로 바로 변경!
여기까지는 이렇게 하면 되지 않을까, 하고 변경해 보았었는데 중요한 건 이렇게 하고 저장만 하고 작업을 하면 안 되고, 꼭 재설치를 해줘야 한다.
yarn install이것까지 해주면 비로소 적용이 잘 된다!
p.s. Next.js 는 14.2.18 버전 으로 쓰셔도 아직 안정성이 매우 높지 않으니 @latest 로 설치하지 말고, 꼭 14버전 을 쓰는 것이 좋다!
