목차
CSR vs. SSR
CSR(Client Side Rendering)은 클라이언트 측에서 렌더링이라는 뜻으로, 사용자가 웹사이트에 접속하면 서버가 기본적인 HTML과 자바스크립트 파일을 전달하고, 브라우저가 자바스크립트를 실행해서 클라이언트(사용자 컴퓨터)에서 화면을 동적으로 렌더링하는 방식이다.
SSR(Server Side Rendiring)은 서버 측에서 렌더링이라는 뜻으로, 사용자가 웹사이트에 접속하면 서버(Node.js 등)가 사전에 HTML을 만들어 클라이언트(브라우저)에 전달한다.
| 구분 | SSR(서버 사이드 렌더링) | CSR(클라이언트 사이드 렌더링) |
| 렌더링 위치 | 서버에서 HTML 생성 | 브라우저에서 JavaScript로 렌더링 |
| 초기 로딩 | 빠름(HTML 바로 표시) | 느릴 수 있음(JS 실행 후 렌더링) |
| SEO | 매우 유리 | 불리할 수 있음 |
| 서버 부하 | 높음 | 낮음 |
| 복잡성 | 서버/클라이언트 모두 관리 필요 | 클라이언트 중심 관리 |
| 예시 | Next.js, Nuxt,js, Vite SSR | React, Vue, Angular SPA |
SSR은 서버에서 미리 HTML을 만들어 보여주기 때문에 빠른 초기 화면과 좋은 SEO를 제공한다. CSR은 브라우저에서 JS로 화면을 그려 앱처럼 부드러운 사용자 경험을 줄 수 있다. 두 방식 모두 장단점이 있어서 서비스의 목적과 상황에 맞게 선택하는 것이 중요하다.
Next.js
Next.js는 React 기반의 메타 프레임워크로 애플리케이션을 구축하기 위한 강력한 도구다. React가 UI 구성에 집중하는 라이브러리라면, Next.js는 그 위에 렌더링과 서비스 제공에 특화된 추가 기능들을 제공하는 프레임워크다.
Next.js의 가장 큰 장점은 복잡한 도구 설정을 자동화한다는 것이다. 번들링, 컴파일 등의 작업을 내부적으로 처리하기 때문에 개발자는 도구 설정에 시간을 들이지 않고 온전히 애플리케이션 구축에 집중할 수 있다. React는 실제 개발에 필요한 기능을 개발자가 직접 추가해야 하지만 Next.js는 React 프레임워크로 실제 개발에 필요한 대부분의 기능이 포함되어 자동 처리된다.
Next.js의 주요 기능은 다음과 같다.
- 라우팅: 레이아웃, 중첩된 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반(file-system based) 라우터다.
- 렌더링: 클라이언트 및 서버 컴포넌트를 사용한 클라이언트 사이드 및 서버 사이드 렌더링. Next.js를 사용해 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었다.
- 데이터 페칭: React 및 웹 플랫폼에서 사용할 수 있는 fetch API와 async / await 지원으로 데이터 가져오기를 간소화했다.
- 스타일링: CSS 모듈, Tailwind CSS 및 CSS-in-JS를 포함하여 선호하는 스타일 방법을 지원한다.
- 성능 최적화: 애플리케이션의 성능 향상과 사용자 경험을 개선하기 위한 이미지, 폰트 및 스크립트를 최적화한다.
- 타입스크립트: TypeScript에 대한 지원이 개선되어 더 효율적인 컴파일 처리와 커스텀 TypeScript 플러그인을 통한 타입 검사 기능을 제공한다.
- API 레퍼런스: Next.js의 모든 API 디자인이 업데이트되었다.
라우팅 기본
모든 애플리케이션의 뼈대(Skeleton)는 라우팅(Routing)이다. 앱 라우터는 공유 레이아웃(shared layouts), 중첩 라우팅(nested routing), 로딩 상태(loading states), 오류 처리(error handling) 등을 지원한다.
Next.js는 폴더 기반 라우팅 시스템을 제공하며, 핵심 개념은 다음과 같다.
| 개념 | 설명 | 예시 |
| 폴더 = 라우트 | 폴더 이름이 URL 라우트 | team/ → /team |
| page.tsx | 해당 라우트를 구성하는 UI | team/page.tsx → /team 페이지 |
| layout.tsx | 하위 페이지들을 감싸는 레이아웃 | 네비게이션, 사이드바 등 |
| 중첩된 라우트 | 중첩된 폴더는 깊은 라우트 구성 | team/about/ → /team/about |
| 소프트 네비게이션 | 페이지 새로고침 없는 부드러운 전환 | SPA(싱글 페이지 앱)처럼 작동 |
| 프리페칭(Prefetching) | 링크된 페이지 미리 로드 | 빠른 페이지 전환(성능 최적화) |
Next.js는 URL 구조를 먼저 설계한 후, 폴더 구조를 결정해야 한다. 관련된 페이지들은 같은 폴더 안에 그룹화해야 한다. 공통 네비게이션, 페더, 푸터는 루트나 상위 레이아웃에 배치하고, 색션별 특별한 스타일이나 컴포넌트는 해당 폴더의 레이아웃에 배치해야 한다. 일반적으로 프리페칭은 기본 설정 그대로 사용하는 것을 권장하며, 특별한 경우에만 선택적으로 prefetch={false}로 설정한다.
오늘 하루를 돌아보며
오늘 드디어 Next.js를 배우기 시작했다. Next.js를 자동으로 스캐폴드도 해보고 매뉴얼로도 스캐폴드해봤다. 폴더 구성과 컨벤션을 살펴보고 왜 URL 구조를 먼저 설계해야 하는지도 알았다. 지금까지 HTML, CSS부터 시작해서 JavaScript, TypeScript, React까지 하나하나 배우면서 내용은 점점 어려워지지만 할 수 있는 것들이 많아진다.
부트캠프 처음 시작할 때만 하더라도 멋사 홈페이지에 올라온 파이널 프로젝트를 살펴보면서 내가 과연 저걸 할 수 있을까 걱정이 많이 됐는데... 이제는 조금 된다(?) 여전히 파이널 프로젝트가 걱정되지만, 처음과 비교해서, 어제와 비교해서 더 나아가고 있기 때문에 프로젝트 기간에 배울 것이 더 기대된다. 이제는 걱정보다는 기대가 더 커졌다. 이제 파이널까지 며칠 안 남았는데, 이번 주말에 그동안 배운 것들 쭉 훑어보면서 리마인드를 좀 해야겠다. 1인분은 해야지!!
