🐱‍💻프레임워크 NextJS 다뤄보기

프린이·2025년 2월 27일

리액트의 SSR[ Server Side Rendering ]을
쉽게 구현할 수 있도록 도와주는 간단한 프레임워크🔥

리액트로 개발할 때 SPA[ Single Page Application ] 이용하며
CSR[ Client Side Rendering ]을 하기에 좋은 점도 있지만
👎단점 : 검색엔진 최적화( SEO )🔍
👉 CSR을 하면 첫 페이지에서 빈 html을 가져와서 JS 파일 해석하여
화면을 구성하기에 포털 검색에 거의 노출 될 일 없음😢

Next.js➡Pre-Rendering을 통해서
페이지를 미리 렌더링하며 완성된 HTML을 가져오기에
사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 됨✨

💡 용어 정리 💡

📰크롤러 : 인터넷을 돌아다니면서 웹페이지의 정보 수집하는 프로그램

구글 같은 검색 엔진은 크롤러 사용해서 웹사이트의 내용을 읽고, 검색 결과에 보여줄 정보를 정리함

🏗️Pre-Rendering : 보통 웹페이지 만들 때 브라우저가 JS를 실행해서 화면을 만들지만
👉 페이지를 미리 완성된 HTML 형태로 만들어두는 것🔥

즉, 서버에서 미리 페이지를 만들어 놓고 사용자가 요청하면 바로 보여주는 방식

🧐 그럼 왜 좋아 ❓

✅ 더 빠름→사용자가 들어오자마자 완성된 페이지를 볼 수 있음
✅ 검색 엔진 최적화( SEO ) 가능→크롤러가 HTML 쉽게 읽을 수 있어 검색 결과에 잘 노출됨

🌐CSR[ Client Side Rendering ]

👉 브라우저에서 화면을 그리는 방식

1️⃣ 사용자가 웹사이트에 접속→ex ) localhost:3000/

2️⃣ 브라우저가 HTML을 받음 → 비어 있는 HTML

3️⃣ 자바스크립트( JS ) 파일 다운로드 후 실행

4️⃣ JS가 실행되면서 화면을 그림 ( React, Vue 등으로 렌더링됨💻 )

5️⃣ 완성된 화면이 사용자에게 보임

📌 특징

🔹 처음 로딩 느림🐢,, ( JS 파일 다 받아야 화면이 보임 )
🔹 이후는 빠름🐇 ( 한 번 로딩하면 페이지 이동이 빠름 )
🔹 검색 엔진 크롤러가 HTML을 제대로 못 읽을 수 있음 ( 🔍SEO 불리👎 )

🖥SSR[ Server Side Rendering ]

👉 서버에서 화면을 그려서 보내는 방식 ( Next.js 에서 사용 가능😎 )

1️⃣ 사용자가 웹사이트에 접속

2️⃣ 서버에서 요청을 받음

3️⃣ 서버에서 HTML을 미리 만들어서 완성된 페이지를 보냄

4️⃣ 사용자는 바로 화면을 볼 수 있음

5️⃣ JS가 실행되면서 추가 기능 활성화 ( 버튼 클릭, 애니메이션 등 )

📌 특징

✅ 첫 로딩 빠름 ( HTML이 완성된 상태로 전달⭕ )
✅ 검색 엔진이 내용을 쉽게 읽을 수 있음 ( 🔍SEO 유리👍 )
✅ 서버에서 렌더링을 해야 하므로 서버 부하가 있음🤯

👩‍💻 Next.js 사용해보자 ⚡

📁바탕화면에 nextjs-app 폴더 만들기

VScode 터미널에서 npx create-next-app ./ 명령어로 Next.js 설치하기

설치했을 때 src/ 폴더 사용한다고 동의해서 생긴것
그리고 App Router 사용 안 한다고 했어서 pages 폴더가 생성된거임

🚀next.js 실행 : npm run dev

⬇

🏁index.js 파일이 시작점인 걸 알 수 있음

폰트 정적인 파일들이 여기에 들어있음

🔗전역 스타일은 src>styles>globals.css 파일에 있음

전역 스타일 코드 지우면 스타일 변경이 됨

HTML 문서의 기본 구조를 커스터마이징할 때 사용하는 파일❗
리액트의 index.html 같은 역할을 하는데
Next.js에선 서버에서 한 번만 렌더링되고 클라이언트에서 변경❌

html, head, body 태그 직접 수정 가능✔
글로벌 스타일 시트( CSS )나 폰트, 메타 태그 설정할 수 있음✔
다크 모드 같은 테마 설정 할 때 유용✔

😯 ../.. 이거 대신 @ 이렇게 할 수 있음

⚙️next.js 설정( config )하는 파일 ( 엄청 많은 설정 할 수 있음 )

reactStrictMode: true 설정하면 개발 중에 문제를 감지하고 경고를 보여주는 모드가 켜짐💡

postcss.config.mjs 파일은 tailwind.css 사용하기 위한 파일

tailwind는 css 프레임워크( 무조건 배워야하는 CSS Framework )

F1️⃣2️⃣ 눌러서 소스보기하면

그냥 리액트는 이렇게 되어있음 ( 읽어야 되는 부분이 텅 비어있음 ) 반면에

Next.js는 이렇게 되어있음

npm run build를 하고

여기를 보니까 Generating static pages 3개 라고 되어있음

3개의 파일이 만들어져있는걸 볼 수 있음

Next.js는 정적 페이지( SSG )용 index.html 하고
오류 페이지( 404.html, 500.html )를 미리 생성해서 배포할 때 사용할 수 있도록 함🔥
👉 404 ( Not Found ) : 없는 페이지에 접근했을 때 나타나는 오류
👉 500 ( Internal Server Error ) : 서버에서 문제 생겼을 때 나타나는 오류

✋잠깐✋

🏗️Pre-rendering

NextJS➡모든 페이지를 pre-render 함⚡

pre-render 한다는 의미 : 모든 페이지를 위한 HTML을
Client 사이드에서 자바스크립트로 처리하기 전 "사전에" 생성한다는 것
이렇게 하기에 🔍SEO 검색엔진 최적화가 좋아짐👍

🔹 Client 사이드 : 크롬, 사파리 같은 브라우저에서 웹사이트 열었을 때
그 브라우저에서 실행되는 코드( HTML, CSS, JS 등 )

📰크롤러( 정보 수집 프로그램 )가 index.html 보고서
크롤링할 수 있기 때문에 SEO 검색엔진이 좋아질 수 밖에 없는거🔍

즉, 크롤러가 미리 렌더링된 HTML을 읽으니까, 페이지가 더 잘 검색될 수밖에 없는 것✌

🔫리액트에서 자바스크립트를 디버그( disable ) 시켜보기( JS를 사용하지 않겠다는 것 )

🤔 그러고 새로고침하니까 이렇게 뜨는데 왜 이렇게 나오는걸까 ❓

CSR 순서 중에서 JS를 막은거니까 보이는 화면이 이부분인 것,,,😯💡
계속 진행이 돼야 화면이 보여지기 때문에 이런 현상이 발생하는거임

next.js를 똑같이 disable 시켜고 새로고침 해도 화면이 똑같음❗
🤔 이건 왜 화면이 똑같이 나올까 ❓

JS 부분을 막았지만 보는데는 지장없음🙅‍♀️
왜냐, 이미 html을 만들어놔서 이걸 화면에서 보여주기 때문✨

하지만 버튼을 누르거나 했을 땐 동작이 안 될 것 ( JS 영역 )

Next.js 에선 첨에 로드할 때 이미 사전에 준비된 html을 보여주고
그담에 JS를 다운로드 함📥

그러고 리액트를 실행하고 이때 하는 걸 💧'Hydration'( 수분을 공급 ) 이라고 함
👉 HTML과 JS가 합쳐져서 React 앱이 완성되는 과정💡

그러면 이제 상호작용한 앱이 되는 것 🔥

리액트에선 첨엔 아무것도 안 일어나고 JS 다운로드하고 리액트를 실행함
그 다음 화면이 나타나고 상호작용 가능할거임🙆‍♀️

😎Data Fetching

🔍Next.js 에서 데이터를 가져오는 방법은❓

여러가지가 있어서 애플리케이션의 사용 용도에 따라 다른 방법으로 사용해주면 됨
보통 React 에선 데이터 가져올 때 useEffect 안에서 가져옴
하지만 Next.js 에선 다른 방법 사용해서 가져옴

📌 React 에서 useEffect 사용한 데이터 요청 흐름

user가 서버한테 데이터를 요청( request )보낼 때
컴포넌트에 useEffect 안에서 요청을 보냈었음
✅ 순서 : state 부분들이 생성➡UI 부분 렌더링➡그 다음 useEffect 실행

1️⃣ user가 localhost:3000 경로로 접속
👉 해당 페이지의 컴포넌트가 실행됨

2️⃣ 실행한 해당 컴포넌트의 state가 생성
👉 useState로 관리하는 상태 변수들이 초기값을 가짐🔄

3️⃣ UI가 렌더링됨 ( return 부분 실행 )
👉 화면에 초기 UI가 표시됨( 아직 데이터 없음❌ )

4️⃣ useEffect 실행
👉 컴포넌트가 렌더링된 후 비동기 요청( fetching ) 시작

5️⃣ 비동기 데이터 요청( fetching ) 발생
👉 API 에서 데이터를 가져옴 ( ex - fetch or axios 사용⭕ )

6️⃣ 가져온 데이터 state에 저장
👉 setState 사용해 상태를 업데이트🆙

7️⃣ state 변경됐으니 컴포넌트 리렌더링
👉 새로운 데이터를 반영한 UI가 다시 렌더링됨

🔥Next.js의 데이터 가져오는 3가지 방법

🔸 getStaticProps : 정적인 HTML을 미리 만들어서 빠르게 보여줌

빌드 타임에 실행 → HTML 미리 만들어서 속도 빠름🚀
페이지에 변동이 거의 없는 데이터에 적합 ( ex - 블로그 글, 제품 목록 )

🤓 예제 : 블로그 게시글 미리 만들어두기

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return { props: { posts } };
}

💡 결과 : 빌드할 때 데이터를 가져와서 완성된 HTML을 보여줌

🔸 getStaticPaths : 여러 개의 정적 페이지를 미리 만들어 둠

getStaticProps와 함께 사용✔
동적인 경로( ex - /posts/1, /posts/2 )를 미리 생성할 때 사용✔

🤓 예제 : 여러 개의 블로그 글 페이지 미리 만들기

export async function getStaticPaths() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

💡 결과 : /posts/1, /posts/2 같은 페이지들을 미리 만들어둠

🔸 getServerSideProps : 매번 새로 데이터를 가져옴

사용자가 접속할 때마다 서버에서 실행됨
항상 최신 데이터를 가져와야 할 때 적합 ( ex - 실시간 뉴스, 사용자별 데이터 )

🤓 예제 : 접속할 때마다 최신 뉴스 불러오기

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/news");
  const news = await res.json();

  return { props: { news } };
}