본문 바로가기

데이터패칭

[리액트에서 Next로] Next.js 기초 - 데이터 패칭 (Data fetching)과 JSONplaceholder를 이용한 서버 데이터 패칭 예시
[Dev] 🎯Self Study 2024. 1. 9. [리액트에서 Next로] Next.js 기초 - 데이터 패칭 (Data fetching)과 JSONplaceholder를 이용한 서버 데이터 패칭 예시 데이터 패칭은 렌더링과 동일하게 2가지 방식으로 되어있다. CSR vs SSR 클라이언트 사이드에서 데이터를 가져오기 위해서는 일반적으로 Use State 등에 상태값을 관리하는 리액트 훅을 실행시켜서 상태 변수를 선언하거나 Use Effect Hook을 통해 백엔드에서 데이터를 패칭해 상태 변수에 할당하는 방식으로 동작 가능하다. 물론 리액트 Query 등을 사용하면 Use State 나 Use Effect Hook을 직접 작성하지 않고 보다 더 수월하게 데이터를 패칭할 수 있지만 어떤 방법을 사용하던 클라이언트 단에서 데이터를 패칭하는 경우 아래와 같은 문제가 발생하게 된다. 1. 번들 사이즈 증가 2. 리소스 집약적 3. 검색 엔진 최적화 어려움 (SEO) 4. 낮은 보안성 5. 서버와의 추가통신 ..

티스토리툴바