FE - Tools/Next.js2 [Next.js] getServerSideProps와 Head 태그로 검색 엔진 최적화하기 getServerSideProps와 Head 태그로 검색 엔진 최적화하기 검색 엔진에 유리하다는 Next.js를 사용해보자! # getServerSideProps 이용해서 API 데이터 가져오기 우선 코드 가장 하단에 getServerSideProps를 작성해주고 export default function에 { results } 형식으로 데이터를 가져온 뒤, 타입을 지정해주면 된다. // TypeScript 이용 시 타입 지정을 위해 아래 내용을 import 해주기 import { GetServerSideProps, InferGetServerSidePropsType } from "next"; export default function Home({results }: InferGetServerSideProp.. 2023. 4. 16. [Next.js] Next.js 알아보기 Next.js 알아보기 # Next.js란 Next.js는 React를 효율적으로 이용할 수 있도록 도와주는 React의 프레임워크이다. Next.js 서버 측에서 React 코드를 실행한 뒤 pre-rendering하여 HTML을 생성하여 브라우저에게 보낸다. 그 후 브라우저에서 React를 사용해 웹 페이지를 완성하는 과정으로 작동한다. Next.js의 특징을 살펴보며 어떤 장점이 있는지 알아보자. # Next.js 특징 1. SSR (Server Side Rendering) CSR 방식으로 렌더링되는 React와는 다르게, Next.js는 SSR 방식으로 렌더링할 수 있게 해준다. CSR은 첫 로딩 시간이 길고 SEO(검색 엔진 최적화)에 불리하다는 단점이 있는데, SSR을 이용하면 웹 페이지 접속.. 2022. 12. 8. 이전 1 다음
