# getStaticPaths

limsoft0401

일단.. Flex + Grid 잘쓰자.. ( 진짜 너무 편하다.. ) getStaticProps SSG ( static site generation, 정적사이트 생성 )을 위해서 getStaticProps를 사용해야한다. SSG에서는 빌드시 api등으로부터 데이터를 얻어, 페이지를 그려서 정적파일로 생성한다. 빌드 시에 getStaticProps라는 함수가 호출되고, 그 함수 안에서 api호출이나, 페이지를 그리는데에 필요한 props를 반환한다. 이후에 브라우저에서 초기 화면을 그린 후에는 일반적인 리액트 어플리케이션과 마찬가지로, api등으로부터 데이터를 얻어 동적으로 화면을 그릴 수 있다. 그러나 제약 사항이 존재한다. 동적라우트를 위해서는 getStaticPaths가 필요한데, 동적라우트를 하면서 정적사이트생성을 위해서 필요하다. 동적 라우트는 파일이름에 대괄호 []를 포함하여 페이지의 경로를 정의하는 방식을 말한

ateals_12

발단 --- 다른 분들의 블로그 코드를 참조하고, 기본적인 페이지 생성은 next.js 블로그 라고 검색 했을 때 가장 먼저 발견한 Next.js로 나만의 블로그 만들기 with 정적 생성 을 토대로 시작했다. 이대로 포스트를 만들다 보니 여타 다른 블로그나 벨로그에도 있는 시리즈 별로 글을 나누는 것이 너무 부러웠다. 글을 개발, 코딩테스트 연습, 일상, 회고 등등 나중에 확장하다 보면 분명 글을 파일별로 나누고 싶어질 것이기 때문에 미리 만들어 놓고 싶어졌다. (이걸 하면서, 버그가 너무 많이 생겼다.....) 과정 시리즈를 나눈 코드는 bepyan님의 코드를 참고했다! 우리는 마크다운 파일을 [contentlayer](https://www.contentlayer.dev/docs/environ

ateals_12

후... 어김 없이 버그가 발생했다. 자 버그 내용을 보자면, 내가 작성한 동적라우팅 두 곳에서 동일한 주소를 호출하는게 문제였다. 해결 https://nextjs.org/docs/messages/conflicting-ssg-paths 앞이 까마득 했지만 역시 갓갓 공식문서의 도움으로 현제 내 폴더의 구조는 posts | | ->[slug] |-> [...slugs] 요로코롬이라 /posts/a라고 하면 두 폴더 동시에 라우팅?이 되는 문제였다. 그래서 두번째 폴더에서 해당되는 파일을 제거해 줬다!

hjs926

NextJS에서 데이터를 가져오는 방법은 여러가지가 있습니다. 그래서 애플리케이션의 사용 용도에 따라서 다른 방법을 사용해주면 됩니다. 보통 리액트에서는 데이터를 가져올 때 useEffect안에서 가져옵니다. 하지만 NextJS에서는 다른 방법을 사용해서 가져오는데 하나씩 살펴보겠습니다. getStatic Props - Static Generation으로 빌드(build)할 때 데이터를 불러옵니다. (미리 만들어줌) getStaticPaths - Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현(pages/post[id].js) getServerSideProps - Server Side Rendering으로 요청이 있을 때 데이터를 불러옵니다. getStaticProps ![](https://velog.velcdn.com/images/hjs926/post/306605fc-70cc-45

pyo-sh

올해부터 마음을 다잡기 위해 개인 블로그를 만드는 프로젝트를 하고 있었다. 기획 단계를 건너뛰고 개발부터 들어가다보니 별 생각없이 React + vite 환경으로 진행했는데 로고 사진과 manifest.json 등 홈페이지에서 필요한 것들을 구성하다 보니 SEO 관련 걱정을 하지 않을 수 없었다. 2022년 후반부 쯤 누군가에게 "Google의 검색 엔진에서 SPA도 SEO가 되는 것 같더라" 라는 말을 들었다. 그 당시 아무렇지 않게 일 잘하는 구글을 칭찬하고 넘어갔는데 문득 궁금해서 해당 내용을 찾아보기로 했다. Google 검색 센터에서 해당 내용에 대한 힌트를 조금 얻을 수 있었는데 상위 빨간색 문구를 보고 Next.js로의 Migration을 결심하게 되었다. ![Notification_Goog

bigwave-cho

NextJS의 장점 모든 페이지를 사전 렌더링(pre-rendering)을 통하여 더 좋은 퍼포먼스와 SEO(검색엔진최적화)를 제공한다. > CSR의 경우 빈 HTML에 JS까지 결합한 후에서야 페이지에 컨텐츠가 표시됨. SSR의 경우 서버에서 이미 생성된 HTML을 구성하여 클라이언트에 보내주고 클라이언트에서는 해당 HTML을 화면에 표시한 채로 JS를 다운받아 적용하게 된다. (관련 정리글 바로가기) SSG와 SSR의 차이 언제 HTML파일을 생성하는가 기준 정적생성 프로젝트가 빌드하는 시점에 html 파일이 생성 모든 요청에 재사용 퍼포먼스를 이유로, 넥스트는 정적 생성을 권장 정적 생성된 페이지들은 CDN에 캐시 getStaticProps / getStaticPaths

ljo094822

왜 사용하는가 nextJS는 서버사이드 렌더링을 하는데 각 페이지마다 사전에 불러와야할 데이터가 있다. react나 vue에서는 useEffect 나 created 를 이용하여 페이지에 접근하기 전에 데이터를 받아온다. next는 getInitialProps를 이용하여 fetching 작업을 진행한다. 사용 이점 속도가 빨라진다. 서버는 fetcing작업만, 브라우저는 렌더링만 함으로 각자 연산을 나누어서 하기 때문에 속도가 빨라진다. 로직 파악이 쉬워진다. 함수가 분리되기 때문에 로직 파악이 쉬워진다. 사용법 사용 하고 싶은 컴포넌트 외부에 getInitialProps 함수를 선언하여 사용한다. getInitialProps 내부에는 context, component등 여러 객체들이 있다. 위의 예시는 query.id에 접근하여 담아주는 것을 하였다. 주의사항 하나의 페이지에서는 하나의 getInitialProp

ahuuae

📍 프리렌더링(Pre-rendering) 앞서 공부한 것처럼 NextJS는 프리렌더링(pre-rendering) 기능을 제공한다.말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다.html을 미리 생성하고 최소한의 자바스크립트를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지 자바스크립트를 불러와 화면에 렌더링 시켜주는 것이다. 프리렌더링을 하면 렌더링 성능과 SEO가 향상된다. >Plain React App Pre-rendering을 하지 않으면, 초기에는 렌더링이 되지 않았다가 자바스크립트가 로드되면 페이지 요소들이 채워진다. >Using Next.js App Pre-rendering을 한다면 사전에 만들어진 HTML 파일을 보여주고 이후 자바스크립트

kws60000

1. react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. 2. pre-rendering 두가지 방법으로 나뉨: Static Generation / Server-side Rendering 함수가 실행되는 시점에 따라 나누는 것 빌드 시에 페이지를 만든다(npm start: build 한 파일을 실행하는 것 npm run dev 랑 다름) 프리랜더링은 컴포넌트의 함수보다 먼저 실행된다 (getStaticProps) Incremental Static Generation: 특정 시간이 지나기 전까지는 초기 페이지를 보여주고 이후에는 지난 페이지 보여줌 2-1. getStaticProps Static Generation

jyooj08

원본: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths 어떤 페이지가 동적 루트를 가지고 있고 getStaticProps를 사용한다면 정적으로 생성될 경로들의 목록을 정의해야 한다. 동적 루트를 사용하는 페이지에서 getStaticPaths라는 함수를 export하면 Next.js는 이 함수에 의해 지정된 모든 경로를 정적으로 미리 렌더링 한다. 여기에서 getStaticPaths와 함께 사용할 수 있는 파라미터와 props를 확인할 수 있다. getStaticPaths를 사용해야 할 경우 동적 경로를 사용하고 다음과 같은 페이지들을 사전 렌더링 하는 경우에 getStaticPaths를 사용해야 한다. 데이터를 headless CMS에서 가져온다. 데이

jinyinshu

** 들어가기 /product/[id]/ 와 같이 path가 주어지는 page에서 정적 Page를 만드는 방법을 알아보자. home page에서 product를 클릭 했을떄, 이동되는 DetailPage에 적용시켜 본다 ** 1. pages/products/[id].tsx ~ NOTICE!!!! 정적페이지를 만드는 이유는 그 페이지를 이동했을때, Loading을 하게 되면, 페이지가 열리는 시간이 길어진다. 그래서 페이지가 미리 HTML로 만들어 진다는것은 어메이징한 속도를 주는 것이다.

ryeon5789

CSR (Client Side Rendering) > 클라이언트에서 렌더링을 하는 방식으로 유저가 페이지에 들어오면 클라이언트가 서버로 데이터를 요청한다. 그 사이 빈 html로 먼저 렌더가 되고, 그 후에 서버로부터 데이터를 받아 페이지를 그려낸다. 데이터(HTML, JS)를 받을 때까지 화면은 빈화면만 띄워진다. 그래서 데이터를 받아올 때까지의 첫 로딩 시간은 오래걸리고, 데이터가 없기 때문에 SEO에 취약하다. 하지만 모든 스크립트들을 한 번에 불러오기 때문에 이후로부터는 SSR보다 로딩시간이 짧다. SSR (Server Side Rendering) > 서버에서 렌더를 마친 데이터(HTML,JS)를 클라이언트에 보내는 방식으로 이미 렌더가 가능한 상태에서 브라우저에서 렌더가 되기 때문에 SEO 대응에 최적화 되어있다. 브라우저 렌더링은 HTML,CSS,Javascript 파일을 받아와 파싱하고 화면을 그려내는 것을 뜻하지만, 서버사이드렌더링은 HTML 파일에 내용이

rlaclgns321

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

whdtlrtlr4

https://may10.kr/ 위 링크의 개인 프로젝트를 개발하다가 겪은 MongoDB의 connection limit 관련된 이슈를 해결한 방법에대해서 정리해볼려고한다. 평범하게 프로젝트를 개발하던 중 위의 이미지와 같이 DB의 connection이 exceeded 되었다는 메일이 엄청나게 오는것을 발견하였다. 처음에 이를 발견하고 일단 cluster의 데이터를 확인해보았으며 실제로 shared cluster의 경우 maximum connection이 500인데 500을 몇 번이나 터치하는것을 확인할 수 있었으며 실제로 이로인해서 DB가 터지기까지 하는것을 확인하였다. 해결하려고 db connection 관련된 코드를 찾아보았으나 코드상으로는 문제를 발견하지 못했으며 이로인

1-blue

공식 문서를 읽으면서 몰랐던 부분이나, 중요하다고 생각하는 부분만 정리한 게시글입니다. 시작 라우팅 /src/pages 혹은 /pages를 기준으로 내부적으로 자동 라우팅처리를 해줍니다. 추가적으로 동적 라우팅을 하고 싶다면 [id].tsx같은 파일을 생성하면 됩니다. export default로 내보내는 파일을 페이지 컴포넌트로 인식합니다. 사전 렌더링 Next.js로 생성한 페이지 컴포넌트는 기본적으로 빌드 시 정적인 html파일로 생성한 후 요청 시 html파일을 제공하는 방식으로 구현됩니다. > 이런 방식을 사용하는 이유는 SEO에서의 이점도 있고 사용자가 페이지에 들어왔을 때 DOM을 만드는 CSR보다는 미리 만들어진 html을 제공하는 게 UX측면에서 매우 좋기 때문입니다. 1. getStaticProps 해당 메서드는 미리 HTML을 만들지만 해당 페이지를 랜더링하는데 필요한 외부

jwhan

Next.js 는 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) pre-rendering 웹사이트 생성을 도와주는 프레임워크라는 설명을 다른 글에서 소개했다. Next.js 란? [정적 사이트 생성과 서버 사이드 렌더링이란?](https://velog.io/@jwhan/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81CSR-%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81SSR-%EC%A0%95%EC%A0%81-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%83%9D%EC%84%B1SSG-%EC%9D%98-%EC%A0%95%EC%9D%98%EC%99%80

april_5

서버사이드 렌더링(Server-side Rendering/SSR)은 ⬅︎ 요기 정적 생성(Static Generation) pre-rendering(사전 렌더링) Next.js는 1) 모든 페이지를 pre-render(사전 렌더) 한다 클라이언트에서 모든 작업을 하는게 아니라, 사전에 각 html 파일을 생성한다 2) 이렇게 생성된 html은 퍼포먼스 향상과 3) SEO 향상에 효과적이다 >SEO: Search Engine Optimiza

9rganizedchaos

(해당 포스팅은 `` 채널의 Next.js Tutorial의 강의노트 입니다. 링크를 통해 강의를 보실 수 있습니다.) NextJS는 Server Side Rendering과 Static Site Generation을 지원하는 프레임워크이다. 다시 말해 Pre-render되는 리액트 웹사이트를 만들기 위한 프레임워크라고 할 수 있다. Client Side Rendering 방식을 따르는 리액트의 경우, 기본 html 파일만을 서버로 부터 내려받고, js 스크립트를 통해 DOM을 구성해 다시 html에 그려준다. 브라우저에서 렌더링을 실행한다는 것이다! 그러나 React를 사용하다보면 때때로 우리는 이런 생각을 하게 된다. "나는 굳이 사용자와의 실시간성을 보장할 필요가 없는데도 CS