Nextjs 가 버전이 올라가면서 제일 좋았다고 느낀것은 개인적으로 Metadata 주입 관련된것이었습니다. 기존 page route 방식에선 page route 안에서 index.tsx 컴포넌트에 태그를 직접 넣어야했어서 이것이 UI컴포넌트인지 아니면 SEO를 위한 컴포넌트인지 헷갈릴 수 가 있습니다. Next.js 13 버전으로 올라오면서 app directory 를 사용하면서 이부분은 어느정도 해결이 된 것 같습니다. Nextjs 를 app route로 선택하고 create next app을 하면 생성되는 layout.tsx 파일입니다. app 폴더안 최상단에는 무조건 루트레이아웃이 존재해야하며 이 루트레이아웃이 기존 _document.tsx,_app.tsx 를 대체합니다. export const..
Next.js 가 이번에 새롭게 버전이 올라가면서 많은것들이 바뀌게 되었다. 이젠 page directory 라우팅방식과 app directory 두가지를 사용 할 수 있으며 app directory 를 사용할경우 metadata API, nested layout,등을 사용 할 수 있습니다. 또한 모든 컴포넌트는 기본적으로 서버컴포넌트가 되며 클라이언트 컴포넌트로 변경하고싶은경우 해당 컴포넌트 맨 위에 "use client" 를 추가해야 합니다. 클라이언트 컴포넌트에 서버컴포넌트를 import 하는것은 제한된다. 'use client' // This pattern will **not** work! // You cannot import a Server Component into a Client Compon..
서버 사이드 렌더링(SSR)의 장단점 장점 초기 페이지 로딩 속도가 빠릅니다. SSR은 서버에서 HTML을 생성하여 클라이언트에게 전달하기 때문에, 초기 페이지 로딩 속도가 빠릅니다. 검색 엔진 최적화(SEO)가 용이합니다. 검색 엔진은 HTML을 기반으로 페이지를 색인하므로, SSR을 사용하면 검색 엔진 최적화(SEO)를 용이하게 할 수 있습니다. 단점 서버 부하가 커집니다. SSR은 서버에서 HTML을 생성하기 때문에 서버 부하가 커질 수 있습니다. 개발 속도가 느립니다. SSR은 초기 구성이 복잡하기 때문에 개발 속도가 느릴 수 있습니다. 클라이언트 측 자바스크립트 실행이 필요할 경우, 추가적인 네트워크 트래픽이 발생합니다. 클라이언트 사이드 렌더링(CSR)의 장단점 장점 개발 속도가 빠릅니다. C..
