# SSR
클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 의 정의와 장단점
우선 웹브라우저가 웹서버에 요청을 하면 웹서버는 응답을합니다.서버가 브라우저에게 전달한 응답인 HTML문서를 브라우저는 읽어들이고 해석후 사용자 (Client) 에게 보여줍니다.클라이언트 사이드 렌더링이란 초기 웹사이트 접속시 서버로부터 모든 파일을 불러와 클라이언트에
SSR CSR
SSR은 Server Side Rendering의 줄임말입니다. 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라
SEO (CSR, SSR, SSG)
CSR(Client-Side-Rendering) 클라이언트 브라우저에서 어플리케이션을 렌더링을 진행한다. 즉 어플리케이션 구동에 필요한 HTML, JS, CSS 파일 등을 모두 다운로드 한 뒤에 뷰가 구성된다. > SSR(Server-Side-Rendering) 서버에서 뷰 구성에 필요한 전체 HTML을 요청을 받은 즉시 생성해서 반환한다. 이렇
SEO (CSR, SSR, SSG)
웹 페이지를 렌더링하는 방식에는 크게 CSR, SSR이 있고, 각각의 정의와 특징 및 장단점, 더해서 SSG까지 알아보도록 하자. 또한 이러한 렌더링 방식이 SEO(검색엔진 최적화)에 얼마나 유리한지 까지도 짚어볼 것이다.검색엔진 최적화, 즉 검색엔진에서 찾기 쉽도록
Day-36 http vs https, SSR 배포
웹사이트 주소를 자세히 보면 http 또는 https로 시작하는 주소를 볼 수 있다.http는 주의요함이라는 글자와 함께 경고 표시가 나타나며https는 안전한 자물쇠모양으로 되있는 것을 볼 수 있다.접속을 하기 위한 버튼 등을 누르게 되면 api 정보, 보안이 필요한
서버사이드렌더링
서버사이드 렌더링프론트엔드 서버에서 백엔드로 요청하고 벡엔드는 DB서버로 다시 요청하고 백엔드는 다시 DB에서 데이터를 가져오고 프론트엔드서버로 다시 가져오고 여기서 HTML , CSS , JavasScript를 새로 만들어서 제공하는게 서버사이드 렌더링이다. 서버사이
SEO (CSR, SSR, SSG)
클라이언트 브라우저에서 어플리케이션을 렌더링을 진행한다.즉 어플리케이션 구동에 필요한 HTML, JS, CSS 파일 등을 모두 다운로드 한 뒤에 뷰가 구성되게 된다.초기 Javascript 파일을 전부 로드한 후, 뷰를 구성해야하기 때문에 어플리케이션이 커질수록 구동시
SPA와 CSR은 같을까?
결론은 "NO" SPA, MPA는 페이지를 하나만 쓰는지, 여러개 쓰는지의 차이이고 CSR, SSR은 렌더링을 어디서 하냐의 차이로 비교 대상이 아니다. SPA에서는 첫 페이지만 받아오고 이후에 데이터의 수정,조회를 하고 싶기 때문에 CSR이란 방식을 채택한 것이다.
Nuxt3 정리
삽질 끝Nuxt3 빌드 산출물은 Client + Server 폴더로 나뉜다페이지 진입 시 Server side에서 Rendering을 완료하여 브라우저로 내려주고, (Pre-redering) 이후 해당 페이지를 조작할 수 있는 JS Bundle을 추가로 내려준다 (Hy
🧐 CSR, SSR, SSG, ISR 개념 정리 ( Next.js )
Next.js를 기반으로 CSR, SSR, SSG, ISR에 대한 개념을 정리한 작성한 포스트
CSR, SSR 방식 이해하기
이전에 사용되던 방식으로 html은 server에 배포되어 있고 client에서 특정 주소에 접속하면 server에서 html을 받아와서 보여줌문제점 : 페이지 내에서 다른 링크 클릭 시 서버에서 다시 html 문서를 가져옴, 페이지 전체가 업데이트 된다.Single
[웹개발 로드맵] 6. CSR & SSR
CSR 어제 알아본 SPA(Single Page Application)는 CSR(Client Side Rendering)로 동작한다. CSR은 Client Side Rendering, 즉 클라이언트 측에서 렌더링이 동작하는 방식이다. 렌더링이란 쉽게 말하자면 화면에 사
Day-34 배포의 흐름(SSG, SSR), 로드밸런서, DNS, test
배포란 사용자가 주소를 입력하면 접속가능하게 만들어주는 것을 말한다.접속이 가능하려면 프론트엔드 서버는 종료되지 않아야 하며 24시간 동안 켜져있어야 한다.SSR이란 로드밸런서를 이용한 배포방법으로 동적으로 변하는 파일들을 처리한다.브라우저에 접속하면 도메인 주소를 I
CSR vs SSR
Next.js로 프로젝트를 생성하게 된 이유를 정리하다보니 기본적인 개념부터 계속해서 정리해나가고 싶어서 글을 계속 임시저장하며 새 글을 작성하기까지 벌써 3번째 글,,, CSR과 SSR의 차이부터 다뤄보려고 한다!
렌더링(SSR, SSG, CSR), Next.js 렌더링, 특징
정적 페이지 생성 방식으로 90년대 많이 사용하던 방식으로 현재는 변경되지 않는 웹 페이지의 최적화에 쓰임1) 개발자가 HTML, CSS 파일 묶음을 생성(정적파일)해서 웹서버를 생성하여 거기에 묶음(정적파일)을 업로드함. 클라우드에 올려둠2) 클라이언트에서 HTTP
[Next.js] Next.js?
Next.js는 Node.js를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 합니다. React 문서에는 "Node.js로 서버 렌더링 웹사이트 구축"할 때 개발자에게
Day-33 Optimistic-UI, 서버사이드렌더링(Scraping, Crawling, SEO, SSG, SSR)
우리는 데이터를 받아올 때 백엔드에 api를 요청하고 DB에 가서 받아와서 화면에 그려주는 단계를 거치게 되는데Optimistic-UI는 데이터를 받아오는 것을 기다리지 않고 어차피 성공할 것이라고 판단하여 바로 캐시스테이트에 업데이트를 하는 것을 말한다.Optimis
[SEO] 기본
개요 MDN에서는 아래와 같이 정의 하고 있다. > SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다. https://developer.mozilla.org/ko/docs/Glossary/SEO
