왜 Next.js였나
Alpha에 필요했던 것
Alpha는 주식 정보를 모아 보여주는 웹앱이다. 종목을 검색하고, 시세와 지표를 보고, 관심 종목을 저장한다. 이 앱을 Next.js로 만들었다. 왜 Next인지는 Alpha에 필요했던 것들을 보면 정리가 된다.
필요했던 것은 크게 네 가지다.
- 검색 엔진과 링크 미리보기에 노출되도록 서버에서 그려진 페이지
- 외부 금융 API를 키를 숨긴 채 호출할 백엔드
- 로그인과 관심 종목을 위한 인증과 세션
- 이 모든 것을 실제로 띄울 배포
혼자 만드는 프로젝트라 이 네 가지를 따로 관리하고 싶지 않았다. Next는 이것들을 한 프로젝트 안에서 해결할 수 있다. 하나씩 본다.
서버 컴포넌트가 기본이다
App Router에서 컴포넌트는 기본이 서버 컴포넌트다. 데이터를 가져오는 코드가 서버에서 실행되고, 사용자에게는 내용이 채워진 HTML이 전달된다.
// app/symbols/[ticker]/page.tsx (서버 컴포넌트, 기본값)
export default async function Page({ params }) {
const quote = await getQuote(params.ticker); // 서버에서 직접 fetch
return <Quote data={quote} />;
}이것으로 첫 번째 요구인 ‘서버에서 그려진 페이지’가 해결된다. 첫 화면이 비어 있다가 채워지지 않고, 처음부터 완성된 HTML이 오기 때문에 검색 엔진도 내용을 읽을 수 있다. 클릭이나 입력처럼 브라우저에서 동작해야 하는 부분에는 "use client"를 붙여 클라이언트 컴포넌트로 지정한다. 기본은 서버, 필요한 곳만 클라이언트다.
백엔드가 같은 코드베이스에 있다
route.ts 파일을 만들면 그것이 API 엔드포인트가 된다.
// app/api/quote/route.ts
export async function GET(req) {
const data = await callExternalApi(process.env.API_KEY); // 키는 서버에만
return Response.json(data);
}Alpha의 API 라우트는 수십 개이고, 전부 같은 프로젝트 안에 있다. 외부 API를 호출하고 키를 숨기는 백엔드가 프론트엔드와 한 프로젝트로 묶이기 때문에, 저장소도 하나, 배포도 하나다. 백엔드 서버를 따로 두지 않아도 된다.
폴더 구조가 그대로 URL이 되는 것도 편한 점이다. app/market/page.tsx는 /market이 된다. 경로를 따로 등록할 필요가 없다.
렌더링 방식을 고를 수 있다
페이지마다 렌더링 방식을 export 한 줄로 지정할 수 있다. 요청마다 새로 그릴지, 미리 만들어둘지, 일정 시간 캐시할지를 고르는 것이다. 캐시 서버를 직접 두고 무효화 로직을 짜는 대신 방식만 선택하면 된다. Alpha에서는 실시간 시세처럼 매번 최신이어야 하는 페이지와, 자주 바뀌지 않아 캐시해도 되는 데이터를 같은 앱 안에서 다르게 처리한다.
이 부분은 내용이 많아 다음 글에서 따로 다룬다. CSR, SSR, SSG, ISR이 무엇이고 언제 쓰는지, Alpha는 무엇을 골랐는지를 정리할 예정이다.
인증과 세션은 next-auth, DB는 drizzle로 같은 프로젝트 안에서 처리했다. 배포는 output: "standalone" 설정으로 앱을 컨테이너 이미지로 만들어 홈랩 쿠버네티스에 올렸다. 앞에서 적은 네 가지가 모두 한 저장소 안에서 처리된다.
단점도 있다
장점만 적었지만 불편한 점도 있다.
서버 컴포넌트와 클라이언트 컴포넌트의 경계가 헷갈린다. "use client"는 위쪽으로 전파되기 때문에, 경계를 신경 쓰지 않으면 의도보다 많은 코드가 클라이언트로 넘어간다. 캐싱 방식도 처음에는 직관적이지 않았다. 어떤 데이터는 캐시되고 어떤 데이터는 매번 새로 불러오는지 몇 번 확인한 뒤에야 이해할 수 있었다. App Router가 비교적 최근 방식이라 일부 의존성이 아직 베타인 점도 있다.
그래도 Alpha가 필요로 한 것과 Next가 잘하는 것이 맞았다. 서버 렌더링, 백엔드, 인증, 배포를 한 프로젝트에서 가져가려는 목적에는 적합한 선택이었다.
다음 글
Next에서 가장 도움이 된 것은 렌더링 방식을 직접 구현하지 않고 고르기만 하면 된다는 점이다. 그 방식은 CSR, SSR, SSG, ISR로 나뉜다. 다음 글에서는 이 네 가지가 무엇이고 어떻게 다른지, Alpha는 무엇을 어떤 이유로 골랐는지를 정리한다.