CSR 단점 질문
안녕하세요 강사님!
부록의 NextJS란을 듣고 궁금증이 생겨서 질문 남깁니다.
CSR 방식 설명을 제가 이런식으로 정리해보았습니다.
서버의 response를 브라우저에서 자바스크립트 파일 다운로드하고 리액트를 실행하고 이런 과정을 화면에서 보여주지 않고 로딩하는 것만 보여줌. 때문에 크롤링을 할 수 없음 = 검색엔진 최적화 X
그렇다면 로딩이 모두 끝난 후 완료된 화면을 크롤링 하면 되는 거 아닌가요(첨부한 파일 4번 이후)? 이렇게 한다면 속도 문제 때문에 사용하지 않는 것(SSR방식은 첨부한 파일에 2번에서 크롤링 한다고 제가 인지하고 있습니다)인지 아니면 제가 말씀드린 방법(4번 이후 시점에서 크롤링)은 사용할 수 없는 방법인지 호기심 차원에서 질문 남깁니다.
강의 잘 듣고 있습니다 답변 감사합니다.
답변 1
1
안녕하세요 허깨비님!
이러한 호기심이 개발을 더 잘하게 만드는 것 같습니다!
검색엔진이 탐색하는 것은 오른쪽 클릭했을 때 페이지 소스 보기를 클릭하면
전체 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 밖에 안 보이기 때문에 따로 실제 보여주는 데이터를 가져올 수 없기 때문에
검색엔진 최적화가 안 되는 것입니다 ~
감사합니다!
toJson을 추가하면 [sub].tsx에서 sub를 받아오지 못합니다.
0
122
2
쿠키 저장이 되지 않습니다.
0
226
1
AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', (2)
0
581
1
AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE',
0
651
1
overload 에러
0
170
1
docker compose up 오류
0
210
1
부록) remark 강의 중 parmas 오류
0
140
1
3000번은 잘 들어가지는데 80번은 안됩니다.
1
296
0
커뮤니티를 올리고 난 후 404 page
0
209
1
tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.
0
1043
2
tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?
0
656
2
useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?
0
805
2
리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이
0
4615
2
data 폴더가 생성되지 않아요.
0
527
1
docker-compose up 오류
0
814
1
회원 가입 페이지 기능 생성(3) 중 에러
0
380
2
Entity에 toJSON 코드 입력 후 404 에러
0
252
1
context에서 useEffect 선언 부분 질문 있어요.
0
297
1
src 폴더구조
0
511
2
서버 실행 시 에러 관련하여 답변받고 1차 조치했는데 여전하여서 질문 남깁니다
0
298
1
엔티티 모두 작성 후 서버 실행 시 에러가 발생합니다
0
313
1
회원가입 누르면 404에러가 뜹니다 ;-;
1
424
1
nextjs버젼에 대해서 질문드립니다.
0
373
1
<npm run dev>시 -61 에러가 나타납니다!
0
359
1