Next.js

Next.js는 React를 기반으로 한 오픈소스 웹 개발 프레임워크로, Vercel에서 개발했습니다. 이 프레임워크는 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하며, 현대적이고 최적화된 웹 애플리케이션을 만들기 위한 강력한 도구들을 제공합니다.

주요 특징

1. 서버사이드 렌더링 (SSR): 요청 시 서버에서 HTML을 렌더링해 클라이언트에 전달하므로, 초기 로딩 시간이 빠르고 SEO가 강화됩니다.
2. 정적 사이트 생성 (SSG): 빌드 타임에 HTML 파일을 생성해 빠르고 효율적인 배포가 가능합니다.
3. 자동 코드 분할: 각 페이지는 필요한 JavaScript만 로드하여 성능을 최적화합니다.
4. 라우팅 시스템: 파일 기반의 라우팅을 제공하며, 디렉토리 구조에 따라 자동으로 경로가 생성됩니다.
5. API 라우트: 서버리스 함수 형태로 API를 생성할 수 있습니다.
6. 이미지 최적화: 자동 이미지 최적화를 지원해 웹사이트의 성능을 향상시킵니다.

Next.js는 특히 성능, 확장성, SEO가 중요한 프로젝트에서 많이 사용됩니다. 넷플릭스, Hulu, TikTok 같은 유명 기업도 Next.js를 사용하고 있죠.

---

서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)은 웹 페이지를 렌더링하는 두 가지 주요 방식으로, 처리 위치와 동작 방식에 따라 큰 차이점이 있습니다.

주요 차이점

특징	서버사이드 렌더링 (SSR)	클라이언트사이드 렌더링 (CSR)
처리 위치	서버에서 HTML을 생성 후 클라이언트에 전달	클라이언트에서 브라우저가 데이터를 받아 HTML을 생성
초기 로딩 속도	빠름 - HTML이 미리 생성되어 제공됨	느림 - JavaScript를 실행하여 페이지를 렌더링
SEO (검색엔진 최적화)	우수 - 검색 엔진이 완성된 HTML을 크롤링 가능	제한적 - 검색 엔진은 JavaScript를 처리하기 어려울 수 있음
사용자 경험	초기 콘텐츠가 바로 보이며 로딩 중 데이터가 동적으로 추가	초기 로딩 시 빈 화면 또는 로딩 애니메이션이 보일 수 있음
데이터 업데이트	실시간 데이터는 서버 요청마다 HTML 생성	클라이언트 측에서 빠르게 데이터를 업데이트 가능
복잡성 및 설정	서버 측에서 추가 로직 및 관리 필요	클라이언트 중심으로 작업이 간단하며 서버 의존도 낮음

SSR 장점

• 빠른 초기 로딩 속도 및 SEO 친화적.
• 서버에서 데이터를 렌더링하므로, 민감한 데이터 보안에 더 유리.

CSR 장점

• 사용자와 상호작용이 많은 애플리케이션에 적합하며, 페이지 전환 속도가 빠름.
• 서버 요청을 최소화하여 효율적이고 스케일 확장에 유리.

결론적으로, SSR은 SEO가 중요하고 초기 로딩 시간이 필요한 경우에 적합하며, CSR은 사용자의 상호작용이 많고 데이터가 동적으로 업데이트되는 애플리케이션에 적합합니다. 어떤 방식이 더 적합할지는 프로젝트의 특성과 요구사항에 따라 결정됩니다!

---

Next.js의 서버사이드 렌더링(SSR, Server-Side Rendering)은 클라이언트가 브라우저에서 페이지를 렌더링하기 전에 서버에서 HTML을 생성하여 전달하는 방식입니다. 이를 통해 초기 로딩 시간을 줄이고 검색 엔진 최적화(SEO)를 강화할 수 있습니다.

작동 방식

1. 사용자가 페이지 요청: 사용자가 브라우저에서 페이지 URL을 요청하면 서버로 요청이 전송됩니다.
2. 서버에서 데이터 처리 및 HTML 생성: 서버는 필요한 데이터를 API나 데이터베이스에서 가져와 React 컴포넌트와 함께 HTML을 생성합니다.
3. HTML 전달 및 렌더링: 생성된 HTML은 사용자에게 전달되고, 브라우저는 이 HTML을 화면에 렌더링합니다.
4. React의 동적 활성화: 렌더링 이후, React는 클라이언트 측에서 동적으로 활성화되어 사용자와의 상호작용을 처리합니다.

SSR과 관련된 Next.js 기능

• getServerSideProps: 이 함수는 특정 페이지가 요청될 때 서버 측에서 데이터를 가져와 해당 데이터를 페이지에 전달하도록 설계되었습니다.
  

  export async function getServerSideProps(context) {
      const res = await fetch(`https://api.example.com/data`);
      const data = await res.json();
  
      return {
          props: { data }, // 페이지에 전달
      };
  }
  

• 라우팅과 통합: Next.js의 파일 기반 라우팅은 SSR과 자연스럽게 통합되어 특정 경로에서만 서버사이드 렌더링을 활성화할 수 있습니다.