# CSR

316개의 포스트

SSR, CSR

서버쪽에서 렌더링 준비를 마친 상태로 클라이언트에 페이지를 전달하는 방식예를 들면 서버쪽에서 rest api를 구성해 클라이언트가 이를 비동기 처리해 렌더링에 적용한다던가 하는 방식이 아닌 뷰 템플릿 엔진을 사용해 HTML에 직접 서버에서 얻은 동적데이터를 삽입하는 방

4일 전
·
0개의 댓글
·
post-thumbnail

전통적인 방식의 Web과 SPA (SSR, CSR)

Client가 요청하면 Server에서 만들어진 페이지를 받아 화면에 렌더링해줍니다. (SSR 방식) 이렇다 보니 요청 시마다 새로고침이 일어나고 최근에는 정보량이 늘어나다 보니 Server에 부하가 심해지면서 CSR이 등장하였습니다. 전통적인 방식의 Web !== S

2022년 11월 19일
·
0개의 댓글
·
post-thumbnail

[웹 스터디]정적, 동적 웹 서버/ MPAvsSPA/SSRvsCSR

HTTP 서버 중에서도 리소스 파일을 반환하는 서버를 의미한다.클라이언트가 정적 서버에 요청을 하면 서버는 해당 HTML 파일에 아무 작업도 하지 않고, 파일을 있는 그대로 반환한다. EX) 정적 웹 서버에는 아파치나 Nginx가 있다. 설치한 후 지정된 경로에 원하는

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

[Today I Learned] 11월 3주차 day3

오늘도 어김없이 알고리즘 문제를 풀고 js강의를 들었다. 미니프로젝트 들어가기 앞서 피그마 사용법도 대충 익혔고 앞으로 있을 팀플을 대비해서 노션파일도 정리를 했다. 그리고 곧 배울 spa프레임워크인 리액트를 배우기 전에 spa와 mpa의 개념과 csr과 ssr의 개념

2022년 11월 16일
·
0개의 댓글
·
post-thumbnail

내일배움캠프 4기 React 13일차(JS로 하는 SPA 특강, 알고리즘)

MPA(Multi-Page Application)브라우저에서 변경사항이 있을 때 서버로 서브밋 데이터를 전달하여 새로운 페이지 렌더링을 요청하고 그 데이터를 표시함새로운 페이지를 불러올 때 새로고침 됨SPA(Single-Page Application)서버로부터 완전한

2022년 11월 16일
·
0개의 댓글
·

React Next.js

React는 <span style="background-color:때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리하다.그래서 SEO를 원활하게 하기 위해서는 첫 페이지의 경우, React로 구현한 Javascript 코드

2022년 11월 15일
·
0개의 댓글
·
post-thumbnail

[CS] CSR vs SSR (+SSG)

정의 : Client Side Rendering의 약자로 클라이언트 측에서 렌더링이 일어나는 방식.특징 :SPA에서 사용처음에 모든 JS 파일을 다운 받아 와서 초기 로딩 속도가 느리지만, 이후 페이지 전환 시 로딩 속도는 빠르다. (일부만 요청하면 되기 때문)서버에

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

[Next.js]SSR

SSG(Static Site Generation) 빌드할 때 js 변환해서 html 미리 만들어 두고, 요청이 들어오면 만들어둔 html 응답 Gatsby CSR(ClientSide Rendering) 처음 웹사이트 진입 시, 비어있는 html 응답 첫 화면을 보기까지

2022년 11월 9일
·
0개의 댓글
·
post-thumbnail

서버 사이드 렌더링(SSR)

이 포스트에서 다룰 것 웹 페이지를 렌더링하는 방식들인 Server Side Rendering(SSR) Single Page Application(SPA) Static Site Generation(SSG) Client Side Rendering(CSR) 위의 개념들

2022년 11월 5일
·
0개의 댓글
·
post-thumbnail

렌더링 방식의 변천사

렌더링 방식은 웹브라우저의 발전과 함께 변화해왔다. 과거의 static sites부터 현재의 CSR, SSR, SSG등 그 방식은 계속해서 발전해왔다.

2022년 11월 4일
·
1개의 댓글
·
post-thumbnail

[React] Next.js, CSR, SSR란?

Next.js란 React의 SSR을 쉽게 구현할 수 있게 도와주는 프레임워크이다.리액트로 개발시에, SPA(Single Page Application)를 이용해서 CSR(Client Side Rendering)을 하게 되는데, 이 방법의 가장 큰 단점은 바로 검색엔

2022년 11월 3일
·
0개의 댓글
·
post-thumbnail

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

서버 사이드 렌더링과 클라이언트 사이드 렌더링을 정리한 내용입니다.

2022년 11월 3일
·
0개의 댓글
·
post-thumbnail

NextJS pre-rendering (Static Generation / Server-side Rendering)

react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. pre-rendering 두

2022년 11월 2일
·
0개의 댓글
·
post-thumbnail

SSR/CSR 여러 관점에서 이해하기

SSR(Server Side Rendering)서버에서 필요한 데이터가 결합된 HTML 파일 만들어서 동적인 제어가 가능한 JS 코드와 함께 클라이언트로 보내는 방식 쉽게 말하면 "서버에서 페이지 그려서 넘겨줄게~" 인 듯 하다.CSR(Client Side Render

2022년 11월 1일
·
0개의 댓글
·
post-thumbnail

CSR은 왜 SEO에 불리할까?

리액트에 대한 SPA에 학습하다 SEO 관점에서 불리하다라는 단점이 있다는 내용을 보고 이에 대한 내용을 학습하였다.먼저 SEO(Search Engine Optimization)란?검색엔진 최적화는 웹페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이

2022년 10월 31일
·
0개의 댓글
·

CSR과 SSR

URL을 검색창에 입력하면 렌더링을 위해 서버로부터 HTML, CSS, Javascript 파일을 다운로드 받아 화면에 표출한다.렌더링을 하는 방식은 크게 2가지가 있다.SSR은 Server Side Rendering의 약자로, 말 그대로 서버에서 렌더링을 준비해서 클

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

파이썬 머신러닝 완벽 가이드 - 9. Text Analytics(1) (Encoding, Vectorize)

TA(Text Analytics or Text Mining)비정형 텍스트에서 의미있는 정보를 추출하는 것에 좀 더 중점을 두고 발전머신러닝, 언어 이해, 통계 등을 활용해 모델을 수립하고 정보를 추출해 비즈니스 인텔리전스나 예측 분석 등의 분석 작업을 주로 수행한다.텍

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

SSR, CSR? SPA? 헷갈리지 말자

SSR로 되어있던 프로젝트를 CSR로 렌더링 하는 방식으로 전환하는 작업을 하고 있다.그래서 SPA로 개발을 하게 되었는데 개발하기 전에 용어를 정확히 알고 가자!SEO초기요청 속도초기요청 이후 페이지 전환 속도이전 회사에서도 그렇고 대부분의 프로젝트가 SSR로 되어

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

SSR과 CSR

SSR (Server Side Rendering) CSR (Client Side Rendering)

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

[프론트엔드] MPA, SPA, CSR, SSR 개념정리

전통적인 사이트들은 하나의 index.html을 통해 다른 페이지(html)로 이동하는 방식이다. (이러한 방식을 MPA라 한다.)하지만, 최근의 웹 사이트들은 ReactJS,VueJS,AngularJS와 같은 프레임워크/라이브러리를 사용한 SPA 방식이 주를 이룬다.

2022년 10월 24일
·
0개의 댓글
·