# getStaticProps

bokdol11859

많이들 이용하는 Static Site Generation은 사실 HTML이 아니라 다른걸 미리 생성합니다... SSG의 정확한 작동 방식에 대해 살펴보고, SSG을 이용해 로딩 속도를 개선한 경험을 말씀 드리고자 합니다.

pyo-sh

NextJS에서 Pre-Rendering / Static Generation 에서 유저마다 변경되는 데이터를 Fetching하는 함수 공부하기

tunggary

Wrapper를 만드는 이유 Next.js 프로젝트를 진행하던 중getServerSideProps, getStaticProps 함수 관련해서 모든 페이지에서 동일한 규격으로 함수 내부에서 데이터를 fetching하고, cookie를 이용하여 인증과 필요에 따라 redi

bigwave-cho

모든 페이지를 사전 렌더링(pre-rendering)을 통하여더 좋은 퍼포먼스와 SEO(검색엔진최적화)를 제공한다.CSR의 경우 빈 HTML에 JS까지 결합한 후에서야 페이지에 컨텐츠가 표시됨.SSR의 경우 서버에서 이미 생성된 HTML을 구성하여 클라이언트에 보내주고

ljo094822

nextJS는 서버사이드 렌더링을 하는데 각 페이지마다 사전에 불러와야할 데이터가 있다

ahuuae

프리렌더링(Pre-rendering)n 앞서 공부한 것처럼 NextJS는 프리렌더링(pre-rendering) 기능을 제공한다.말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다.html을 미리 생성하고 최소한의 자바스크립트를 연결시킨 후 클라이언트에서 요청이

kws60000

react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. pre-rendering 두

jyooj08

https://nextjs.org/docs/basic-features/data-fetching/get-static-props

jinyinshu

들어가기/product/id/ 와 같이 path가 주어지는 page에서정적 Page를 만드는 방법을 알아보자.home page에서 product를 클릭 했을떄, 이동되는 DetailPage에 적용시켜 본다NOTICE!!!! 정적페이지를 만드는 이유는 그 페이지를 이동

kim98111

SSG 방식으로 pre-rendering하기 위한 getStaticProps 함수에 대해서

ryeon5789

클라이언트에서 렌더링을 하는 방식으로 유저가 페이지에 들어오면 클라이언트가 서버로 데이터를 요청한다. 그 사이 빈 html로 먼저 렌더가 되고, 그 후에 서버로부터 데이터를 받아 페이지를 그려낸다. 데이터(HTML, JS)를 받을 때까지 화면은 빈화면만 띄워진다.그래서

rlaclgns321

pre-rendering next.js에서 기본적으로 모든 페이지를 프리 렌더링 함. 클라이언트 사이드에서 모든 작업을 수행하는 대신 미리 각 페이지에 대해서 HTML 파일을 미리 만들어서 성능과 SEO 측면에서 도움을 줌. 최소한의 자바스크립트 코드를 사용해 HTML 화면을 미리 생성하고 자바스크립트가 로드되면 그때 컴포넌트와 앱 화면이 완전히 활성화 되...

moolbum

Next - 공식 홈페이지 getStaticProps https://nextjs.org/docs/basic-features/data-fetching/get-static-props https://nextjs.org/docs/api-reference/data-fetchi

turret1234

우선 getInitialProps, getStaticProps 2가지 기능은 모두 pre-rendering가 필요한 상황에서만 사용하는 것이 좋습니다.next 에서 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해서 pre-rendering을 수행합니다.p

chaewonkang

거의 1년만에 블로그에 글을 쓴다.next.js로 웹사이트를 10개 가까이 만들어서 배포해봤음에도, 아직까지 헷갈리는 데이터 fetching과 렌더링에 대해 한번 마음 먹고 정리해보려고 한다. 기본적으로는 docs의 내용을 읽기 쉽게 번역 및 정리해서 올리는 것이 목표

hhhminme

Next.js가 현재 12까지 나와있다. Next.js 9.3 버전 부터는 이제 pre-rendering을 위한 data-fetching을 위해 사용하던 getInitialProps가 getStaticProps, getServerSideProps, getStaticP

1-blue

Next.js 공식 문서 읽으며 필요한 부분 정리

hhhminme

평소 next.js에서도 axios를 즐겨 쓰는 나는 getStaticProps를 사용할때도 fetch가 아닌 axios를 써서 데이터를 받아오고 싶었다. SSR 방식으로 메뉴를 가져오고 싶어서 한번 적용을 해보았다. 스크린샷처럼 추가된 데이터를 받아오는 형식이라 CS

nemo

Next.js는 더 나은 성능과 SEO를 위해 모든 페이지를 미리 렌더링 한다. (Pre-render)렌더링의 방식은 getServerSideProps와 getStaticProps로 나뉜다. 이 둘의 차이와 활용에 대해 정리해보도록 하겠다.서버 사이드 렌더링(SSR)

jwhan

Next.js의 기본 개념중 하나인 데이터 패칭. 그리고 그 핵심인 getStaticProps, getStaticPaths, getServerSideProps에 대해서 알아보자.