Pre-rendering and Data Fetching
우리는 블로그를 만들 것이고 (원하는 결과는 여기에), 우리는 아직 블로그 콘텐츠를 추가하지 않았다. 이번 장에서는, 외부 블로그 데이터를 우리 앱에 가져오는 것을 배울 것이다. 지금은 파일 시스템에 콘텐츠를 올릴 것이지만, 콘텐츠가 다른 곳에 저장되어 있다면 잘 작동할 것이다. (데이터베이스나 Headless CMS 같은)
이 장에서 무엇을?
- Next.js의 사전 렌더링 특성
- 사전 렌더링의 두 가지 양식 : 정적 작동, 서버 측 렌더링
- 데이터가 있거나 없거나, 정적 작동
- getStaticProps 와 인덱스 페이지로 외부 블로그 데이터를 가져오는 방법
- getStaticProps에 관한 유용한 정보들
사전 렌더링
데이터 페칭에 대해 얘기하기 전에, Next.js 에서 가장 중요한 자원 중의 하나에 대해 얘기하겠다.
기본적으로, Next.js는 모든 페이지에서 사전 렌더링을 한다. 이 뜻은 Next.js는 각 페이지에 대한 HTML을 미리 생성하는데, 대신에 클라이언트 측 자바스크립트에서 모든 작업을 수행한다. 사전 렌더링은 성능 및 SEO가 좋아질 수 있다.
각 변환된 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결된다. 브라우저가 페이지를 불러올 때, JavaScript 코드는 페이지를 완전한 대화형으로 작동하게 만든다. (이 과정은 수화작용이라고 한다.)
사전 렌더링의 문제에 대해 확인
이 단계를 통해서 사전 렌더링이 무엇을 일으키는지 알게될 것이다 :
자바스크립트 없이 렌더링되는 것을 알 수 있다. 왜냐하면 Next.js는 정적인 HTML로 사전 렌더링했기 때문에, 자바스크립트가 작동하지 않고도 UI를 보게 하는 것이다.
노트 : localhost 에서 위 과정을 따라해볼 수 있겠지만, 자바스크립트를 비활성화하면 css가 로드되지 않는다.
만약 순수한 React.js 앱이라면 (Next.js 사용하지 않고), 사전 렌더링이 없을 것이고, 자바스크립트가 비활성화되면 앱을 볼 수 없을 것이다. 예를 들어 :
- 브라우저가 자바스크립트 활성화해서 이 페이지를 확인하자. 이것은 Create React App으로 만든 순수한 React.js 앱이다.
- 이제, 자바스크립트를 비활성화하고 같은 페이지를 접속해보자.
- 더 이상 앱을 확인할 수 없다. - 대신에, "이 앱의 작동을 위해서 자바스크립트를 활성화할 필요가 있습니다." 라고 할 것이다. 이것은 앱이 정적인 HTML 로 사전 렌더링을 하지 않기 때문이다.
설명 : Pre-rendering vs No Pre-rendering
도표로 설명 :
다음, Next.js에서의 사전 렌더링에 대한 두 가지 양식에 대해 얘기한다.
번역 : 2022. 10. 26.
영어를 잘하지 못하므로 부정확할 수 있습니다. 더 정확한 설명 or 번역이 있다면 댓글 환영합니다 *
출처
'Next.js' 카테고리의 다른 글
| Next.js : Static Generation with and without Data - 한글 (0) | 2022.10.28 |
|---|---|
| Next.js : Static Generation vs Server-side Rendering - 한글 (0) | 2022.10.27 |
| Next.js : Styling Tips - 한글 (0) | 2022.10.10 |
| Next.js : Polishing Layout - 한글 (0) | 2022.10.03 |
| Next.js : CSS Global Styles - 한글 (0) | 2022.09.25 |