fetch
-
Next.js는 기본적으로 다양한 데이터 fetch을 제공한다. 기본적인 리액트의 useEffect 뿐만 아니라 getStaticProps 그리고 getServerSideProps까지. 우리는 여기서 늘 데이터를 어떤 방식으로 가져오게 될지 고민하게 되는데, 기본적으로 세 가지 데이터 fetch 방식을 이미 알고 있더라도, 이번에 더 자세하게 각각의 장단점과 언제 사용하면 좋을지 알아보자. 1. useEffect useEffect는 React Hook이며, 컴포넌트가 마운트될 때 또는 특정 변수가 변경될 때 코드를 실행하는 데 사용됩니다. Next.js에서 useEffect는 클라이언트 측에서 데이터를 가져오는 데 사용할 수 있습니다. 장점: 컴포넌트 로직과 데이터 가져오기 코드를 분리할 수 있습니다. ..
[Next.js] useEffect vs getStaticProps vs getServerSidePropsNext.js는 기본적으로 다양한 데이터 fetch을 제공한다. 기본적인 리액트의 useEffect 뿐만 아니라 getStaticProps 그리고 getServerSideProps까지. 우리는 여기서 늘 데이터를 어떤 방식으로 가져오게 될지 고민하게 되는데, 기본적으로 세 가지 데이터 fetch 방식을 이미 알고 있더라도, 이번에 더 자세하게 각각의 장단점과 언제 사용하면 좋을지 알아보자. 1. useEffect useEffect는 React Hook이며, 컴포넌트가 마운트될 때 또는 특정 변수가 변경될 때 코드를 실행하는 데 사용됩니다. Next.js에서 useEffect는 클라이언트 측에서 데이터를 가져오는 데 사용할 수 있습니다. 장점: 컴포넌트 로직과 데이터 가져오기 코드를 분리할 수 있습니다. ..
2024.03.13 -
Server Action이란? Next.js Server Action은 서버 측에서 실행되는 함수이며 페이지 렌더링 과정에 직접 참여합니다. 즉, 페이지가 클라이언트로 전송되기 전에 데이터를 가져오거나 비즈니스 로직을 처리하는 데 사용할 수 있습니다. 장점 SEO 향상: SSR(Server-Side Rendering)을 통해 페이지 로딩 속도를 높여 검색 엔진 최적화(SEO)에 도움이 됩니다. 더 나은 사용자 경험: 페이지 로딩 시점에 데이터를 미리 준비하여 클라이언트 측 렌더링보다 더 부드러운 사용자 경험을 제공합니다. 보안 강화: 클라이언트 측에서 민감한 데이터를 노출하지 않고 서버 측에서 처리하여 보안을 강화할 수 있습니다. 서버 측 유효성 검증: 입력 데이터 유효성 검증을 서버 측에서 수행하여 클..
[Next.js] Server Action(서버 액션)이란? 장점 및 단점 - 14버전Server Action이란? Next.js Server Action은 서버 측에서 실행되는 함수이며 페이지 렌더링 과정에 직접 참여합니다. 즉, 페이지가 클라이언트로 전송되기 전에 데이터를 가져오거나 비즈니스 로직을 처리하는 데 사용할 수 있습니다. 장점 SEO 향상: SSR(Server-Side Rendering)을 통해 페이지 로딩 속도를 높여 검색 엔진 최적화(SEO)에 도움이 됩니다. 더 나은 사용자 경험: 페이지 로딩 시점에 데이터를 미리 준비하여 클라이언트 측 렌더링보다 더 부드러운 사용자 경험을 제공합니다. 보안 강화: 클라이언트 측에서 민감한 데이터를 노출하지 않고 서버 측에서 처리하여 보안을 강화할 수 있습니다. 서버 측 유효성 검증: 입력 데이터 유효성 검증을 서버 측에서 수행하여 클..
2024.02.18