✨Next.js about Movie

⚡ 2024.02 ~

🖥️ https://nextjs-movies-study.vercel.app

📝Next.js 사용기

✅Next.js 14 프레임워크를 사용하여 CSR과 SSR을 모두 경험

React	Next.js
라이브러리로, 사용 주체가 개발자	프레임워크로 프레임워크 내의 규칙을 따르면서 사용

✅rendering이란, 코드를 브라우저가 이해할 수 있는 HTML로 바꾸는 과정

CSR	SSR
기존 Create React App은 Client Side Application으로 client 단에서 모든 렌더링작업을 수행	Next.js는 초기 화면의 UI가 js의 유무 상관없이 보여짐
빈 화면에서 js를 읽고 소스코드를 추가 ➡️ js엔진에 의해 추가	HTML이 이미 존재해 UI가 이미 빌드됨
새로고침 시 화면 깜빡임 존재 ➡️ js 기다리는 동안	모든 컴포넌트와 페이지들은 백엔드에서 렌더링 완료 후 HTML이 클라이언트에게 넘겨짐

✅SEO 검색엔진최적화 작업

구글은 페이지의 HTML을 봐서 검색 엔진을 활성화 ➡️ React의 경우 빈 페이지가 보여질 수도 있음(js 다운로드 유무) Next.js는 유용한 실제 데이터가 들어있는 HTML을 구성 ➡️ js가 활성화되지 않아도❗

✅사용성 개선

이미지 최적화 기법으로 평균 2.65초에서 0.034초로 시간 단축

• Next/Image 라이브러리 사용

스켈레톤 이미지로 사용자 경험 향상 ➡️ 사용자에게 로딩 기간을 시각화하여 납득 가능한 상황 제작

1️⃣ 영화 확인

2️⃣ 영화 검색