React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크.
리액트는 SPA(Single Page Application)을 이용하여 CSR(Client Side Rendering)을 하기 때문에 좋은점도 있지만 단점도 존재하는데 그 부분이 바로 검색엔진 최적화(SEO) 이다.
CSR를 하면 첫 페이지에서 빈 html을 가져온 후 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출 될 일이 없다.
하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링하여 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다.
리액트에서도 SSR을 지원하지만 구현하기 굉장히 복잡하기때문에 Next.js를 통해서 이 문제를 해결하면 된다.
npx create-next-app@latest
//또는
yarn create next-app
//typescript를 사용할 경우 맨 뒤에 --typescript 붙여주기
NexsJs는 모든 페이지를 pre-render 한다.
모든 페이지를 위한 HTML을 Client 사이드에서 자바스크립트로 처리하기 전, 사전에 생성한다는 의미이다.
이렇게 하기 때문에 SEO 검색엔진 최적화가 좋아지는 것이다.
Pre-render 테스트
자바스크립트 Disable
Chrome tool 설정
툴을 사용하여 React 사이트와 NextJs 사이트 비교하기
보통 React 사이트 VS NextJs 사이트
NextJS에서 데이터를 가져오는 방법은 여러가지가 있는데,
애플리케이션의 사용 용도에 따라 다른 방법을 사용해주면 된다.
보통 리액트에서 데이터를 가져올 때 useEffect 안에서 가져온다.
하지만 NextJs에서는 아래와 같은 방법을 사용한다
Static Generation으로 빌드(build)할 때 데이터를 불러옴.
(미리 만들어줌)
function Blog({posts}) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
export async function getStaticProps(){
const res = await fetch('http://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
}
}
getStaticProps 함수를 async로 export하면,
getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render 한다.
build time에 페이지를 렌더링한다.
사용할 때
Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅 구현
(pages/post/[id].js)
paths
return{
paths: [
{ params: {id: '1'} },
{ params: {id: '2'} },
],
fallback: ...
}
params
fallback
if(router.isFallback){
return <div>Loading...</div>
}
getStaticPaths 예시
function Post({post}){
//Render post
}
export async function getStaticPaths(){
const res = await fetch('https://.../posts')
const posts = await res.json()
const paths = post.map((post) => ({
params: { id: post.id }
}))
return { paths, fallback: false }
}
export async function getStaticProps({params}){
const res = await fetch(`http://.../posts/${params.id}`)
const post = await res.json()
return { props: {post} }
}
Server Side Rendering으로 요청이 있을 때 데이터를 불러온다.
사용할 때
'요청할 때 데이터를 가져와야 하는 페이지'를 미리 랜더링 해야 할 때 사용.
서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느리다.