NextJS 우아하게 사용하기
김승모�Frontend Engineer�Hodoo Labs Co. Ltd.
모승(김승모)
프로덕트와 팀에 진심인 메이커
01
Why SSR
목차
02
Why NextJS
03
NextJS 톺아보기
04
Build
05
끝으로
Why SSR
01
클라이언트에서 화면을 렌더링
서버에서 미리 생성한 후, 클라이언트에 HTML을 전달
SSR
필요에 따라 클라이언트와 서버에서 렌더링
CSR
Hybrid SSR
Why SSR
Web에서 렌더링 흐름
정보를 웹에서 보여주는것
고수준의 UX를 제공�복잡한 상태를 관리할 수 있음
최적의 방법 선택 �품질 상승
Why NextJS
02
Why NextJS
NextJS가 지원하는 기능
Why NextJS
NextJS In NPM
Why NextJS
NextJS를 사용하는 회사
원티드 인기순 회사 TOP20 중
9회사
NextJS 톺아보기
03
Route Group
In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.
This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.
- NextJS 공식문서 -
폴더 그룹을 나누고 이를 URL에 영향 안주는 방식으로 추상화 가능한 라우팅 기능
Nextjs 톺아보기
Route Group의 기능
Nextjs 톺아보기
Route Group - 분산된 폴더 구조(In React)
Nextjs 톺아보기
Route Group - 응집된 폴더 구조
Server Action
Nextjs 톺아보기
Server Action의 기능
서버에서 실행되는 비동기 함수
Nextjs 톺아보기
Server Action의 장점
Nextjs 톺아보기
Server Action 사용법
Server Action 시연
Nextjs 톺아보기
왜 이런일이 발생했을까요?
Nextjs 톺아보기
Server Action
HTML에서는 form 그 자체로 post, get 요청이 가능.
Nextjs 톺아보기
Server Action
반면에 ClientAction(React)은�자바스크립트가 모두 hydration이 돼야�함수 실행 가능
Nextjs 톺아보기
Server Action - Client Action
**Hydration : React Hydration은 서버에서 렌더링된 HTML을 클라이언트에서 JavaScript로 활성화하여 상호작용을 가능하게 만드는 과정
Nextjs 톺아보기
Server Action은 어떻게 동작하는지?
Nextjs 톺아보기
Server Action 사용 예시
기능 | Route Handler | Server Action |
목적 | API 엔드포인트 | 클라이언트에서 서버 작업 실행 |
사용 위치 | app 폴더 내 route.ts 파일 | 페이지나 컴포넌트 내 |
응답 | HTTP 요청(Get, Post 등) | /serverAction으로 요청 |
*Route Handler : 웹 요청 및 응답 API를 사용하여 특정 경로에 대한 응답을 처리하는 라우팅 기능
HTTP 요청(Get, Post 등)
페이지나 컴포넌트 내
Nextjs 톺아보기
Route Handler vs Server Action
Image(jpg, png…)
Nextjs 톺아보기
Image의 기능
프론트엔드에서 Image 최적화, 이전엔 어떻게 했을까요 ?
자체적으로 최적화한
이미지 사용
Webpack을 사용해서 이미지를 코드로 관리
이미지 플랫폼을 구축해 최적화
Nextjs 톺아보기
Image 최적화
성능
Sharp
Squoosh
Nextjs 톺아보기
Sharp vs Squoosh
설치 용이성
Nextjs 톺아보기
Image의 동작원리(Cache)
Nextjs 톺아보기
Image 절망편
Nextjs 톺아보기
Image 절망편
Nextjs 톺아보기
Image 정리
Middleware
Nextjs 톺아보기
Middleware
요청이 성공하기 전 코드를 Run하고 응답을 수정
Nextjs 톺아보기
Middleware 동작
Nextjs 톺아보기
Middleware 동작
유저가 주소를 입력하여 웹에 방문한다.
해당 주소에 필요한 요청을 서버로 보낸다.
미들웨어에서 �첫 요청에 대한 �특별한 동작 수행
서버에서 작업을 처리하여 필요한 결과물을 내려준다.
Html, css ,Javascript
사용자가 응답을 받는다.
미들웨어 응답에 대한 특별한 동작을 수행한다.
Nextjs 톺아보기
Middleware 적용 예시1
Middleware로 Response레벨에서 빠르게 처리하자.
같은 URL이지만 서로다른 리전의 요청을 다르게 처리해야함
Nextjs 톺아보기
Middleware 적용 예시1 - 요구사항
빠르게 구현하면서 사용성도 개선시켜야 함.
Nextjs 톺아보기
Middleware 적용 예시1
Nextjs 톺아보기
Middleware 적용 예시2
NextJS 서버로 보안을 챙기고 유저 경험을 올려보자.
Nextjs 톺아보기
Middleware 적용 예시2
Cookie로 통신하여 Middleware에서 분기를 통한 응답 변경
Nextjs 톺아보기
정리
Build
04
Build
Build 소개
HTML 파일
서버 코드 생성
Server
코드 스플리팅
Static
Build 시연
Build
Build
일반 빌드의 단점
서버를 구동하기 위해 불필요한 파일을 모두 포함한다.
Standalone
Build
Standalone이란?
서버 배포에 필요한 필수 파일과 의존성만 포함
Build
Build 성과
서버 구동에 필요한�Server 크기 감소
1/4
도커 이미지�빌드시간 감소
서버 구동에 필요한�의존성 크기 감소
140초
647.5mb
Build
Build 성과
서버 구동에 필요한�Server 크기 감소
1/4
647.5mb
도커 이미지�빌드시간 감소
서버 구동에 필요한�의존성 크기 감소
140초
Build
Build 성과
서버 구동에 필요한�Server 크기 감소
1/4
140초
도커 이미지�빌드시간 감소
서버 구동에 필요한�의존성 크기 감소
647.5mb
Build
Standalone 방법
Build
Standalone 빌드 vs 일반 빌드
전체 파일, node_modules
배포하기 위해 .next폴더, 모든 소스코드와 node_modules가 필요
next start
next start 명령어로 서버를 실행
긴 도커 이미지 빌드 시간
모든 파일을 사용하기 때문에 도커 이미지 크기가 커지고 빌드 시간이 길어짐
최소의 서버코드, node_modules
배포하기 위해 최소한의 소스코드와 서버용 node_modules가 필요
node server.js
빌드 결과물로 생긴 server.js를 실행
짧은 도커 이미지 빌드 시간
최소한의 파일을 사용하기 때문에 일반 빌드와 비교해 작아진 크기와 시간
Build
기존 빌드방식의 슈퍼셋 빌드 방식
Standalone
끝으로
05
The Best
끝으로
The Best
끝으로
The Best
“Details matter. It’s worth waiting to get it right.”
“디테일이 중요하다. 제대로 할 때까지 기다릴 가치가 있다.”�-스티브 잡스-
개발자가 수고로워야 좋은 앱들이 나오고 인프라와 연계하여 최소 비용으로 운영하여 회사에 기여할 수 있다.
The Best
끝으로
Infra
Infra
끝으로
Infra
The Best
끝으로
Community
Infra
Community
끝으로
Community
사내 커뮤니티, 소모임, 개발 커뮤니티 운영 등�제가 받은 도움만큼 커뮤니티에 기여하려 합니다.
Q&A
예시 코드 링크
링크드인
커피챗은 언제나 환영입니다:)