Next.js 14 SSR을 활용한 SEO in 아트인포

 

아트인포에 새로 추가한 뉴스 페이지를 바탕으로 SSR을 활용한 SEO에 대해 정리한다.

/news/page.tsx

리스트 페이지엔 페이지의 제목과 내용 등 정보들의 변동이 없기에 기본적인 metadata 설정을 넣어줬다.

 

/news/[id]/layout.tsx

 

generateMetadata를 활용해 뉴스 해당 뉴스 상세데이터를 호출 제목과 이미지를 정리하여 동적으로 넣어준다.

 

generateMetadata는 해당 경로의 page.tsx 또는 layout.tsx 아무데나 들어가도 상관없다. SSR 환경이라면

 

이렇게 넣어주면

 

 

metadata를 동적으로 설정해줌으로써 얻을수 있는 장점들

• 동적 페이지의 상세한 정보가 초기 페이지 로드시 이미 포함되어 있어 검색엔진에 페이지에 대한 정보를 더 명확하게 전달
• OpenGraph 태그를 통해 소셜 등에 공유 될 때 각 컨텐츠에 대한 정보를 전달하여 클릭율 상승

 

왜 Tanstack Query SSR에서 new QueryClient() 대신 GetQueryClient를 사용할까??

/lib/GetQueryClient.ts

import { QueryClient } from "@tanstack/react-query";
import { cache } from "react";

const GetQueryClient = cache(() => new QueryClient());
export default GetQueryClient;

 

사용하지 않는다면?

const queryClient = new QueryClient()
const { id } = params

const data = await queryClient.fetchQuery(queries.lessons.detail(Number(id)))

매 요청마다 새로운 QueryClient 인스턴스 객체를 만들어 사용해야한다.

cache 함수를 사용해서 불필요한 인스턴스 생성을 줄일수 있다.

 

출처: https://nextjs.org/docs/app/building-your-application/optimizing/metadata