# SSR
[Spring] HTML, HTTP API, SSR, CSR
View를 반환하는 경우 정적 리소스 정적 리소스를 제공할 때는 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공한다. 동적 리소스 동적 HTML 페이지 데이터를 반환하는 경우 HTTP API HTML이 아니라 데이터를 전달하는 방식 주로 JS
SSR 과 CSR 차이
서버 사이드 렌더링은 서버에서 HTML 파일을 저장해두었다가, 요청이 발생할 때 모든 파일을 브라우저에전달하는 방식으로 SEO, 인덱싱, 크롤링에 최적화되어 있다.반면, 클라이언트 사이드 렌더링은 서버에서 HTML 파일을 처리하지 않고, 브라우저의 자바스크립트를상호작용
SSR, CSR
서버쪽에서 렌더링 준비를 마친 상태로 클라이언트에 페이지를 전달하는 방식예를 들면 서버쪽에서 rest api를 구성해 클라이언트가 이를 비동기 처리해 렌더링에 적용한다던가 하는 방식이 아닌 뷰 템플릿 엔진을 사용해 HTML에 직접 서버에서 얻은 동적데이터를 삽입하는 방
SSR은 풀스택이 아니다 개정판
내가 예전에 썼던 SSR은 풀스택이 아니다를 아예 갈아엎고 다시 쓴 판이라 보면 된다. 그때당시엔 맨탈 나간 상태로 썼기 때문에 어수선해서 정리 좀 해봤다. 어때 나 잘했찌? 찡긋.
Next.js) styled-components 리렌더 시, 적용안되는 문제 해결방법
Next.js 프로젝트로 styled-components를 사용 시, 리렌더나 새로고침을 하면 적용이 풀리는(?) 이슈가 있었다.
전통적인 방식의 Web과 SPA (SSR, CSR)
Client가 요청하면 Server에서 만들어진 페이지를 받아 화면에 렌더링해줍니다. (SSR 방식) 이렇다 보니 요청 시마다 새로고침이 일어나고 최근에는 정보량이 늘어나다 보니 Server에 부하가 심해지면서 CSR이 등장하였습니다. 전통적인 방식의 Web !== S
[웹 스터디]정적, 동적 웹 서버/ MPAvsSPA/SSRvsCSR
HTTP 서버 중에서도 리소스 파일을 반환하는 서버를 의미한다.클라이언트가 정적 서버에 요청을 하면 서버는 해당 HTML 파일에 아무 작업도 하지 않고, 파일을 있는 그대로 반환한다. EX) 정적 웹 서버에는 아파치나 Nginx가 있다. 설치한 후 지정된 경로에 원하는
[HTML] 시멘틱 웹 (Semantic Web)
대부분의 사용자들은 자신들이 원하는 정보를 취득하기 위해 네이버,구글 등 검색 사이트를 이용합니다.검색 사이트에서 검색을 해도 나오지 않는 웹의 경우사용자들의 접근성이 매우 떨어지게 되며 접속하는 이가 없을 것입니다.그러니 당연하게도 웹 사이트들은 검색엔진에 의해 노출
[Today I Learned] 11월 3주차 day3
오늘도 어김없이 알고리즘 문제를 풀고 js강의를 들었다. 미니프로젝트 들어가기 앞서 피그마 사용법도 대충 익혔고 앞으로 있을 팀플을 대비해서 노션파일도 정리를 했다. 그리고 곧 배울 spa프레임워크인 리액트를 배우기 전에 spa와 mpa의 개념과 csr과 ssr의 개념
내일배움캠프 4기 React 13일차(JS로 하는 SPA 특강, 알고리즘)
MPA(Multi-Page Application)브라우저에서 변경사항이 있을 때 서버로 서브밋 데이터를 전달하여 새로운 페이지 렌더링을 요청하고 그 데이터를 표시함새로운 페이지를 불러올 때 새로고침 됨SPA(Single-Page Application)서버로부터 완전한
React Next.js
React는 <span style="background-color:때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리하다.그래서 SEO를 원활하게 하기 위해서는 첫 페이지의 경우, React로 구현한 Javascript 코드
[CS] CSR vs SSR (+SSG)
정의 : Client Side Rendering의 약자로 클라이언트 측에서 렌더링이 일어나는 방식.특징 :SPA에서 사용처음에 모든 JS 파일을 다운 받아 와서 초기 로딩 속도가 느리지만, 이후 페이지 전환 시 로딩 속도는 빠르다. (일부만 요청하면 되기 때문)서버에
Next JS, SSR
보일러플레이트 컴퓨터 프로그래밍에서 보일러플레이트 또는 보일러플레이트 코드라고 부르는 것은 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다 Universal 이란, 어디서든 작동한다는 의미이다 서버에서 미리 사전 작업을 좀 해놓고, 클라이언트에게 던져줘서, 클라이언트가 좀 더 작업을하게 하고, 양쪽에서 코드와 뷰를 공...
[Next.js]SSR
SSG(Static Site Generation) 빌드할 때 js 변환해서 html 미리 만들어 두고, 요청이 들어오면 만들어둔 html 응답 Gatsby CSR(ClientSide Rendering) 처음 웹사이트 진입 시, 비어있는 html 응답 첫 화면을 보기까지
서버 사이드 렌더링(SSR)
이 포스트에서 다룰 것 웹 페이지를 렌더링하는 방식들인 Server Side Rendering(SSR) Single Page Application(SPA) Static Site Generation(SSG) Client Side Rendering(CSR) 위의 개념들
렌더링 방식의 변천사
렌더링 방식은 웹브라우저의 발전과 함께 변화해왔다. 과거의 static sites부터 현재의 CSR, SSR, SSG등 그 방식은 계속해서 발전해왔다.
[React] Next.js, CSR, SSR란?
Next.js란 React의 SSR을 쉽게 구현할 수 있게 도와주는 프레임워크이다.리액트로 개발시에, SPA(Single Page Application)를 이용해서 CSR(Client Side Rendering)을 하게 되는데, 이 방법의 가장 큰 단점은 바로 검색엔
