#nextjs

Frontend

React 위에 라우팅·렌더링 전략·캐싱을 얹은 프레임워크. 왜 쓰는지, App Router가 데이터를 어떻게 가져오는지, 서버·클라이언트 컴포넌트를 어떻게 섞는지 정리한 노트 모음.

• #react
• #frontend
• #rendering

Frontend › Next.js

React Server Components에서 서버·클라이언트 컴포넌트를 어떻게 섞을 수 있는지 한 장으로 정리한다. 클라이언트는 서버 안에 넣을 수 있지만 서버를 클라이언트에서 import할 수는 없고, 대신 children·props로 넘길 수 있다. 클라이언트에서 서버 코드를 부르는 Server Function과 그 주의점까지 Next.js 16 문서 기준으로 확인했다.

• #react
• #frontend
• #rendering

Frontend › Next.js

App Router는 서버가 라우팅하고 클라이언트가 내비게이션한다. Link·useRouter, prefetch와 클라이언트 캐시, 서버 컴포넌트의 병렬·순차 fetch, 요청 중복 제거, React cache()와 preload 패턴을 정리한다.

• #react
• #rendering
• #cache
• #frontend

Frontend › Next.js

App Router는 폴더가 URL 세그먼트, 특수 파일이 그 세그먼트의 역할이 된다. page·layout·template·loading·error·not-found·route·default의 렌더링 계층, 동적 세그먼트([id]·[...slug]·[[...slug]])와 Promise인 params, URL에 안 나오는 라우트 그룹과 프라이빗 폴더, 병렬 라우트(@slot)와 가로채는 라우트((.)·(..))로 만드는 URL 있는 모달, Route Handler, Metadata 병합과 title 템플릿까지 Next.js 16 기준으로 정리한다.

• #react
• #routing
• #frontend

Frontend › Next.js

SSR·SSG·파일 기반 라우팅·자동 코드 스플리팅을 제공해 React 앱의 초기 로딩과 SEO를 개선하는 프레임워크. App Router의 fetch 캐싱과 재검증, Next.js 16의 'use cache'까지.

• #react
• #rendering
• #seo
• #cache
• #frontend

Frontend › Next.js

서버가 컴포넌트 트리를 렌더링해 HTML이 아니라 직렬화된 React 트리(RSC Payload)를 스트리밍하고, 브라우저가 클라이언트 컴포넌트 참조를 실제 코드로 바꿔 트리를 재구성하는 과정을 정리한다. SSR과의 차이, 요청 왕복을 줄이려고 나온 배경과 서버 컴포넌트 모델(XHP)에서 출발한 역사, 다시 렌더링되지 않는다는 성질과 클라이언트 경계, 갱신 방식, 제약까지.

• #react
• #frontend
• #rendering
• #performance

Backend › Architecture

프론트엔드 하나마다 그 화면에 맞춘 중간 서버를 두는 BFF 패턴. 여러 API를 묶고, 필요한 필드만 가공해 내려 주고, CORS·인증·MSA 엔드포인트 변경을 흡수한다. Next.js를 BFF로 쓰는 법과 GraphQL 정규화 캐시 함정을 정리한다.

• #backend
• #architecture
• #frontend
• #graphql

Backend › Web Basics

텔레그램이 서명한 initData를 클라이언트가 서버로 보내고, 서버가 봇 토큰 기반 HMAC-SHA256으로 위변조와 만료를 검증한 뒤 자체 세션·JWT를 발급하는 미니앱 인증 패턴.

• #auth
• #security
• #backend