Fetch2 [Next.js] Server Components 서버컴포넌트를 이용하여 data fetching 방식을 사용할 때의 장점 1. 클라이언트 단에서 돌아가지 않는 데이터베이스 및 api 등의 백엔드 서비스에 접근이 가능하다. 2. 보안 상 노출되면 안되는 키값들을 클라이언트 단에 드러나지 않게 할 수 있다. 3. data fetching 과 렌더링을 동일한 환경에서 수행할 수 있다. 4. 서버에 렌더링 캐싱이 가능하다. 5. 번들링할 자바스크립트 양이 줄어든다. 일반적으로 리액트에선 모든 작업이 클라이언트 단에서 이루어진다. Next.js 는 이러한 컴포넌트들을 서버에서 부분적으로 렌더링되는 페이지로 만들어서 클라이언트에서 모든 것을 부담하지 않아도 되게 개선하였다. 하지만 이 방식은 이렇게 서버단에서 생성된 HTML에 결국 클라이언트 단에서 hydrat.. 2023. 12. 4. [Next.js] SSR, SSG, ISR SSR SSR은 Server Side Rendering 의 약자로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js 에서 SSG 와 ISR 와 구분되는 이유는 렌더링 되는 시점이다. SSR는 사용자가 요청할 때 마다 페이지를 새롭게 렌더링한다. 따라서 Fetching 해야하는 데이터가 빈번할 때 사용된다. Next.js 12 에서는 이를 getServerSideProps라는 이름의 함수를 통해 값을 SSRPage에 렌더링한 후 클라이언트에 전달한다. export default function SSRPage({ dateTime }: SSRPageProps) { return ( ); } export const getServerSideProps: GetServerSideProps =.. 2023. 12. 4. 이전 1 다음