Next.js SSR🌸🐝

SSR은 Server Side Rendering 약자로, 웹사이트를 접속했을 때 서버로부터 필요한 모든 데이터를 가져와서 HTML파일을 만들고 클라이언트한테 응답해주는 방식이다.

보여질 HTML 내용이 파일에 담겨 있기 때문에 효율적인 SEO가 가능하다. 또한 이미 만들어진 HTML파일을 받아와서 웹사이트를 바로 볼 수 있기 때문에 초기 로딩 속도 역시 빠르다.

하지만 아직 동적으로 제어할 수 있는 자바스크립트 파일은 받아오지 않았기 때문에 클릭을 처리할 수는 없다. 최종적으로 자바스크립트 파일을 받아와야 인터렉션이 가능하기 때문이다.

그렇기 때문에 서버사이드 렌더링은 사용자가 웹사이트를 볼 수 있는 시간과 인터렉션 할 수 있는 시간 사이 공백이 존재하게 된다.

또한 사용자가 클릭을 하게 되면 전체 웹사이트를 다시 서버에서 받아오는 것과 동일하기 때문에 화면 깜빡임 이슈가 발생하고, 클릭을 할 때마다 다시 서버에 요청해 데이터를 받아오기 때문에 서버 부하가 발생할 수 있다.

이처럼 각각의 장단점을 가진 CSR과 SSR을 유연하게 섞어 목적에 맞게 사용할 필요가 있다.

메인페이지 적용하기

사실 개인프로젝트를 통해 SSR의 장점을 크게 경험하기는 쉽지 않다 하지만 실제로 적용하고 도입하는 경험은 앞으로도 개발자로 역량을 키우는 데 큰 기회라 생각한다.

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Next.js는 기본적으로 SSG방식이 default 값으로 정해져 있다. 이 말은 즉 SSR 방식을 사용하려면 따로 지정을 해야한다는 것이다.

적용방법 getServerSideProps

이와 같이 공식문서에 나와있다.

export async function getServerSideProps() {
  const products = await client.product.findMany({});
  console.log(products);
  return {
    props: {
      products: JSON.parse(JSON.stringify(products)),
    },
  };
}

첫번째 단계

console.log(products);를 통해 데이터 값이 오는 것을 확인하였다.

두번째 단계

const Home: NextPage<{products: ProductWithCount[]}> =({ products }) => {
  const user = useUser()
  console.log(user);
  const { data } = useSWR<ProductsResponse>("/api/products/Index")
  console.log(data); 
  const fetcher = (url: string) => fetch(url).then((response) => response.json());
  const { data:profile } = useSWR("/api/users/Me", fetcher); 
  const router = useRouter();
  -----

이렇게 컴포넌트 최상단에 Props로 내려주면 받아온 데이터를 뿌려 줄 수 가 있다.

SSR + SWR 함께 사용하기

SWRConfig 컴포넌트는 fallback 이라는 property 로 캐시 초기 값을 설정 할 수 있다. 그러면 이 Home 컴포넌트가 /api/products/ 키를 이용해서 캐시를 불러 오게 된다.

*fallback에는 key-value 객체를 통해 캐시의 초기값을 설정할 수 있다.

return (
< SWRConfig value={{ fallback }}>
< Article />
< /SWRConfig>
)
}

const Page:NextPage<{products:ProductWithCount[]}> = ({ products }) => {
  return <SWRConfig value={{
    fallback: {
      "api/products/Index" : {
        ok:true,
        products
      }
    }
  }}>
    <Home/>
  </SWRConfig>
}