본문 바로가기

Computer Programming/Next

Next.js - Static/Dynamic Routing
Computer Programming/Next 2023. 8. 1. Next.js - Static/Dynamic Routing Next 13에서의 라우팅 -> app 내에서 폴더 각각 page.tsx 페이지를 만들면 되고, 중첩되면 중첩 폴더로 사용하면 됨 1. Static Routing build를 통해 SSG인지, SSR인지 구분할 수 있음 여기서는 모든 라우팅 페이지가 SSG로 되어있다 dev(개발중) -> build (SSG 페이지 HTML 생성) -> start 빌드 후 각 페이지별로 이미 렌더링 된 SSG 이므로 빠르게 로딩 됨 2. Dynamic Routing (SSR) 빌드 시 람다 표시 SSR type Props = { params: { post: string; }; }; export default function PostPage({ params }: Props) { return {params.post} Post..
Next.js 장점과 렌더링 종류
Computer Programming/Next 2023. 8. 1. Next.js 장점과 렌더링 종류 1. Next.js 사용 장점 - 풀스택, 파일 베이스 라우팅, SEO, 이미지/폰트 최적화, 서버사이드 렌더링/하이브리드 렌더링 - 라이브러리인 리액트 + 프레임워크인 Next로 리액트만으로는 힘든것들을 가능하게 해줌 2. CSR의 단점 - TTV가 길다 (FCP - First Contentful Paint) : REACT 소스코드와 UI를 가지고 있는 JS 를 초기에 모두 다운로드받고 -> DOM 생성 - 자바스크립트 활성화가 필수 - SEO 최적화 👎 - 클라이언트에서 모든 코드 다운로드 & 실행 -> 보안에 취약함 (데이터 받아오는 방식, 키 등 노출) - CDN(Content Delivery Network)에 캐시가 안됨 * SSG와 SSR은 모두 렌더링하는 주체가 서버이지만, 언제 렌더링하는지..

티스토리툴바