# SSR
CSR 앱에서 SSR + CSR 환경으로 이주하기
❗ CSR에 SSR을 적용하는데 어려움을 겪는 분들을 위해 작성했습니다. 혹시 틀린 부분이 있다면 말씀해주세요!❗ SSR과 refresh token에 대한 사전 지식이 있으면 글을 이해하기 조금 더 편합니다.❗ 웹서버와 WAS가 무엇인지 궁금하다면 여기를 참고해주세요!
CSR, SSR
각 두개의 단어는 서로의 대척점에 있다고 볼 수 있다. CSR 와 SSR SPA 와 MPA 해당 개념에 대해 헷갈리지 않도록 조금 더 쉽게 작성해보기로 하였다. 웹 브라우저(크롬, 웨일, 파이어폭스, IE, ...)에서 실제로 우리가 볼 수 있는 화면이 있다.
SSR 과 CSR
이번에 항해 99를 1주차에서 서버사이드 렌더링에 대하여 배우게 되었습니다. 항해에서는 Flask의 템플릿 언어인 Jinja2에 대하여 배웠는데, 일단 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(SSR)에 대하여 알아보기로 했습니다.요청해서 받은 내용을 브
TIL 검색최적화를 위한 빌드업 #2 SPA,CSR,SSR(feat...Next.js)
이름 그대로, 단일 html페이지에서 전체 웹 사이트/ 서비스를 구현한 것이 SPA이다.웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.클라이언트 사이드 랜더링은 최초 로드시 필요한 파일들을 모두 받고 사용자의 인터랙션에 따라 클라이언트
ssr 데이터 동적 할당
일단은 쿠키부터가 말썽이었다. 서버에서는 로컬스토리지에 접근할 방법이 없었고, 현재 사용하고 있는 인증 방법은 토큰이기 때문에 로컬스토리지에 저장되어 있는 토큰을 쿠키로 옮겨야만 했다. 로컬스토리지로 할 방법을 하루종일 찾아봤지만 찾지 못했고, 불가능하다고 판단했다.
.png?w=768)
SSR 도입
SSR이란 Server Side Rendering으로 서버 사이드에서 렌더링에 필요한 html을 모두 구성해서 클라이언트로 보내준다는 의미이다. 즉, 클라이언트인 브라우저가 받는 index.html은 파싱만 완료하면 더 이상 DOM을 변경할 필요가 없다.(CSR에 비해
CSR / SSR / SPA / MPA
렌더링 방식에 대한 차이로 나뉘는 CSR & SSR (렌더링을 어디서하느냐) CSR (client side rendering) 동작순서 서버에서 브라우저로 응답을 보냄 -> 브라우저에서 js script를 다운받음 -> 브라우저가 react를 실행함
[FE] SPA/SSR/CSR이란?
간단하게 개념에 대해서 정리해 보려고 한다. 중요한 개념은 기본이 되는 것이다. 잊지 않도록 정리를 차근해 해본다. 간단하게 말하자면 아래와 같다.말 그대로, 한 개의 페이지를 가진 어플리케이션을 말한다. 사용하는 이유는 사용자자 친화적이며, 초기 렌더링 후 데이터만
NUXT 기초 강의 : 넉스트는 무엇인가?
넉스트는 무엇인가?The intuitive Vue Framework공식 홈페이지에 써 있는 말이다.즉, Nuxt는 Vue.js의 직관적인 프레임워크이다.Vue.js도 프레임 워크이므로 프레임워크의 프레임워크 되시겠다. 전문용으로 하이레벨 프레임워크이다.
TIL - SSR CSR
서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 의미서버에서 모든 것을 제공해주기 때문에 과부화 문제가 생김다 구성되고 한번에 뜸 main사이트등 변경이 많이 없을때는 SSR을 사용클라이언트에서 처리 이벤트가 단계적으로 발생하면서 렌
SSR & CSR & SPA
렌더링이란 서버로부터 요청해서 받은 내용을 브라우저 화면에 보여주는 것을 의미한다. 렌더링은 아래의 과정을 통해 진행된다.loader가 서버로부터 정보들을 불러온다.파싱을 통해서 DOM트리를 구성한다.DOM트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다.css설정
Day.17 바닐라 자바스크립트(2021.08.24)
API를 이용해서 화면 렌더링을 할경우 인터넷환경과 서버에 따라서 사용자가 느낄만한 지연성이 나올수 있다. 결과적으로 사용자 경험이 떨어지게 된다.이를 방지하기 위해 낙관적 업데이트를 하면 사용자 경험이 향상된다.이런 식으로 서버에서 데이터를 받아서 렌더링 하기 전에
CSR과 SSR, SPA와 MPA
이번 주제는 렌더링(Rendering)방식과 웹 아키텍처(Architecture)입니다. 렌더링 방식과 웹 아키텍처 보다 CSR과 SSR, MPA와 SPA 등의 용어를 주로 사용하므로 개념의 명확함을 위해 이와 같은 주제를 정하게 되었습니다. 들어가기 전에 선행학
.png?w=768)
CSR 렌더링, SSR 렌더링 과정의 차이점에 대해 알아보자! ⚖️
오늘 데브코스에서 브라우저의 렌더링에 대한 좋은 질문 주제가 나왔다!질문에 대한 배경을 거쳐 위와 같은 질문이 나왔고, 결과적으로는 "렌더링"이라는 용어가 큰 혼란을 주어 생긴 질문이었다! 렌더링이 잘못했네..질문에 대한 궁금증은 해소되었지만, 해답을 얻는 과정에서 실
Day.16 바닐라 자바스크립트(2021.08.23)
url의 변화를 신경쓰자hashbang은 거의 안쓰니까 이런게 있는 것만 알아두자 예전에 IE에서 지원을 했기 때문에 썼는데 지금은 안쓴다고 한다.서버에서 HTML파일을 계속해서 받아오는 것이 아니라 클라이언트에서 자바스크립트를 이용해서 HTML파일을 생성해서 렌더링하
[GatsbyJS] 'document is not defined' 해결하기
[GatsbyJs] 'document is not defined' 해결하기