1. 라이브러리와 프레임워크 차이점
- 라이브러리
우리가 갖다쓰는 것 (Ex React: 렌더링할때 ReactDOM.render() 불러오기)
사용자가 파일 이름이나 구조 등을 정하고 모든 결정을 내림
- 프레임워크
정해진 틀 안에서 커스터마이징 (Ex NextJS: 정해진 규칙에 따라 코드를 작성하면 렌더링)
는 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름
2. 404 에러 페이지를 직접 만들지 않아도, 구현 가능
3. CSR와 SSR 차이
앱에 있는 페이지들이 미리 렌더링됨. 정적으로 생성된다.
CRA는 CSR 클라이언트 사이드 렌더링
브라우저가 자바스크립트를 가져와 유저가 보는 UI를 만드는 모든 것을 한다.
유저가 흰화면을 보고 있을 땐, 브라우저가 자바스크립트를 요청하고 있다.
브라우저는 자바스크립트, react 등 모든 것을 fetch한 후에 UI를 만들 수 있다.
nextJS SSR 서버 사이드 렌더링
유저가 페이지를 요청하면 진짜 HTML을 얻게 될 것
유저들의 연결 속도가 느리거나 자바스크립트가 비활성화 되어있어도
앱의 초기 상태를 활용해서 미리 렌더링 되어서 옴 pre-rendering
react.js를 프론트엔드 안에서 실행하는 것을 hydration
SEO에 좋음. 구글 같은 검색엔진에게도 유저에게도 좋다.
4. 링크 이동할 때 a 태그 말고, Link 태그 사용해야되는 이유
<a>로 링크 이동을 하면 안 되는 이유는 앱 내에서 페이지를 네비게이트할 때 사용해야 하는 특정 컴포넌트가 존재하기 때문. a 태그는 이동할 때마다 다른 페이지로 보내기 위해 전체 페이지를 새로고침 한다 (느려짐)
<Link> 사용해야됨
5. _app.js를 먼저 렌더링하고 다음에 index.js 렌더링
렌더링할 페이지 컴포넌트를 Component와 Component에서 사용하는 pageProps를 인자로 받는 _app.js 컴포넌트를 제일 먼저 렌더링 한다. 여기서 NavBar부분 outlet 처럼 사용하는듯
6. html head title 변경법
<Head> 에 작성하면 html의 head 안에 보여짐
7. configuration file 이용해 API Key 숨기기
next.config.js 이용해 API Key 숨김
source 주소를 입력하면 destination 주소로 이동하도록 redirect (주의. 변경할 때마다 새로고침해야 적용됨)
redirect는 url이 바뀐 걸 유저가 알 수 있음
rewrites는 유저를 redirect 시키기는 하지만 url은 변하지 않음
8. getServerSideProps
page에서 서버 측 렌더링 함수인 getServerSideProps 함수를 export 하는 경우
Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 request에서 이 페이지를 pre-render한다. getServerSideProps는 서버 측에서만 실행되며 브라우저에서는 실행되지 않음
SEO가 필요한 페이지에 SSR을 적용하면 될 것 같음
데이터가 유효할 때 화면이 보여지게 되는 게 좋은가? or loading 화면을 보여준 다음에 데이터를 받는 게 좋은가?
'🍞 Front-End > Next.js' 카테고리의 다른 글
| [NextJS] 서버 컴포넌트, 클라이언트 컴포넌트, SSR 차이점 (0) | 2024.07.18 |
|---|
