SSR
- 서버 사이드 렌더링 => 페이지를 서버에서 렌더링
- 서버에서 그린 후 사용자에게 전송해 웹 페이지를 빠르게 볼 수 있다
SSR과 SEO
ssr 방식을 사용하면 웹크롤러가 이미 만들어진 html을 크롤링 가능해 정보 파악에 용이하기 때문에 검색에 유리
Next.js 에서 SSR
- nextjs에서는 ‘use client’ 지시어를 사용하지 않으면 자동으로 서버 컴포넌트로 감지
내가 사용한 방식
- useState나 useRouter와 같은 hook을 사용하기 위해서는 ‘use client’를 명시해야해서, 프로젝트를 할 때는 view를 따로 만들어서 view컴포넌트에서는 클라이언트단에서만 가능한 액션을 정의
- page.tsx에는 초기 데이터를 fetch해서 view에 전달한다
const getInitalData = async () => {
// fetch api
};
const page = async () => {
async function revalidate() {
"use server";
revalidatePath("/sample");
}
revalidate();
const initialData = await getInitalData();
return <View initialData={initialData} />;
};RevalidatePath
- 빌드를 하면 생성될 수 있는 페이지가 pre-rendering된다.
- 서버에서 불러온 데이터의 경우 useState와 같은 훅을 사용할 수 없기 때문에 변경된 부분이 있어도 다시 렌더링이 불가능하다
- 이를 위해서 revalidatePath를 사용할 수 있다.
- revalidatePath를 사용하면 특정 경로에 대해 캐시된 데이터를 무효화 할 수 있다.
느낀점
이전 프로젝트들은 부끄럽지만..seo를 위한 어떤 처리도 안했다. 딱히 중요성을 몰랐기 때문..
하지만 내가 만든 프로젝트를 배포하고 아무리 검색해도 안나오는 처참한 광경을 보고 그때서야 심각성을 깨닫고 개선하려고 이런저런 방법들을 찾아봤다. 메타태그도 넣고 위와 같이 모두에게 공개되어도 되는 부분은 ssr방식을 최대한 적용하려고 했다. 이제 검색하면 노출되는 내 사이트..!!! 너무 뿌듯했고 이래서 사용하는구나 깨닳은 순간이었다
