getStaticProps
-
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 -
소개 이 기사에서는 [Next.js] SSG, SSR, ISR, CSR에 대한 장점과 단점에 대해 논의할 것입니다. Next.js는 React 애플리케이션을 빌드하고 렌더링하는 데 사용되는 도구로, 다양한 렌더링 방식을 제공합니다. 각 방식의 장점과 단점을 이해하면 웹 애플리케이션 개발 프로세스를 최적화할 수 있습니다. Next.js Next.js는 React 프레임워크의 확장으로, 서버 사이드 렌더링 및 정적 사이트 생성과 같은 고급 기능을 제공합니다. 다음 섹션에서 각 렌더링 방식에 대해 자세히 살펴보겠습니다. 기능 SSG (정적 사이트 생성) SSR (서버 사이드 렌더링) ISR (증분 정적 재생성) CSR (클라이언트 사이드 렌더링) 초기 로딩 속도 빠름 빠름 빠름 빠름 SEO 최적화 우수함 우수..
[Next.js] SSG vs SSR vs ISR vs CSR소개 이 기사에서는 [Next.js] SSG, SSR, ISR, CSR에 대한 장점과 단점에 대해 논의할 것입니다. Next.js는 React 애플리케이션을 빌드하고 렌더링하는 데 사용되는 도구로, 다양한 렌더링 방식을 제공합니다. 각 방식의 장점과 단점을 이해하면 웹 애플리케이션 개발 프로세스를 최적화할 수 있습니다. Next.js Next.js는 React 프레임워크의 확장으로, 서버 사이드 렌더링 및 정적 사이트 생성과 같은 고급 기능을 제공합니다. 다음 섹션에서 각 렌더링 방식에 대해 자세히 살펴보겠습니다. 기능 SSG (정적 사이트 생성) SSR (서버 사이드 렌더링) ISR (증분 정적 재생성) CSR (클라이언트 사이드 렌더링) 초기 로딩 속도 빠름 빠름 빠름 빠름 SEO 최적화 우수함 우수..
2023.10.19