nextJS7 [Next.js] Route System - 2) next/link - Link Link Next.js 에서도 react-router-dom 처럼 next/link 의 link 를 사용할 수 있다. import Link from 'next/link' function Home() { return ( Home About Us Blog Post ) } export default Home Props Prop Example Type Required href href="/dashboard" String or Object Yes replace replace={false} Boolean - scroll scroll={false} Boolean - prefetch prefetch={false} Boolean - 태그의 속성인 className 이나 target="_blank" 와 같은 것들이 속성으.. 2023. 12. 5. [Next.js] SSR, SSG, ISR SSR SSR은 Server Side Rendering 의 약자로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js 에서 SSG 와 ISR 와 구분되는 이유는 렌더링 되는 시점이다. SSR는 사용자가 요청할 때 마다 페이지를 새롭게 렌더링한다. 따라서 Fetching 해야하는 데이터가 빈번할 때 사용된다. Next.js 12 에서는 이를 getServerSideProps라는 이름의 함수를 통해 값을 SSRPage에 렌더링한 후 클라이언트에 전달한다. export default function SSRPage({ dateTime }: SSRPageProps) { return ( ); } export const getServerSideProps: GetServerSideProps =.. 2023. 12. 4. [Next.js] SSR과 CSR의 차이 SPA 여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다. MPA 반면 MPA란, Multi Page Application의 약자로, 탭을 이동할때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다. SSR과 CSR 알아보기 SPA는 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아서 클라이언트에서 필요한 페이지를 갱신하기 때문에 CSR로 렌더링하고, MPA는 새로운 요청.. 2023. 12. 4. 이전 1 2 다음