[Next.js] - Pages Router 기반 ISR (+On-demand Revalidation)

[Next.js] - Pages Router 기반 ISR (+On-demand Revalidation)

ISR(Incremental Static Regeneration, 증분 정적 재생성) 말이 다소 어렵게 보이지만 단순히 SSG방식의 응용이라 할 수 있는 방법입니다.ISR은 SSG방식에 정적인 페이지를 생성하는 방법에 revalidate를 통해 유효기간을 설정하여 유효기간이 지난 생태에서는 getStaticProps()를 통해 화면을 다시 그리고 페이지를 업데이트합니다.revalidate: 60초라고 했을때 60초 이내에 새로고침을 하더라도 동일한 데이터가 보입니다.유통기한이 끝난 60초 이후에 새로운 데이터를 받아오게 됩니다. export const getStaticProps = async () => { return { props: { }, revalidate: 3, // 초단위로, 3초..

  • format_list_bulleted 카테고리 없음
  • · 2024. 10. 15.
  • textsms
[Next.js] - Pages Router 기반 SSG

[Next.js] - Pages Router 기반 SSG

SSG(Static Site Generation, 정적 사이트 생성)SSR의 단점을 해결하기 위한 사전 렌더링 방식빌드 시 API등으로 부터 데이터를 얻어, 페이지를 미리 사전 렌더링 해두는 방식 SSG 빌드시 흐름빌드 시 getStaticProps()라는 함수가 호출되며, 그 함수 안에서 API 호출 등을 수행하고, 페이지를 그리는데 필요한 props를 반환합니다. 그 뒤 이 props를 페이지 컴포넌트에 전달해서 화면을 그립니다.화면을 그린 결과는 정적 파일의 형태로 빌드 결과로 저장합니다. 빌드 결과는 .next 폴더 → server 폴더에서 확인 가능합니다.  기본 골격SSG가 필요한 Page에 아래와 같은 getStaticProps() 함수를 추가해 준다.// 기본 골격export const g..

  • format_list_bulleted 카테고리 없음
  • · 2024. 10. 15.
  • textsms
[Next.js] - Pages Router 기반 SSR

[Next.js] - Pages Router 기반 SSR

SSR(Server Side Rendering, 서버 사이드 렌더링) SSR은 가장 기본적인 사전 렌더링 방식페이지 접근(요청)이 발생할 때마다 서버에서 getServerSideProps()를 호출하고 결과값을 클라이언트에 전달즉, 요청이 들어올때마다 화면이 보이기 전에 사전 렌더링하는 방식  기본 골격SSR이 필요한 Page에 아래와 같은 getServerSideProps() 함수를 추가해 준다// 기본 골격export const getServerSideProps = async () => { return { props: { } }}   예제// ========================================// SSR(Server Side Rendering) 예제// =========..

  • format_list_bulleted Web
  • · 2024. 10. 15.
  • textsms

일하기 좋은 카페 리스트

어떤 멋있는 분이 제보를 통해서 한번에 취합후 네이버 지도로 공유를 하고 있네요https://map.naver.com/p/favorite/myPlace/folder/3fb30df4b4734a27ab4f0f5e758b971f?c=15.00,0,0,0,dh

  • format_list_bulleted 일상
  • · 2024. 10. 8.
  • textsms

[TS] - 함수 오버로딩(Overloading)

먼저 들어가기에 앞서, 보통 아래와 같이 매개변수나 리턴타입을 Union타입을 이용하여 상황에 맞게 함수를 사용하였을 겁니다.function coordinate(x: number | string, y: number | string): string | number { if (typeof x === "string" && typeof y === "string") { return x + y; } else { return Number(x) + Number(y); }}console.log(coordinate(1, 2)); // 3console.log(coordinate("1", "2")); // 12console.log(coordinate(1, "2")); // 3 (의도되지 ..

  • format_list_bulleted Web
  • · 2024. 10. 6.
  • textsms

반응형 디자인을 위한 개발자 TIP

1. 모바일 퍼스트  - 먼저 모바일을 위한 디자인을 하고 더 큰 화면에 맞게 확장 2. 유연한 그리드  - 레이아웃에 고정 단위 대신 백분율 사용 3. 미디어 쿼리 모바일(소형)브레이크 포인트 (최대 320px)iPhone5 시대의 스마트폰모바일(중형)브레이크 포인트 (321px ~ 480px)대부분의 스마트폰ex) iPhone 15 Pro(393x852), iPhone 15 Pro Max(430x932), Samsung Galaxy S9+(360x740)모바일(대형)/태블릿브레이크 포인트 (481px ~ 768px)큰 스마트폰 및 소형 태블릿ex) iPad Mini(768x1024)태블릿브레이크 포인트 (769px ~ 1024px)표준 태블릿ex) iPad Pro(1024 x 1366)데스트톱브레이크..

  • format_list_bulleted Web
  • · 2024. 8. 16.
  • textsms