SSR (서버 사이드 렌더링)

SSR이란?

SSR, or Server-Side-Rendering, 은 애플리케이션이나 콘텐츠가 클라이언트의 최소한의 작업으로 렌더링되는 메커니즘이자 일련의 규약입니다.

SSR을 사용하는 경우, 클라이언트는 JavaScript를 실행하지 않습니다. 대신, 클라이언트는 서버에서 "렌더링된" HTML/CSS를 렌더링합니다.

SSR의 이점

SSR의 주요 이점 중 하나는 JavaScript가 필요 없다는 것입니다. 이 때문에 애플리케이션을 많은 사용 사례에서 더 "가볍게" 느껴지도록 만들 수 있습니다.

또한, 사용자가 JavaScript를 비활성화한 경우에 대비해 SSR을 폴백으로 사용할 수 있습니다. 이러한 방식으로 댓글 스레드는 여전히 렌더링될 수 있으며, 사용자는 여전히 댓글에 답글을 남길 수 있습니다.

FastComments는 이미 최적화되어 있어서 대부분의 경우 SSR이 필요하지 않습니다. 그러나 일부 온라인 커뮤니티에는 JavaScript를 사용하지 않는 사용자가 있거나, 비활성화하는 것이 선호되는 관행인 경우가 있습니다. 이럴 때 FastComments의 SSR이 유용할 수 있습니다.

하지만 SSR의 주요 단점 중 하나는 작은 상태 변경에도 페이지를 다시 로드해야 한다는 것입니다.

FastComments의 SSR 지원 기능

FastComments는 SSR에서 다음 기능을 지원합니다:

맞춤형 댓글 위젯.
익명 댓글 작성.
로그인 상태에서 댓글 작성.
SSO.
최상위 및 중첩 답글.
댓글 스레드 보기 및 페이지 매김.
투표(익명 투표 포함).
기본 정렬 방향 변경.

예제

FastComments SSR의 예제는 여기에서 확인할 수 있습니다.

FastComments SSR

사용 사례

SSR의 예시 사용 사례는 다음과 같습니다:

JavaScript가 비활성화되었을 때의 대체 수단.
JavaScript를 사용할 수 없거나 사용을 원하지 않는 환경에서 댓글 인터페이스를 렌더링하기 위해.
추가적인 JavaScript 포함을 원하지 않는 사이트나 온라인 커뮤니티의 경우.

FastComments의 SSR 사용처

FastComments는 다음과 같은 곳에서 SSR을 사용합니다:

당사의 WordPress 플러그인은 기본적으로 폴백으로 SSR을 사용합니다. JavaScript가 비활성화된 경우에도 사용자가 블로그에 댓글을 남길 수 있습니다.
당사 자체 블로그에서도 폴백으로 사용합니다! https://blog.fastcomments.com

SSR 사용하기

FastComments SSR를 사용하려면 클라이언트가 https://fastcomments.com/ssr/comments 엔드포인트에서 HTML을 가져올 수 있습니다.

이는 여러 가지 방법으로 수행할 수 있습니다.

WordPress에서

SSR은 WordPress 플러그인 버전 3.10.2 이후 자바스크립트가 활성화되지 않은 사용자를 위한 대체(fallback)로 기본적으로 활성화되어 있습니다.

웹페이지에서

이미 존재하는 애플리케이션이 있는 경우, 사용하는 언어가 PHP라고 가정하면 다음 예제로 SSR을 추가할 수 있습니다:

PHP 기반 SSR 예제

Copy

<?php
$tenantId = rawurlencode("my-tenant-id");
$urlId = rawurlencode("my-page-url-article-id");
$url = rawurlencode("my-page-url");
$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
?>
<iframe
    src="<?php echo $fastcomments_url; ?>"
    horizontalscrolling="no"
    allowtransparency="true"
    frameborder="0"
    title="FastComments"
    width="100%"
    height="1500px"
    style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
></iframe>

자바스크립트가 비활성화된 사용자에게만 SSR UI를 표시하도록 할 수도 있습니다:

PHP 기반 SSR 대체 예제

Copy

<?php
$tenantId = rawurlencode("my-tenant-id");
$urlId = rawurlencode("my-page-url-article-id");
$url = rawurlencode("my-page-url");
$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
?>
<noscript>
    <iframe
        src="<?php echo $fastcomments_url; ?>"
        horizontalscrolling="no"
        allowtransparency="true"
        frameborder="0"
        title="FastComments"
        width="100%"
        height="1500px"
        style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
    ></iframe>
</noscript>

SSO를 사용하는 예제는 여기를 참조하세요.

사전 렌더링된 콘텐츠에서

저희 블로그는 빌드 시 생성되며, Handlebars를 이용한 SSR의 좋은 예제를 제공합니다.

기본 매개변수

전달해야 하는 기본 매개변수는 다음과 같습니다:

tenantId - 고객으로서 사용자를 식별합니다.
urlId - 댓글을 로드할 페이지나 게시물을 식별하며, 댓글이 저장되는 위치를 정의합니다.
url - 알림 및 관련 기능에서 댓글 스레드로 다시 링크할 때 사용됩니다.

사용자 지정 스타일

댓글 위젯의 SSR 버전은 자바스크립트 버전과 동일한 구조와 렌더링 엔진을 사용합니다.

따라서 자바스크립트 댓글 위젯에 적용되는 모든 사용자 지정 스타일은 SSR에도 적용됩니다.

참고

SSR의 경우 렌더된 컨테이너의 높이를 제어할 자바스크립트가 없습니다. 브라우저에서는 긴 토론의 경우 세로 스크롤바가 표시될 수 있습니다.

따라서 필요에 따라 이를 조정해야 합니다.

언어 🇰🇷 한국어

배경

SSR 사용