반응형 개발/Next.js35 getStaticProps와 getServerSideProps 의 개념차이 Next.js를 이틀째 보고 있는데, getStaticProps, getServerSideProps를 어떻게 사용하는건지 모르겠다. 공식문서를 읽는 능력이 쓰레기임을 느낀다... 코드로 연습은 못했지만, 개념이라도 우선 기록해두자 getStaticProps "빌드 시 딱 한번" 호출 -> 변화가 없는 페이지(회사 소개 페이지, 신문기사 등 읽는 문서)에 적절하다. 호출시마다 매번 data fetch를 하지 않아 getServerSideProps보다 성능면에서 좋다. 데이터가 클라이언트에 도달하기 전에 렌더링되므로 페이지의 SEO가 향상한다 -> CSR의 단점을 보완! getServerSideProps 사용자가 페이지를 로드할 때 마다 데이터가 갱신되어 항상 업데이트 된 정보를 볼 수 있다. -> prer.. 2022. 1. 20. Next.js 는 폴더, 파일 이름이 엔드포인트 리액트는 라이브러리이기 때문에 동적 라우팅을 위해 외부 라이브러리인 react-router-dom 을 사용했다. 반면 프레임워크인 Next.js는 동적라우팅 기능이 이미 내장되어 있다. 신기하게도 폴더의 이름, 파일의 이름이 곧 api 혹은 params가 되는 것이다. 동적라우팅도 마찬가지이다. pages파일을 위와 같이 구성하였다. //pages/posts/[id].js import { useRouter } from "next/router"; export default function Page() { const router = useRouter(); console.log(router.query); const { id } = router.query;//id의 value가 엔드포인트가 된다. return .. 2022. 1. 18. Next.js 기본개념 Next.js의 필요성 - CSR과 SSR의 장점만을 뽑아냄 예전에, 그러니까 코드스테이츠에서 한창 Section2에서 머리싸매고 있던 시절 CSR SSR을 공부하면서 Next.js라는게 있구나.. 정도만 알게 되었다. CSR을 사용하면 페이지간 전환은 빠르지만, 초기 렌더링은 SSR에 비해 느린편이다. 빈 HTML 위에 브라우저가 전부 렌더링시켜야 하기 때문이다. 반면 SSR은 서버에서 전달받은 완성된 HTML을 바로 렌더링 하는 방식이라 초기 렌더링이 빠르다. 한편 페이지 전환시마다 완성된 HTML을 매번 서버에서 전달받아야 하기 때문에 전환속도가 느리다. 또한 SEO이야기를 잠깐 하자면, SEO는 초기 html을 분석하는데, CSR을 채택한 페이지의 경우 초기 html이 빈 페이지이기 때문에 SEO.. 2021. 12. 29. 이전 1 ··· 6 7 8 9 다음 반응형
