Pay it forward

기존에 Next.js로 개발되어있던 화면인데, 재사용하는 레이아웃이 컴포넌트가 아니라 page로 구현되어 있는 상황..(url을 공유할만한 페이지도 아님!) page에서 csr로 데이터 패칭을 받아서 화면에 뿌려주는데, 리액트 쿼리를 이용한다. 새로고침을 하지 않았을때는 리액트 쿼리에서 유지하고 있던 캐시를 사용할 수 있기 때문에 초기값이 제대로 반영된다. 문제는 새로고침을 했을때 데이터가 모두 날아가고 page가 렌더링된 이후에 csr로 네트워크 요청을 하기 때문에 이렇게 찍힌다. useState의 초기값에 데이터를 넣어줘야 하는데, undefined가 먼저 찍혀서 초기값으로 넣을 수 없다. useEffect도 사용할 수 없는 상황(재사용컴포넌트의 onChange이벤트와 연동되어 무한루프) 이런 상황에..

https://tanstack.com/query/v4/docs/guides/ssr#high-memory-consumption-on-server SSR | TanStack Query Docs React Query supports two ways of prefetching data on the server and passing that to the queryClient. Prefetch the data yourself and pass it in as initialData tanstack.com 검색엔진에 꼭 노출하고 싶은 데이터를 다루는 페이지를 작업했습니다. 검색엔진에 노출하기 위해 미리 데이터를 가지고 있는 HTML을 만들기 위해 Next의 SSG를 이용했습니다. axios요청을 보내서 데이터를 가져와도..

보통 프론트엔드 작업을 하면 컴포넌트를 많이 재활용합니다. 대표적으로 header컴포넌트를 예로 들 수 있습니다. 이번에 작업하면서 아래와 같은 컴포넌트를 재활용하면서 사용했습니다. backButton에는 원하는 컴포넌트에서 원하는 onClick이벤트를 전달할 수 있도록 구현했습니다. 근데 하나의 컴포넌트 page를 여러 경로로 접근하는 경우도 있습니다. 예를 들면 A page -> C component B page -> C component 이런 경우에는 C component에서 원하는 backButton onClick 이벤트가 어느 경로에서 접근했는지에 따라 달라집니다. A page에서 접근한 경우에는 A page로 보내고 싶고 B page에서 접근한 경우에는 B page로 보내고 싶습니다. 하지만 ..

NEXT로 만들어진 프로젝트가 있는데 가장 중요한 홈과 세 메인 페이지 모두 리액트 쿼리로 csr을 사용하고 있었다. '홈'페이지에 중요한 데이터 페칭이 이루어지고 있었는데 중요한 데이터가 전혀 노출되지 않고 있었다. 실제로 구글에서 검색을 해보니 우리 서비스를 찾기 어려웠다. 이 부분을 좀 더 검색엔진 최적화하면서 좋은 성능을 유지하는데 도전해보고 싶었다. 이 부분에 무한스크롤이 적용되어 있으며 데이터가 꽤 많아서 매번 req와 함께 pre rendering 되는 SSR은 비효율적이라고 판단했고 한번 붙은 데이터는 꽤 긴 시간 동안 유효했기 때문에 ISR로 적절한 시간 텀을 주면서 revalidate를 시키고 cdn 캐싱을 이용할 수 있도록 구현하기로 결정했다. 데이터를 붙이고자 하는 페이지에서 get..

next를 사용하면 html의 태그가 아니라 컴포넌트를 import 해서 사용하는데 왜 그래야 하는지, 어떤 장단점이 있는지 공부해보자 공식문서에 따르면 Image컴포넌트는 최신의 웹에 맞춰 발전된 img태그의 확장이라고 한다. 다양한 장점들로 인하여 SEO에 좋은 점수를 받을 수 있도록 최적화 되어 있다. 그 다양한 장점이란 1. 최신 이미지 형식을 이용하여 모든 기기에서 적절한 사이즈의 이미지를 제공하여 성능을 높인다. 2. CLS(Cumulative Layout Shift)를 막아주어 시각적 안정성이 좋다. 3. 뷰포트에 들어갔을때 이미지를 로드한다.(이게 lazy loading인가?) 혹은 blur이미지를 로드할 수 있도록 한다. 이를 통해 전체적인 페이지의 로드 속도가 빨라진다. 4. 원격서버에..

Create React App으로 작업할 때는 클라이언트 사이드 라우팅을 하기 위해 react-router-dom을 사용했다. 나만 그랬는지 모르겠지만 react-router-dom을 사용함으로써 추가되는 코드나 발생하는 에러가 참 많았다. 불편했다. 하지만 Next를 사용하면 이런 불편함이 없다. 왜냐하면 next는 파일시스템 기반 라우터가 있기 때문이다! 공식문서에 따르면 pages 폴더에 파일을 만들면 자동으로 라우트를 사용할 수 있다. Index Routes index라는 이름은 자동으로 해당 디렉토리의 root폴더가 된다. pages/index.js → / pages/blog/index.js → /blog Nested Routes 폴더안에 파일을 만드는 방식으로 중첩된 폴더구조를 만들게 되면 자..