-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
CSR 단점 질문
22.12.27 20:46 작성 조회수 189
0
안녕하세요 강사님!
부록의 NextJS란을 듣고 궁금증이 생겨서 질문 남깁니다.
CSR 방식 설명을 제가 이런식으로 정리해보았습니다.
서버의 response를 브라우저에서 자바스크립트 파일 다운로드하고 리액트를 실행하고 이런 과정을 화면에서 보여주지 않고 로딩하는 것만 보여줌. 때문에 크롤링을 할 수 없음 = 검색엔진 최적화 X
그렇다면 로딩이 모두 끝난 후 완료된 화면을 크롤링 하면 되는 거 아닌가요(첨부한 파일 4번 이후)? 이렇게 한다면 속도 문제 때문에 사용하지 않는 것(SSR방식은 첨부한 파일에 2번에서 크롤링 한다고 제가 인지하고 있습니다)인지 아니면 제가 말씀드린 방법(4번 이후 시점에서 크롤링)은 사용할 수 없는 방법인지 호기심 차원에서 질문 남깁니다.
강의 잘 듣고 있습니다 답변 감사합니다.
답변을 작성해보세요.
1
John Ahn
지식공유자2022.12.29
안녕하세요 허깨비님!
이러한 호기심이 개발을 더 잘하게 만드는 것 같습니다!
검색엔진이 탐색하는 것은 오른쪽 클릭했을 때 페이지 소스 보기를 클릭하면
전체 html에 이 보이고 그곳에 알맞은 데이터들도 들어가 있죠? (인프런 사이트에서 오른쪽 클릭해서 확인하셔도 됩니다)
리액트 클라이언트 사이드 프로젝트를 실행해서 보면 똑같이 오른쪽 클릭해서 페이지 소스 보기를 보면 어떻게 나오나요?!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->
<link rel="manifest" href="/manifest.json" /> <!-- Notice the use of in the tags above. It will be replaced with the URL of the public folder during the build. Only files inside the public folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running npm run build. -->
<title>React App</title>
<script defer src="/static/js/bundle.js"></script>
</head> <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run npm start or yarn start. To create a production bundle, use npm run build or yarn build. -->
</body>
</html>이런 식으로 index.html 만 보이는 걸 볼 수 있습니다.
구글에서 크롤링을 하는데
index.html 밖에 안 보이기 때문에 따로 실제 보여주는 데이터를 가져올 수 없기 때문에
검색엔진 최적화가 안 되는 것입니다 ~
감사합니다!
답변 1