클라이언트 측 렌더링(CSR) 및 서버 측 렌더링(SSR)에 대한 심층 분석
- WBOY앞으로
- 2022-01-24 17:46:162583검색
이 기사는 클라이언트 측 렌더링 CSR 및 서버 측 렌더링 SSR에 대한 지식을 제공합니다.
서문: SEO에 대한 간략한 소개
- SEO(Search Engine Optimization)란 검색엔진의 검색순위 규칙을 일반용어로 요약해서 웹사이트를 합리적으로 최적화한다는 뜻입니다. 귀하의 웹 사이트가 Baidu에서 순위가 매겨지거나 Google과 같은 검색 엔진의 순위가 향상되어 더 많은 사용자가 귀하의 웹 사이트에 액세스할 수 있게 됩니다.
클라이언트 측 렌더링:
-
클라이언트 측 렌더링(클라이언트 측 렌더링), 즉 사용자가 URL 요청을 통해 웹 사이트에 액세스하면 서버가 html 문서를 반환한 다음 브라우저를 허용합니다. 디스플레이 페이지를 구문 분석하고 렌더링하려면 js, css, 이미지 파일 등이 데이터 로딩을 요청하기 위해 서버에 다시 요청을 보내야 합니다.
서버 측 렌더링:
-
클라이언트 측 렌더링에 해당하는 것은 서버 측 렌더링(SSR)입니다. 모든 프런트 엔드 렌더링 표시 페이지는 문자열입니다. html, js, css를 포함한 서버 측 렌더링은 처리된 html 문자열을 클라이언트에 반환하는 것이며, 반환된 html 문자열에는 서버 측 지식이 html 서비스에 표시되어야 합니다. 클라이언트 데이터와 같은 정보는 클라이언트 브라우저가 직접 표시할 수 있도록 이 HTML 문자열에 직접 기록됩니다.
다음은 서버 측 렌더링의 간단한 예입니다.
import Koa from 'koa'
import Router from 'koa-router'
const app = new Koa()
const router = new Router()
router.get('/', async (ctx) => {
ctx.body = `
<title>服务端渲染返回</title>
<h1>Hello World!</h1>
`
})
app.use(router.routes())
app.listen(3000, () => {
console.log("koa server listening on 3000")
})
위 서버에서 반환된 html 문자열은 해당 웹 페이지로 클라이언트에 직접 표시되므로 클라이언트는 서버에 데이터 로드를 끊임없이 요청
서버 렌더링 VS 클라이언트 렌더링
- CSR과 SSR의 가장 큰 차이점은 CSR이 페이지를 렌더링할 때 서버가 클라이언트에 직접 HTML을 반환한다는 점입니다. 렌더링 및 표시를 위해 SSR은 페이지 렌더링을 서버 측 JS 실행에 넘겨줍니다.
- **기존 CSR의 단점 => **
- HTML은 렌더링을 위해 클라이언트에 직접 반환되므로 클라이언트는 실행을 위해 JS 코드를 가져오기 위해 서버에 AJAX를 여러 번 보내야 합니다. 페이지 로딩 속도가 느려집니다.
- 우리 클라이언트가 실행을 위해 서버에서 JS를 가져오고 검색 엔진 크롤러는 html 구조의 내용만 인식할 수 있지만 js 코드는 인식할 수 없기 때문에 SEO에 우호적이지 않습니다.
따라서 SSR의 출현은 전통적인 CSR의 단점을 해결할 수 있습니다. 왜냐하면 이때 클라이언트 요청은 SEO에도 충분히 친숙한 서버에서 렌더링된 HTML을 얻게 되기 때문입니다.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 클라이언트 측 렌더링(CSR) 및 서버 측 렌더링(SSR)에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!