FastComments.com

Menu Icon

Idioma 🇧🇷 Português (Brasil)
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Contexto

O que é SSR?
Benefícios do SSR
Recursos suportados pelo SSR do FastComments

Usando SSR

Casos de uso
Onde o FastComments usa SSR
Usando SSR

O que é SSR? Internal Link

SSR, ou Renderização no Lado do Servidor, é um mecanismo e conjunto de convenções onde uma aplicação ou conteúdo é renderizado com trabalho mínimo por parte do cliente.

Com SSR, o cliente não executa JavaScript. Em vez disso, o cliente renderiza HTML/CSS que foi "renderizado" pelo servidor.

Benefícios do SSR Internal Link

Uma grande vantagem do SSR é que o JavaScript não é necessário. Por causa disso, aplicações podem ser construídas para parecerem "mais leves" em muitos casos de uso.

Além disso, o SSR pode ser usado como fallback caso o usuário tenha o JavaScript desabilitado. Dessa forma, as threads de comentários ainda podem ser renderizadas, e o usuário pode ainda responder aos comentários.

FastComments já está bem otimizado, então na maioria dos casos o SSR não é necessário. No entanto, algumas comunidades online têm usuários que não usam JavaScript, ou desativá-lo é a prática preferida. É aí que o SSR do FastComments pode ser útil.

No entanto, uma grande desvantagem do SSR é ter que recarregar a página para pequenas mudanças de estado.

Recursos suportados pelo SSR do FastComments Internal Link

FastComments suporta os seguintes recursos com SSR:

  • Widget de comentários personalizável.
  • Comentários anônimos.
  • Comentários enquanto conectado.
  • SSO.
  • Respostas raiz e aninhadas.
  • Visualização e paginação de threads de comentários.
  • Votação, incluindo votação anônima.
  • Alterar a direção de ordenação padrão.

Um Exemplo

Um exemplo do FastComments SSR está disponível aqui.

FastComments SSR
External Link

Casos de uso Internal Link

Exemplos de casos de uso do SSR são os seguintes:

  • Um recurso de fallback para quando o JavaScript estiver desativado.
  • Para renderizar uma interface de comentários em um ambiente onde o JavaScript não está disponível ou não é desejado.
  • Para sites ou comunidades online onde a inclusão de mais JavaScript não é desejada.

Onde o FastComments usa SSR Internal Link

FastComments usa SSR nos seguintes lugares:

  • Nosso plugin do WordPress usa SSR como fallback por padrão. Se o JavaScript estiver desativado, os usuários ainda podem comentar no seu blog.
  • Nós o usamos como fallback no nosso próprio blog! https://blog.fastcomments.com

Usando SSR Internal Link

Para usar o FastComments SSR, o cliente pode buscar HTML do endpoint https://fastcomments.com/ssr/comments.

Isso pode ser feito de várias maneiras.

Com WordPress

O SSR é ativado por padrão para usuários sem JS habilitado como um fallback no plugin do WordPress desde a versão 3.10.2.

Em uma página da Web

Em uma aplicação já existente, o SSR pode ser adicionado com o exemplo a seguir, assumindo que a linguagem usada seja PHP:

Exemplo de SSR baseado em PHP
Copy Copy
1
2<?php
3$tenantId = rawurlencode("my-tenant-id");
4$urlId = rawurlencode("my-page-url-article-id");
5$url = rawurlencode("my-page-url");
6
7$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
8?>
9<iframe
10 src="<?php echo $fastcomments_url; ?>"
11 horizontalscrolling="no"
12 allowtransparency="true"
13 frameborder="0"
14 title="FastComments"
15 width="100%"
16 height="1500px"
17 style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
18></iframe>
19

Também podemos mostrar a UI do SSR somente quando o usuário tiver o JS desabilitado:

Exemplo de fallback de SSR baseado em PHP
Copy Copy
1
2<?php
3$tenantId = rawurlencode("my-tenant-id");
4$urlId = rawurlencode("my-page-url-article-id");
5$url = rawurlencode("my-page-url");
6
7$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
8?>
9<noscript>
10 <iframe
11 src="<?php echo $fastcomments_url; ?>"
12 horizontalscrolling="no"
13 allowtransparency="true"
14 frameborder="0"
15 title="FastComments"
16 width="100%"
17 height="1500px"
18 style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
19 ></iframe>
20</noscript>
21

Para um exemplo usando SSO, veja aqui.

Com Conteúdo Pré-renderizado

Nosso blog é gerado em tempo de build e fornece um bom exemplo de SSR com Handlebars.

Os Parâmetros Básicos

Os parâmetros básicos que você precisa passar são:

  • tenantId - Isso identifica você como cliente.
  • urlId - Isso identifica a página ou artigo para carregar comentários e define onde eles são salvos.
  • url - Isso é usado para notificações e recursos relacionados que vinculam de volta ao tópico de comentários.

Estilização Personalizada

A versão SSR do widget de comentários usa a mesma estrutura e motor de renderização que a versão em JavaScript.

Assim, toda estilização personalizada que funciona para o widget de comentários em JavaScript funciona para o SSR.

Observações

Com SSR, não há JavaScript para controlar a altura do contêiner renderizado. Nos navegadores, uma barra de rolagem vertical pode aparecer para discussões longas.

Portanto, você deve ajustar isso conforme desejado.

Contribuir para este guia