서버 사이드 렌더링2 공짜 렌더링 by Next.js Next.js의 프리(공짜아님)렌더링🔖 브라우저가 페이지를 로딩하기 전에 미리 렌더링 하는것을 의미서버 사이드 렌더링(SSR)정적 생성(SG): default정적 생성🔖 브로젝트 빌드 시점에 미리 HTML을 렌더링getStaticProps()Props 객체를 지정 후 페이지 컴포넌트에서 사용// getStaticProps()export async function getStaticProps() { const res = await axios("/products/"); const products = res.data; return { props: { products, }, };}// Page Componentexport default function Home({ products }.. 2024. 5. 31. Next.js 기본 Next.js는 무엇인가🏷️ 초기 로딩이 느리고 검색 엔진에 제공하는 정보가 적은 리액트의 단점을 커버한 프레임워크pre-rendering을 통해 미리 렌더링할 정보를 저장하거나 서버가 그때 그때 렌더링하여 화면을 출력한다.Vercel를 통한 서버 호스팅을 이용해 빠른 코드 배포가 가능하다.파일 시스템 기반 라우팅을 통해 편하게 페이지를 나누고 개발이 가능하다.어떻게 만들어야 할까?🏷️ 생성 과정npx create-next-app을 이용해 프로젝트를 생성한다.파일 정리 및 기초 세팅 후 npm run dev을 통해 개발자 모드를 열어 개발한다.🔖 프로젝트 초기 구성project |- components |- lib |- pages |- public |- styles eslintr.. 2024. 5. 27. 이전 1 다음
