TIL02 - Next.js / Apollo

lazy corder·2022년 5월 24일
0

TIL

목록 보기
2/2

TIL02

  1. Next.js : 서버 사이드 렌더링(SSR)과 Static Generation 이해
  2. GraphQL : fragment 사용
  3. Apollo Client와 React를 활용

참고사이트


Next.js

SSG

  • 정적 사이트 생성 (Static Site Generation)

  • next build 시, 정적인 HTML파일들이 서버에 생성됨

  • 유저가 페이지를 요청시 이미 생성된 HTML만 반환하면 되어서 해당 HTML들은 재사용할 수 있음

  • 기존의 생성된 파일이 있기 때문에, 다른 유저가 같은 url로 요청했을 때 다른 작업 없이 해당 HTML만 반환하면 되어 응답속도가 빠름


Apollo?

GrapgQL은 REST API와 마찬가지로 명세, 형식일뿐이어서
GrapgQL 구현할 솔루션 필요함

솔루션이란?

  • 백엔드에서 정보를 제공 및 처리
  • 프론트에서 요청 전송
  • GraphQL.js, GraphQL Yoga, AWS Amplify, Relay 등등
  • GraphQL로 로컬 및 원격 데이터를 모두 관리 할 수있는 JavaScript를 위한 포괄적인 상태 관리 라이브러리

  • Apollo Client는 UI를 자동으로 업데이트 하는 동시에 fetch, cache, application data 수정을 할 수 있음

Apollo 장점

  • 백엔드와 프론트엔드 모두 제공 즉 작동함
  • 사용하기에 간편하고 쉬운 설정
  • 풍성한 기능들 제공

GraphQL

fragment

  • 요청에 사용되기 때문에 서버가 아니라 클라이언트 단에서 사용하게 됨
  • 여러 쿼리에 사용될 수 있는, 재사용 가능한 필드셋
  • 중복을 줄임으로써 전체 코드를 간소화

0개의 댓글