2022.02.14(Mon.) <Next.js 시작하기>

너무 과하게 다른거 아닙니까...? 분홍색인거 말고 같은 점이 없네요

1. Next.js?

• React의 서버 사이드 렌더링(Server Side Rendering)을 도와주는 프레임워크이다.
• 복잡한 개발 환경을 간단하게 사용할 수 있게 하기 때문에 유리하다.
• SPA(Single Page Application)으로 이루어진 요즘의 많은 웹 애플리케이션들은 로딩이 오래 걸리기 마련이다. 그때, SSR로 유저들의 UX를 더 끌어올릴 수 있다.

2. SSR vs CSR

• CSR (Client Side Rendering)
  • 일반적인 React의 렌더링 방식이다.
  • server에서 client 측으로 데이터를 보내면서, html이 거의 비어있는 상태로 보내주기 때문에 검색 시스템에서도 불리하다.
  • 하지만 한 번에 모든 파일을 다운로드해 주기 때문에 페이지 전환이 빠르다.
• SSR (Server Side Rendering)
  •  server 측에서 미리 랜더링 시킨 후에, 완료된 페이지를 유저에게 보여줄 수 있다.
  • 이미 다 로딩된 상태이므로, 화면을 유저가 보기까지 딜레이가 없다.
  • 그래서 초기 로딩 속도가 빠르다. 하지만 페이지를 이동할 때마다 다시 데이터를 다운로드하기 때문에 페이지 전환이 느릴 수 있다.

3.  어떻게 사용하나요?

1. npx create-next-app@latest (typescript를 사용하고 싶으면 가장 뒤에 --typescript를 써준다.) 그리고 입력한 후, 프로젝트 이름을 써준다.
2. npm run dev로 서버를 실행시켜 본다. (react의 npm run start와 같다)
3. pages 폴더 안에서 파일을 만들어 작업하면 route를 따로 설정하지 않아도 작동이 가능하다!
4. 초기 페이지인 '홈'은 index.js 파일이 된다.
5. 나머지는 react에서 작업하듯이 useState와 같은 hook 등을 자유롭게 이용해서 작업하면 된다.