# SSR
SPA 그리고 SSR과 CSR
렌더링에 관해선 이전 글에서 작성했지만 다시 한번 간단하게 말하고 가자면, 렌더링이란 사용자가 웹 페이지에 접속했을 때 서버로부터 HTML 파일을 받아 화면에 그려주는 것이다. SSR(Server Side Rendering) 과거 그리고 현재도 그렇지만, 많은 웹사이
csr ssr
spa single page application 페이지 하나에서 해결한다 목록 마이페이지 메뉴페이지 카테고리 페이지 처럼 많은데 html 은 하나다 검색과 seo search engine optimization 검색 최적화 사이트를 만들고 배포하면 바로 배포되지않는
ssr 삽질기 - styled-component가 잘 렌더링되지 않아요!
찰나의 시간동안 스타일이 전혀 입혀지지 않은 plain text들이 화면에 표시되는 것이 문제였습니다. SSR과 코드스프리팅의 특성상 첫 화면을 렌더링하고 동적임포트 한 chunk된 javascript들이 hydrate 되는데요, hydrate 되기 이전에 첫 렌더링
SPA에서 서버사이드 렌더링을 구축하지 않고 SEO 최적화하기
얼마 전 create-react-app 기반의 SPA 프로젝트에서 빠른시간내에 SEO를 적용해야 하는 일이 있었습니다. 제가 아는것은 SPA의 SEO는 next.js 혹은 gatsby 를 이용하여 개발하거나, 직접 서버사이드 렌더링(Server-Side Renderin
[Session] How the Web Works? ( MPA, CSR, SPA, SSR)(
SPA 페이지가 하나. 페이지는 여러개 이지만 html은 하나로 작동 하는 것 SEO 검색엔진최적화 사이트를 만들기만 해서 검색 엔진에 노출이 되는 것이 아니다. 구글의 크롤봇이 사이트를 돌며 html의 내용을 가지고 있다.
2020-05-04 TIL How the Web Works
단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면 이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고 필요한 데이터만 서버로 부터 JSON으로 전달 받아 동적으로 렌더링 한다.SPA와 기존어플리케이션의 차이점은 기존 어플리케이션은 화면 이동
Nuxt.js vs Vue.js - SSR 시작하기
Nuxt.js는 Vue를 바탕으로 서버사이드 렌더링 어플리케이션을 만들기 위한 라이브러리입니다. Vue 프로젝트의 구조를 바탕으로 Nuxt.js를 사용해 보기 위해 기존 코드와의 차이점을 비교하며 정리 해 봅니다.
REACT SSR
Frontend 면접 질문 목록, FRONT END 개발자가 알아야 할 N가지, 이런 목록에 꼭 빠지지 않고 보이는 항목은 SSR이다. SSR은 무엇이고 React에서의 SSR에 대해 정리해 보았다.SSR은 서버사이드 렌더링을 의미한다. React를 기본 CRA로 사용
SSR- CSR 101
CSR / SSR 참고 이미지 우리가 사용하는 크롬과 같은 브라우저를 UI, 그리고 React를 웹팩과 같은 번들러로 빌드하고 이를 뿌려주는 node.js 와 같은 JS Runtime , 마지막으로 없어서는 안될 서버가 위의 도식과 같이 있습니다. 클라이언트 사이드 렌
next.js 프로젝트 초기설정하기
본 글에서는 다음을 다룹니다. next.js 는 SSR 을 사용할 수 있게 해주는 모듈입니다. React.js에 SSR을 이용해 SEO(Search Engine Optimization)을 적용할 수 있게 해주며 SEO가 적용된 프로덕트는 구글과 같은 사용자가 많이 사용
Next js 구동방식 과 getInitialProps
Next js가 React Project의 SSR을 가능하게 한다. 라고는 하는데, 어떤 방식으로 SSR을 가능하게 할까, SSR과 CSR의 구분은 어떻게 되어 있을까.이 궁금증을 해결하기 위해, 먼저 알아야 할 것은 Next js의 구동방식 이라고 생각한다.최초에 N
NEXT.js : 초기세팅 & 기본 설명 #1
NEXT.js? next.js는 리액트 서버사이드렌더링(Server Side Randering, SSR) 프레임워크로 다음과 같은 기능 & 장점이 있어 많이 사용되고 있다. 1. 검색앤진최적화(Search engine Optimization, SEO) 2. 빠른 첫페이
Wecode 41일차-TIL
SSR(Server Side Rendering)단어 그대로 서버에서 랜더링을 작업한다. 기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때,서버에 페이지에 대한 요청을 하며 서버에서는 HTML,view와 같은 리소스들을 어떻게 보여질지 해석하고 랜더링하여 사용자에게
쪼렙 개발자의 NEST.js 입문기
React는 기본적으로 CSR(Client Side Rendering) Framework이다. 서버에서 기본 Html만 받아 Client에서 데이터를 구성하여 화면에 렌더링한다. 그래서 React Application 들은 SPA(Single Page Applicati
(TIL 34일차) 프로젝트 1차 프론트 전체 세션 (2)
프로젝트1차 프론트 전체 세션 (2) SPA MAP SSR CSR 부모 자식 라이프 사이클 query,url parameter
SSR를 파헤치기 전까지의 일정
타입스크립트로 넘어온지 2,3주일이 지났다. 아직 모르는 컴파일 설정이 많고 타입을 효율적으로 분리하는 법을 모르지만 strict모드에서 코딩이 가능하게 되었다.
Next.js에서의 SSR이란
Client-Side-Rendering 과 Server-Side-Rendering은 다른 velog나 블로그에 너무나 많이 정리 되어있어서 그거를 참고하면 좋을 것 같다. 나도 그런 것을 보고 공부를 더 확실하게 해야겠다.Next.js에서는 next의 SSR을 이렇게
Next.js 동적 라우팅 SSR
이전에는 Next의 getInitialProps를 활용하여 기본적인 SSR을 해보았다. 이제는 동적라우팅으로 되어있는 페이지들을 SSR하게 만들어 볼 것이다. 그리고 styled-components가 처음에는 csr로 실행이 되어 css가 적용되지 않고 나타났다가 적용