클라이언트사이드 렌더링 단점
- 초기 로딩이 느리다.
- 검색 엔진에 제공할 수 있는 정보가 적다.
프리렌더링
웹 브라우저가 페이지를 로딩하기 이전에 렌더링하는 것
- 정적 생성 : 프로젝트를 빌드하는 시점에 미리 HTML을 렌더링하는 것
- 서버 사이드 렌더링 : 서버에 리퀘스트가 도착할 때마다 페이지를 렌더링해서 보내주는 방식
Next.js
- 프리렌더링을 알아서 해 줌
- Vercel로 서버 호스팅
- 파일 시스템 기반 라우팅
프로젝트 만들기
VSCode 터미널에서
npx create-next-app .입력하고 설정해주면 된다.
NYNNNN
개발 모드 실행 (로컬 서버)
npm run devCtrl +C : 개발 모드 종료
보통 프로젝트를 공유할 때는 node_modules 폴더를 제외하고 공유하게 되므로 npm install을 해줘야 한다.
_document.js
공통된 html 코드를 지정할 수 있는 파일
CSS 적용하기
스타일을 사이트 전체에 적용할 때에는 _app.js에 임포트하면 된다.
alias
프로젝트 최상위 경로에서 불러올 경우 import '@/styles/global.css 처럼 @를 사용해도 된다.
-> 현재 파일 경로와 상관없이 쓸 수 있음, 마침표를 여러개 쓰는 것보다 덜 헷갈림
