[Next.js] Next.js 13에서 SSG, SSR, ISR 적용하기_fetch() API

NEXT.JS 13 버전에서는 `getStaticProps`, `getServerSideProps` 함수를 더 이상 사용하지 않는다는 소식을 보고 그럼 SSR과 SSG는 어떻게 적용할 수 있는 걸까 궁금해서 찾아봤다. 일단 NEXT 13부터 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작하게 되었으며 SSR, SSG, ISR을 적용하기 위해서 `getStaticProps`, `getServerSideProps` 등의 함수가 아닌 `fetch` API를 사용한다. Data Fetching // This request should be cached until manually invalidated. // Similar to `getStaticProps`. // `force-cache` is the defaul..

• format_list_bulleted JavaScript
• · 2023. 6. 10.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.01_Next.js

Today I Learned Next.js 기초 강의 수강 CSR vs SSR vs SSG vs ISR Client-Side Rendering 브라우저에서 HTML file을 로드하면, Javascript를 이용하여 rendering 하는 방식이다. Server-Side Rendering 브라우저에서 해당하는 페이지를 접속하면, 그 순간 서버에서 html을 렌더링 해서 전달해 주는 방식이다. 페이지를 요청할 때마다 렌더링 하기 때문에 오래 걸린다. Static-Site Generation SSR의 경우 페이지를 요청할 때마다 서버에서 렌더링하는 것에 반해, SSG의 경우에 정적인 페이지를 제공할 때는 빌드할 때 렌더링하고, 페이지를 요청할 때 이미 렌더링 된 페이지를 반환한다. Incremental St..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 1.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.31_Next.js

Today I Learned Next.js 기초 강의 수강 Throttling and Debouncing 강의 수강 Next.js Next.js란? Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해 주는 리액트 프레임워크 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "sta..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 31.
• textsms