# getServerSideProps
Next.js) getServerSideProps를 사용해보자.. feat. Firebase
서버사이드 렌더링이란, 클라이언트 대신 서버에서 HTML 코드를 생성하고 반환하는 방식으로 웹페이지를 렌더링하는 방식이다..
[nextJs] <InAppBanner> 작업 (feat. device check, deep link , pageProps)
NextJs에서 cookie를 이용해 <앱으로 보기> 작업하기
대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편
많이들 이용하는 Static Site Generation은 사실 HTML이 아니라 다른걸 미리 생성합니다... SSG의 정확한 작동 방식에 대해 살펴보고, SSG을 이용해 로딩 속도를 개선한 경험을 말씀 드리고자 합니다.
Next.js | router.push를 이용한 페이지 간 데이터 전달
Intro 운동 동료 모집글 목록이 있는 컴포넌트에서 하나의 객체인 post 데이터를 가지고 있다. 이를 router.push의 query를 통해 상세페이지로 전달하려고 했다. 처음에 사용한 이 방법은 JSON 메소드와 새로고침 이슈 등의 문제를 담고 있었고 이를 피
NextJS의 Rendering Data Fetching
NextJS에서 Pre-Rendering / Static Generation 에서 유저마다 변경되는 데이터를 Fetching하는 함수 공부하기
[error] getServerSideProps 으로 SSR 실행 하기
✍️ 처음에 HYDRATE 라는 개념을 몰랐어서, 어디서부터 잘 못 됬는지도 모르겠고, 막막했었는데 “단서” 의 포스팅을 만나 실마리를 얻을 수 있었다. 글쓴이에게 감사한다. 🙏
[next.js] getServerSideProps 사용전에 고민해보기
페이지에서 getServerSideProps라는 함수를 export 하면 next.js에서 getServerSideProps에서 반환한 데이터를 사용하여 각 요청에 대해 페이지를 미리 렌더링한다.gssp가 적용된 페이지 url을 주소창에 입력하여 직접 요청시 gssp가
getServerSideProps에 Wrapper 적용하기
Wrapper를 만드는 이유 Next.js 프로젝트를 진행하던 중getServerSideProps, getStaticProps 함수 관련해서 모든 페이지에서 동일한 규격으로 함수 내부에서 데이터를 fetching하고, cookie를 이용하여 인증과 필요에 따라 redi
[Next] 정적생성(SSG) & SSR
모든 페이지를 사전 렌더링(pre-rendering)을 통하여더 좋은 퍼포먼스와 SEO(검색엔진최적화)를 제공한다.CSR의 경우 빈 HTML에 JS까지 결합한 후에서야 페이지에 컨텐츠가 표시됨.SSR의 경우 서버에서 이미 생성된 HTML을 구성하여 클라이언트에 보내주고
[Next]Next.js 알아보기
Vercel에서 만든 React frameworkVecel은?Vercel은 프런트엔드 개발자를 위한 플랫폼으로, 혁신가가 영감을 얻는 순간에 만드는 데 필요한 속도와 안정성을 제공합니다.프론트엔드 서비스를 배포하고 관리하는 플랫폼을 제공라이브러리를 표방한 React의
next.js getInitialProps (getStaticProps, getStaticPaths,getServerSideProps)
nextJS는 서버사이드 렌더링을 하는데 각 페이지마다 사전에 불러와야할 데이터가 있다
Next.js | Data Fetching
프리렌더링(Pre-rendering)n 앞서 공부한 것처럼 NextJS는 프리렌더링(pre-rendering) 기능을 제공한다.말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다.html을 미리 생성하고 최소한의 자바스크립트를 연결시킨 후 클라이언트에서 요청이
NextJS pre-rendering (Static Generation / Server-side Rendering)
react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. pre-rendering 두
[Next] useRouter로 url 정보를 이용해 디테일 페이지 만들기(feat. getServerSideProps) & 렌더링 시 html과 js의 차이 및 해결
기존 router와 Link의 경로를 title을 포함하여 변경해 줌결과 화면 및 개발자 도구 상황(아직 ...id.js 파일 안 고쳐서 Loading으로 뜸)기존 ...id.js에서 의미를 위해 ...params로 변경router.query.params에 있는 tit
[Next] getServerSideProps 함수를 이용하여 server side rendering 하기
데이터가 유효할 때 화면이 보여지는 게 좋은지(server side rendering), Loading 화면을 보여준 뒤 데이터를 받는 게 좋은지 선택은 본인의 몫함수 이름 절대 변경 불가!!! return에 있는 object의 props 이름도 절대 변경 불가!!!a
[Next.js] Data Fetching > getServerSideProps
원본: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props 어떤 페이지에서 getServerSideProps라는 함수를 export한다면 Next.js는 해당 페이지를 요청할 때마다 getServerSideProps에서 리턴한 데이터를 사용하여 pre-rendering을 진...
getServerSideProps의 쿠키 문제 해결 방법
next-auth, axios, next.js를 사용한 프로젝트에서 발생한 getServerSideProps() 쿠키 문제 해결 방법
Server-side Rendering
SSR 방식으로 pre-rendering하기 위한 getServersidePorps 함수 사용하는 방법에 대해서
[NEXT JS] Data Fetching
클라이언트에서 렌더링을 하는 방식으로 유저가 페이지에 들어오면 클라이언트가 서버로 데이터를 요청한다. 그 사이 빈 html로 먼저 렌더가 되고, 그 후에 서버로부터 데이터를 받아 페이지를 그려낸다. 데이터(HTML, JS)를 받을 때까지 화면은 빈화면만 띄워진다.그래서