인프런 커뮤니티 질문&답변

안녕하세요, 이민혁님! 강의에 대한 꾸준한 관심과 질문을 주셔서 감사합니다. 언제든지 궁금한 점이 있으시면 편하게 문의해주세요. 다음 강의로는 'Notion 클론'을 준비하고 있으니, 이에 대한 많은 기대와 관심 부탁드립니다. 오늘도 즐겁고 보람찬 하루 되시길 바랍니다😸😸.

질문에 대한 답변은 다음과 같습니다:

우선 위 방식은 적절하다고 판단됩니다. 이는 Next.js의 서버 사이드 렌더링(SSR) 기능을 활용하여, 페이지 로드 시 서버에서 직접 데이터베이스에 접근하고 데이터를 가져오는 방식입니다. 이 방식은 초기 페이지 로딩 시 사용자에게 더 빠른 콘텐츠 제공, 개선된 검색 엔진 최적화(SEO), 그리고 서버 측에서 데이터 접근 로직을 처리함으로써 보안을 강화하는 장점을 가집니다. 현업에서도 Next.js와 같은 프레임워크를 사용하는 프로젝트에서 자주 사용되는 방식입니다.

자세한 설명은 다음과 같습니다:

1. 서버 사이드 렌더링 활용: IssuesPage 컴포넌트는 서버 사이드 렌더링 방식으로 구현되어 있습니다. 이는 서버에서 직접 데이터베이스에 접근할 수 있음을 의미합니다. 함수 내에서 Prisma ORM을 사용하여 데이터베이스 쿼리를 수행하고 필요한 데이터를 검색, 반환합니다. 이 접근 방식은 전통적인 클라이언트-서버 모델에서 발생하는 클라이언트의 서버 API 엔드포인트 요청 과정을 단축시킵니다.

2. 성능 및 사용자 경험 향상: 초기 페이지 로딩 시 서버에서 이미 데이터를 포함시켜 로딩하기 때문에, 클라이언트 측에서 추가적인 데이터 요청이 필요 없습니다. 이는 페이지 로딩 시간을 줄이고 사용자 경험을 개선합니다.

3. 보안 강화: 데이터베이스 접근 로직을 서버 사이드에서 처리함으로써 클라이언트 사이드의 보안 위험을 줄입니다. 또한, 클라이언트와 서버 로직의 분리가 명확해지므로 코드의 유지 및 관리가 더 용이해집니다.

현업에서의 사용

SSR과 SSG의 활용

1. 서버 사이드 렌더링 (SSR): SSR은 서버에서 페이지의 전체 HTML을 렌더링하고, 이를 클라이언트로 전송하는 방식입니다. 이는 사용자가 요청을 보낼 때마다 실시간으로 페이지를 생성합니다.

   
   

2. 정적 사이트 생성 (SSG): SSG는 빌드 타임에 모든 페이지를 미리 생성하고 정적 파일로 저장하는 방식입니다. 사용자의 요청에 대해 이미 생성된 정적 페이지를 제공합니다.

    

   
   

적합한 상황

• SEO가 중요한 사이트: SSR과 SSG는 검색 엔진이 콘텐츠를 더 잘 인덱싱할 수 있게 완전히 렌더링된 페이지를 제공합니다.

• 초기 로딩 성능 개선: 특히 SSR은 사용자에게 빠르게 완성된 페이지를 제공함으로써, 사용자 경험을 향상시킬 수 있습니다.

• 보안 강화: 서버에서 데이터를 직접 처리함으로써 클라이언트 측의 보안 위험을 줄일 수 있습니다.

   
  

적합하지 않은 상황

• 실시간 데이터 업데이트가 필요한 사이트: 채팅 애플리케이션, 실시간 스트리밍 서비스 등 실시간으로 데이터가 업데이트되어야 하는 사이트의 경우, SSR과 SSG는 적합하지 않을 수 있습니다. 이런 경우에는 클라이언트 사이드에서 데이터를 동적으로 불러오는 방식이 더 적절합니다.

결론

SSR과 SSG는 Next.js와 같은 프레임워크를 사용할 때 많은 이점을 제공하지만, 모든 유형의 웹 애플리케이션에 적합한 것은 아닙니다. 특히 실시간으로 데이터가 변경되는 경우에는 클라이언트 사이드에서 동적으로 데이터를 불러오는 방식을 고려해야 합니다. 프로젝트의 요구사항과 목표에 맞게 적절한 렌더링 방식을 선택하는 것이 중요합니다.