개발야옹

#Pages

Pages with Dynamic Routes

Next.js는 동적 경로가 있는 page 지원.

ex) 'pages/posts/[id].js' => '/posts/1', '/posts/2' 등으로 액세스 가능.

Pre-rendering

Next.js 는 기본적으로 모든 page를 pre-rendering한다.

Pre-rendering은 아래 두 가지의 종류가 있는데 두 방식의 차이점은 페이지에 대한 HTML을 생성하는 것이 다르다.

1. Static Generation ( Recommended )

    - 빌드시 html이 생성되며 각 요청에서 재사용된다.

2. Server Side Rendering ( SSR )

    - 각 요청에 대해 html이 생성된다. 

Next.js 는 사용할 Pre-rendering 방식을 선택할 수 있다. 

Pre-redering vs Non-Pre-rendering

Static Generation without Data

Static Generation with Data

'getStaticProps'

    - getStaticProps 는 production build시 실행되고, 함수 내에서 외부 데이터를 가져와 page의 Component로 보낼 수 있다. 

Server-side Rendering with Data

'getServerSideProps'

[ + ] 

meta data 구문 분석 library => gray-matter  

npm install gray-matter

https://nextjs.org/learn/basics/data-fetching/pre-rendering

[ + ] 다음에 읽어볼뤠 ( SWR )

https://nextjs.org/learn/basics/data-fetching/request-time

_app.js

export default function App({Component, pageProps}){
	return <Component {...pageProps}/>;
}
export default App;

- _app.js에서 rendering하는 값은 모든 page에 영향을 준다. 때문에 전역 css를 적용하거나 할 때 사용된다.

- 내부에 Component가 있으면 전부 실행하고 html의 body로 구성된다. 

- Component와 pageProps를 받는데, 이 때 props로 받은 Component는 요청한 page이다. 

- GET/ 요청을 보냈다면, Component에는 /pages/index.js file이 props로 오게되고, pageProps는 page getInitialProps를 통해 내려 받은 props들을 말한다. 그 다음 _document.tsx가 실행된다. 

! global CSS file은 오직 pages/_app.js에서만 import 할 수 있다. 

[ + ] 

getInitialProps 는 다음에 알아봐야지.

https://nextjs.org/learn/basics/assets-metadata-css/global-styles

https://kyounghwan01.github.io/blog/React/next/basic/#app-tsx

Next.js 시작하기

npx create-next-app < project name >
cd < project name >
npm run dev

실행결과

<Link> vs <a> :: Client Side Navigation

<a> tag의 경우 href 의 경로의 page로 이동을 할 때 page를 새로 불러오게 되어 상태 값이 유지되지 않아 새로고침 되고, 속도가 저하된다. 

<Link> tag의 경우 page를 새로 불러오는 것이 아닌 url 주소만 바꿔준다. <Link> tag가 있을 경우 해당 경로의 page를 미리 다운로드 받아오기 때문에 로딩하는 속도가 <a> tag에 비해 빠르다. 

=> <a> tag에 비해 <Link> tag가 더 부드럽게 page 전환이 된다. 

Code Spliting and Prefetching

Next.js 는 자동으로 Code Spliting 을 수행하여, 각 page는 해당 페이지에 필요한 것만 로드한다. 즉 index.js page가 rendering될 때 다른 page의 코드는 처음에 제공되지 않는다.

+ <Link> tag에 연결된 page를 미리 가져와 page 전환이 즉각적으로 이루어짐.

https://nextjs.org/learn/basics/create-nextjs-app/setup

React Framework

1. Next.js

- SSR( Server Side Rendering ) 방식으로, CRA의 경우 index.js만 불러와 SPA 방식으로 라우팅에 따라서 Component를 교체하는데, Next.js는 pages directory에 있는 파일을 기준으로 router별로 다른 page로 넘어가게 된다. 

- 요청한 page의 코드만을 로딩한다. -> 특정 page에서 에러가 발생하지 않더라도, 다른 page들은 잘 작동할 것.

- Browser의 View port에서 'Link' Component가 있을 때, 백그라운드에서 링크된 페이지를 위해 자동으로 프리패치(Prefetch)한다. [ Prefetch : 

2. Gatsby

- SSG( Static Site Generation ) 방식 Rendering

3. Create React App ( CRA )

- 가장 배우기 쉬움. 

- Client 측에서 rendering 하는데 필요한 HTML CODE를 생성한다. 

- SPA(Single Page Application)로, CSR( Client side rendering )방식이기 때문에 규모가 커지게 되어 js 파일의 용량이 커지게 되면 초기 로딩시간이 늘어나게 된다. -> CSR의 단점인 SEO 관련 문제도 발생 

- 무거운 작업들은 브라우저에서 수행된다. 

https://ko.reactjs.org/docs/create-a-new-react-app.html

https://geonlee.tistory.com/229

https://blog.outsider.ne.kr/1426