SSR이라는 용어에 대해 대부분의 사람들이 잘못 알고 있는 것

서버 측 렌더링(SSR)이라는 용어는 종종 오해를 불러일으키며, 많은 사람들이 이 용어를 SSR 생성 이전의 관행이나 기술적으로 적합하지 않은 방식을 설명하는 데 사용합니다. PHP 템플릿에서 React의 동형 앱에 이르기까지 SSR의 정의는 진화했고 이에 따라 혼란도 생겼습니다.

이 기사에서는 SSR의 기원, SSR의 진정한 의미, 그리고 현대 웹 개발에서 SSR의 구별을 이해하는 것이 왜 중요한지에 대해 자세히 설명합니다.

그래서 여기에 거래가 있습니다

PHP 시절에는 SSR이 없었습니다. 그 용어는 존재하지 않았습니다. 2010년대에 만들어졌습니다. 그 전에는 아무도 이것을 SSR이라고 부르지 않았습니다.

무엇이라고 불렀나요? Wikipedia에 따르면 이를 서버측 스크립팅(클라이언트측 스크립팅과 반대)이라고 합니다.

재미있는 사실: Wikipedia를 확인해 보면 2021년까지 서버 측 스크립팅 기사에 "SSR"도 추가하지 않았습니다. 차이점은 다음과 같습니다. 그리고 솔직히? 나는 이것이 잘못된 것이라고 생각합니다.

---

SSR 이전에는...

React가 '렌더링'이라는 용어를 도입하기 전까지 우리는 해당 단어를 사용하지 않았습니다. 우리가 가진 가장 가까운 것은 서버측 템플릿이었습니다. 여기 오래된 스냅샷이 있습니다.

아이디어는 간단했습니다. 정적 사이트 생성기 또는 서버 스크립팅을 사용하여 동적 웹페이지를 구축하는 것입니다.

어떤 사람들은 "글쎄요, 서버 템플릿을 사용하면 서버에서 렌더링하는 것입니다."라고 주장하는 사람들도 있습니다.

---

그 문제

React의 렌더링이 항상 HTML이나 DOM 생성을 의미하는 것은 아닙니다. VDOM(가상 DOM)을 생성합니다. renderToString을 호출하면 구성 요소가 실제로 HTML로 렌더링되기 때문에 선이 흐려집니다.

이것이 사람들이 자신의 PHP 앱이 SSR을 수행하고 있다고 주장하기 시작한 이유입니다. 그러나 여기에 문제가 있습니다. 이는 실제 SSR과 일반 동적 스크립팅 간의 구별을 잃습니다.

---

주요 차이점

클라이언트에서도 렌더링할 수 있는 부분에 대해서만 SSR을 수행할 수 있습니다.

예:

const App = () => <div onClick={handleClick}>Hello</div>;

이 앱은 서버에서 한 번, 클라이언트에서 한 번, 총 두 번 실행할 수 있습니다.

그러나:

<div><?php echo "Hello"; ?></div>

클라이언트에서는 실행할 수 없습니다. 여기에는 렌더링이 없습니다. "클라이언트 측" 또는 "서버 측" 구분이 없습니다. 이것은 단지 구식 동적 스크립팅일 뿐입니다.

---

SR 대 SSR

더 이상 그 오래된 용어를 사용하는 사람이 없기 때문에(ASP 제외) 포기하고 그냥 서버 렌더링(SR) 대 서버 측 렌더링( SSR).

한 가지 큰 차이점은 수분 공급입니다.

PHP 세계에는 수분 공급이 없지만 여전히 SSR이 있다고 확신합니다. 그건 말이 안 돼요. 수분 공급이 있어야만 SSR을 가질 수 있습니다.

---

수분 공급: 핵심

React에는 두 가지 주요 메서드가 있습니다.

• renderToStaticMarkup: 수화할 것으로 예상되지 않는 HTML을 생성합니다. 이는 서버 템플릿에 더 가깝습니다.
• renderToString: 클라이언트에서 수화되는 HTML을 생성합니다. SSR 입니다.

Angular Universal에는 2023년까지 SSR이 없었습니다. 그들이 가진 것은 SR이었습니다. 즉, 서버에서 HTML을 생성한 다음 스크립트가 로드되면 이를 삭제하고 앱을 SPA로 빈 꼬리표.

PHP와는 다르지만, 실제 SSR과도 다릅니다.

---

초기

초기에는 React 앱이 헤드리스 Chrome을 사용하여 HTML 문자열로 저장되도록 '사전 렌더링'되었습니다. 해당 스냅샷은 CDN에 들어갔습니다. 기술적으로 이 작업을 수행하는 데 서버가 필요하지도 않았습니다. ?

쓸데없는 노력이었지만 구글은 한때 SEO를 위해 이를 추천하기도 했습니다. 그 글을 한 번 찾아봤는데, 다시 찾을 수 있을지 모르겠네요.

---

왜 이것에 관심을 두는가?

RSC(React Server Components)로 인해 이 주제를 다시 다루게 되었습니다.

기술적으로 RSC는 SSR을 수행하지 않습니다. 이것은 많은 사람들을 놀라게 했습니다.

React 팀에서 설명을 시도했지만 포기했습니다. 요점은 서버 구성 요소가 단지 템플릿일 뿐이라는 것입니다. 즉, 정적 HTML을 생성합니다. 클라이언트 구성 요소는 SSR을 거쳐 HTML과 DOM을 모두 생성합니다.

---

Inertia.js 및 SSR

Inertia.js도 비슷한 구별을 합니다. PHP는 서버에서 실행되지만 JavaScript 앱은 서버에서 실행하여 HTML을 생성한 다음 클라이언트에서 하이드레이팅하여 SSR을 받습니다.

---

그렇다면 PHP가 SSR을 수행할 수 있습니까?

아니요. RSC와 마찬가지로 PHP도 SSR을 수행하는 단계로 동적 스크립팅(SR)을 수행하고 있습니다.

Hono와 같은 미들웨어로 React 앱을 실행하고 HTML에 일부 동적 코드를 삽입한 후 나중에 renderToString을 호출하면 비슷한 느낌이 듭니다. 두 경우 모두 SSR 단계의 SR입니다.

이것이 바로 사람들이 "우리는 90년대에 PHP로 SSR을 했다"고 주장하는 것이 엉뚱한 이유입니다.

---

SSG는 어떻습니까?

이 얘기를 꺼낼 때마다 SSG에 대해 묻는 분들이 계십니다. 상관없어요.

정적 사이트 생성(SSG)이라는 용어는 실제로 React보다 앞선 것입니다. SSG는 렌더링이나 수화가 필요하지 않은 HTML 생성을 의미합니다. HTML을 제작하셨나요? SSG를 하게 된 것을 축하합니다.

---

리액트 혁신

React 프레임워크는 HTML을 다시 생성하지 않고 클라이언트에서 HTML을 채택하기 위해 하이드레이션을 사용하는 동형 앱을 도입했습니다.

그 HTML은 SSR에서 제작해야 했습니다.

---

Qwik 및 "재개성"

Qwik은 수분 공급도 하시나요? 그게 가장 큰 질문이에요.

Qwik 개발자들은 아니라고 말하지만 저는 찬성 쪽으로 기울고 있습니다. Qwik이 마음에 드신다면 SSR의 다른 부분을 잘라내어 재개성이라고 불러야 할 것입니다.

---

읽는 것보다 토론을 듣는 것을 선호한다면 Go의 React Server 구성 요소에 대한 이 팟캐스트 에피소드에서 이러한 주장을 오디오 형식으로 더 많이 들을 수 있습니다

위 내용은 SSR이라는 용어에 대해 대부분의 사람들이 잘못 알고 있는 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!