인프런 커뮤니티 질문&답변
작성한 질문수
CSR에서 window나 document를 접근할수 없다는 부분이 이해가 잘 안갑니다.
해결된 질문
작성
·
302
·
수정됨
1
CSR 부분 강의를 듣던도중 useEffect 바깥에서 window나 document를 접근하는 경우 문제가 되는것을 알게 되었습니다.
강의에서는 초기에 값이 들어있지않은 html을 프리렌더링해서 제공한다고 설명하고 있는데 이부분에서 의문점이 있습니다.
1. 제가 기존에 알고있던 CSR은 프리렌더링을 하지 않는걸로 알고 있었는데
그러면 결국 프리렌더링 이라는것은 SSR SSG ISR CSR 까지 모두 적용되고있는 방식인가요?
2. 프리렌더링을 하는것이 맞다면, 저같은 경우 일전에 했던 리액트 프로젝트를
정적 파일을 저장하는 aws S3에 배포해본적이 있는데 이것이 가능했던 이유가
서버에서 렌더링을 진행하기 않기때문에 가능한것이라고 알고 있었습니다.
그렇다면 S3에서 CSR만 적용된 리액트 프로젝트를 배포할수있는 이유는 무엇인가요?
답변 1
1
안녕하세요 질문 감사합니다.
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)
충분히 혼동이 생길 수 있는 부분이라 답변이 부족했다면 다시 댓글 부탁드립니다!
감사합니다 :)
프론트를 Next.js로 코딩했다면 (프론트용) next 서버에서 프리렌더링 합니다.
Next.js의 'export' 기능을 통해 정적인 파일들을 만들고, S3로 호스팅할 수 있습니다. 관련 문서 링크입니다!(https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)
감사합니다 :)
답변 감사합니다. 추가적인 질문이 있는데요.
1. 예를 들어 서버가 프론트/백엔드 2개로 나뉘어져 있을때 프론트를 Next.js 기반으로 코딩한경우 프리렌더링이 프론트/백엔드 둘 중 어디서 발생하는건가요?
2. Next.js는 pages에서 프리렌더링이 기본적으로 제공되기 때문에 getServerSideProps나 getStaticProps의 revalidate 같은 기능을 쓰지 않더라도 S3에서는 Next.js 사용이 불가능한건가요?