SSR(Server Side Rendering)
SSR은 기존에 MPA와 함께 쓰이던 방식이다. 서버에서 요청한 HTML 파일을 렌더링을 모두 마친 후에 응답으로 넘겨주기 때문에 로딩시간이 상대적으로 짧다. 이미 렌더링 된 HTML이 전달되므로 SEO 적용도 CSR보다 유리하다. 하지만 각 페이지마다 매번 로딩을 하기 때문에 UI/UX적으로 좋지 않고 서버에 부하도 가해진다.
CSR(Client Side Rendering)
CSR은 SPA와 함께 나왔다. SPA 라이브러리를 이용해 파일을 작성하고 빌드하게 되면 하나의 js파일(또는 여러개의 chunk 파일)이 나오게 된다. 브라우저가 이 파일을 모두 로드하기 전까지는 사용자는 빈 화면을 바라봐야한다. 또한 페이지가 비었기 때문에 SEO도 적용하기 어렵다. 하지만 초기로딩 속도를 제외하면 페이지 이동, 인터렉션 등이 매우 빠르고 서버가 클라이언트 단을 신경쓰지 않아도 된다.
둘의 장단점이 각각 있으므로 적절히 혼합해 문제점들을 극복할 수 있다.
SEO(Search Engine Optimization)
검색엔진(구글, 네이버 등)에 검색을 했을 때 결과로 적절하고 연관성 있는 웹사이트들이 나오게 하는 것이다. 시멘틱 태그를 사용해 웹 크롤러에 정보가 잘 수집될 수 있도록 한다. SSR이 SEO 적용하기에 용이하나 구글 검색엔진은 CSR 페이지도 데이터가 페칭될 때까지 기다렸다가 정보를 수집하기 때문에 검색에 걸린다고 한다.
SEO가 필요한 상세페이지는 SSR, 아닌 페이지는 CSR을 적용하는 것이 좋다.
OpenGraph
웹사이트에 대한 정보를 <meta>에 담아 미리보기를 제공할 수 있다.
...
<Head>
<meta property="og:title" content="네이버" />
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
/>
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png" />
</Head>
...위와 같이 <meta>에 op(open graph) 속성을 사용해 작성한다.
동적 페이지에서는 og 정보를 하드코딩해서 제공할 수가 없다. 이때 SSR을 적용해 데이터를 넣어준다.
import { gql, useQuery } from "@apollo/client";
import Head from "next/head";
import { GraphQLClient } from "graphql-request";
const FETCH_USEDITEM = gql`
query fetchUseditem($useditemId: ID!) {
fetchUseditem(useditemId: $useditemId) {
_id
name
remarks
images
}
}
`;
function OpengraphProviderPage(props: any): JSX.Element {
return (
<>
<Head>
<meta property="og:title" content={props?.data.name} />
<meta property="og:image" content={props?.data.images?.[0]} />
<meta property="og:description" content={props?.data.remarks} />
</Head>
<div>중고마켓에 오신 것을 환영합니다.</div>
</>
);
}
export const getServerSideProps = async (): Promise<any> => {
const graphQLClient = new GraphQLClient(
"백엔드 주소",
);
const result = await graphQLClient.request(FETCH_USEDITEM, {
useditemId: "useditemId",
});
return {
props: {
data: {
name: result.fetchUseditem.name,
remarks: result.fetchUseditem.remarks,
images: result.fetchUseditem.images,
},
},
};
};getServerSideProps에서 데이터를 요청하고 응답으로 받은 데이터는 페이지 안에 props로 들어가게 된다. 이런 props를 pageProps라고 한다.
스크래핑(Scrapping)
특정 사이트의 한 페이지를 한 번 긁어오는 것을 뜻한다.
크롤링(Crawling)
특정 사이트에서 돌아다니며 버튼을 클릭하는 등 여러 페이지를 가져오는 것을 뜻한다. 여러번의 스크래핑을 한 것이 크롤링이라고 생각하면 된다. 크롤링을 할 경우 상업목적으로 사용 시 소송 대상이 될 수 있다. 또 너무 많은 접속으로 해당 회사 서버에 부하를 줄 경우, 공격으로 판단될 수 있기 때문에 주의해야한다.
