CSR에서 window나 document를 접근할수 없다는 부분이 이해가 잘 안갑니다.

Question

CSR 부분 강의를 듣던도중 useEffect 바깥에서 window나 document를 접근하는 경우 문제가 되는것을 알게 되었습니다.

강의에서는 초기에 값이 들어있지않은 html을 프리렌더링해서 제공한다고 설명하고 있는데 이부분에서 의문점이 있습니다.

1. 제가 기존에 알고있던 CSR은 프리렌더링을 하지 않는걸로 알고 있었는데

그러면 결국 프리렌더링 이라는것은 SSR SSG ISR CSR 까지 모두 적용되고있는 방식인가요?

2. 프리렌더링을 하는것이 맞다면, 저같은 경우 일전에 했던 리액트 프로젝트를

정적 파일을 저장하는 aws S3에 배포해본적이 있는데 이것이 가능했던 이유가

서버에서 렌더링을 진행하기 않기때문에 가능한것이라고 알고 있었습니다.

그렇다면 S3에서 CSR만 적용된 리액트 프로젝트를 배포할수있는 이유는 무엇인가요?

Answer

안녕하세요 질문 감사합니다.Next.js 프레임워크 안에서 강의가 진행되다보니 오해가 발생한 것 같습니다. CSR이 프리렌더링을 한다는 뜻이 아닌, Next.js pages가 프리렌더링을 제공하고 일부분은 CRA 방식으로 렌더링할 수도 있다는 뜻이었습니다.해당 강의에서는 Next.js pages 안에서 useEffect나 dynamic import를 이용해 일부분만 CSR 방식으로 렌더링합니다. 따라서 CSR이 아닌 부분들(ex> 강의에서 <h1> 제목 부분)은 프리렌더링할 수 있습니다.하지만 질문자님이 전에 하셨던 프로젝트(아마 create-react-app으로 만든 CSR 프로젝트)는 프로젝트 자체가 클라이언트 사이드 렌더링이기 때문에, 2번에서 원래 알고계시던 내용이 맞습니다. (서버에서 프리렌더링하지 않고, 빈 index.html에서 CSR)충분히 혼동이 생길 수 있는 부분이라 답변이 부족했다면 다시 댓글 부탁드립니다!감사합니다 :)

BBB AAA

CSR에서 window나 document를 접근할수 없다는 부분이 이해가 잘 안갑니다.

이 글과 비슷한 Q&A

리액트 설치에 대해 궁금한 점이 있습니다.

yarn 설치가 되지않습니다.

인터셉팅 라우터가 signup에는 적용이 안되는 문제

섹션11 eslint 설치