Skip to content

Instantly share code, notes, and snippets.

@andreypopp

andreypopp/ssr.html

Created August 7, 2023 10:14
Show Gist options
  • Save andreypopp/9a05c35f5d52d78a887f7546b9618aa1 to your computer and use it in GitHub Desktop.
Save andreypopp/9a05c35f5d52d78a887f7546b9618aa1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ssr.html
<!doctype html>
<meta charset="utf-8"/>
<link href="/static/tachyons.css" rel="stylesheet"/>
<script>
{
let enc = new TextEncoder();
let SSR = (window.SSR = {});
SSR.push = (data) => SSR._c.enqueue(enc.encode(data));
SSR.close = () => SSR._c.close();
SSR.stream = new ReadableStream({
start(c) {
SSR._c = c;
}
});
}
</script>
<script>
{
window.SSR.push("4:I{\"id\":\"App\",\"name\":\"\",\"chunks\":[],\"async\":false}\n")
}
</script>
<html>
<head>
<title>React with native React Server Components</title>
</head>
<!-- -->
<body class="pa4 sans-serif h-100">
<h1>React with native React Server Components</h1>
<!-- -->
<div>
<div class="flex flex-column g2">
<div>
<h2>
Hello from Client Component<!-- -->
!
</h2>
<!-- -->
<div class="some">
sidebar<!-- -->
WORLD!!<!-- -->
<div></div>
</div>
<!-- -->
<div class="footer">
As you can see, this one is SSR&apos;ed as well.<!-- -->
As you can see, this one is SSR&apos;ed as well.
</div>
<!-- -->
<ul>
<!--$?-->
<template id="B:1"></template>
<!--/$-->
</ul>
</div>
<!-- -->
<div class="ba pa2">
<h3 class="ma0 pa0 pb2">Initial Data</h3>
<!-- -->
<div class="pb2">This components loads some async data but will block the shell until this data is ready.</div>
<!-- -->
<div class="f7 bt pa1">I&apos;ve been sleeping for 0.0sec before appearing.</div>
</div>
<!-- -->
<!--$?-->
<template id="B:5"></template>
<!--/$-->
<!-- -->
<!--$?-->
<template id="B:7"></template>
<!--/$-->
<!-- -->
<div>
<h2>Testing XSS</h2>
<!-- -->
<ul>
<li>&lt;/script&gt;&lt;script&gt;console.log(1)&lt;/script&gt;</li>
<!-- -->
<li>
&lt;script&gt;console.log(1)&lt;/script&gt;</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script src="/runtime.js" async></script>
<script>
{
window.SSR.push("0:[\"$\",\"html\",null,{\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"title\",null,{\"children\":[\"React with native React Server Components\"]}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"h1\",null,{\"children\":[\"React with native React Server Components\"]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"$4\",null,{\"children\":\"As you can see, this one is SSR'ed as well.\",\"title\":\"Hello from Client Component\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"children\":[\"Initial Data\"],\"className\":\"ma0 pa0 pb2\"}],[\"$\",\"div\",null,{\"children\":[\"This components loads some async data but will block the shell until this data is ready.\"],\"className\":\"pb2\"}],[\"$\",\"div\",null,{\"children\":[\"I've been sleeping for 0.0sec before appearing.\"],\"className\":\"f7 bt pa1\"}]],\"className\":\"ba pa2\"}],[\"$\",\"$Sreact.suspense\",null,{\"children\":\"$L5\"}],[\"$\",\"$Sreact.suspense\",null,{\"children\":\"$L7\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"children\":[\"Testing XSS\"]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"\\u003c/script\\u003e\\u003cscript\\u003econsole.log(1)\\u003c/script\\u003e\"]}],[\"$\",\"li\",null,{\"children\":[\"\\u2028\\u003cscript\\u003econsole.log(1)\\u003c/script\\u003e\"]}]]}]]}]],\"className\":\"flex flex-column g2\"}]]}]],\"className\":\"pa4 sans-serif h-100\"}]]}]\n")
}
</script>
<script>
$RC = function(b, c, e) {
c = document.getElementById(c);
c.parentNode.removeChild(c);
var a = document.getElementById(b);
if (a) {
b = a.previousSibling;
if (e)
b.data = "$!",
a.setAttribute("data-dgst", e);
else {
e = b.parentNode;
a = b.nextSibling;
var f = 0;
do {
if (a && 8 === a.nodeType) {
var d = a.data;
if ("/$" === d)
if (0 === f)
break;
else
f--;
else
"$" !== d && "$?" !== d && "$!" !== d || f++
}
d = a.nextSibling;
e.removeChild(a);
a = d
} while (a);
for (; c.firstChild;)
e.insertBefore(c.firstChild, a);
b.data = "$"
}
b._reactRetry && b._reactRetry()
}
};
</script>
<div hidden id="S:5">
<div class="ba pa2">
<h3 class="ma0 pa0 pb2">Async Data</h3>
<!-- -->
<div class="pb2">HELLO</div>
<!-- -->
<div class="f7 bt pa1">I&apos;ve been sleeping for 1.0sec before appearing.</div>
</div>
<!-- -->
<div class="ba pa2">
<h3 class="ma0 pa0 pb2">Async Data</h3>
<!-- -->
<div class="pb2">HELLO</div>
<!-- -->
<div class="f7 bt pa1">I&apos;ve been sleeping for 1.0sec before appearing.</div>
</div>
</div>
<script>
$RC("B:5", "S:5")
</script>
<script>
{
window.SSR.push("5:[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"children\":[\"Async Data\"],\"className\":\"ma0 pa0 pb2\"}],[\"$\",\"div\",null,{\"children\":[\"HELLO\"],\"className\":\"pb2\"}],[\"$\",\"div\",null,{\"children\":[\"I've been sleeping for 1.0sec before appearing.\"],\"className\":\"f7 bt pa1\"}]],\"className\":\"ba pa2\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"children\":[\"Async Data\"],\"className\":\"ma0 pa0 pb2\"}],[\"$\",\"div\",null,{\"children\":[\"HELLO\"],\"className\":\"pb2\"}],[\"$\",\"div\",null,{\"children\":[\"I've been sleeping for 1.0sec before appearing.\"],\"className\":\"f7 bt pa1\"}]],\"className\":\"ba pa2\"}]]\n")
}
</script>
<div hidden id="S:1">
<!--$?-->
<template id="B:2"></template>
<!--/$-->
<!-- -->
<!--$?-->
<template id="B:3"></template>
<!--/$-->
<!-- -->
<li>SLEPT</li>
<!-- -->
<li>SLEPT</li>
</div>
<script>
$RC("B:1", "S:1")
</script>
<div hidden id="S:2">
<li>INNER SLEPT</li>
</div>
<script>
$RC("B:2", "S:2")
</script>
<div hidden id="S:3">
<li>INNER SLEPT</li>
</div>
<script>
$RC("B:3", "S:3")
</script>
<div hidden id="S:7">
<div class="ba pa2">
<h3 class="ma0 pa0 pb2">Async Data</h3>
<!-- -->
<div class="pb2">OUTER</div>
<!-- -->
<div class="f7 bt pa1">I&apos;ve been sleeping for 2.0sec before appearing.</div>
</div>
<!-- -->
<!--$?-->
<template id="B:6"></template>
<!--/$-->
</div>
<script>
$RC("B:7", "S:7")
</script>
<script>
{
window.SSR.push("7:[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"children\":[\"Async Data\"],\"className\":\"ma0 pa0 pb2\"}],[\"$\",\"div\",null,{\"children\":[\"OUTER\"],\"className\":\"pb2\"}],[\"$\",\"div\",null,{\"children\":[\"I've been sleeping for 2.0sec before appearing.\"],\"className\":\"f7 bt pa1\"}]],\"className\":\"ba pa2\"}],[\"$\",\"$Sreact.suspense\",null,{\"children\":\"$L6\"}]]\n")
}
</script>
<div hidden id="S:6">
<div class="ba pa2">
<h3 class="ma0 pa0 pb2">Inner Async Data</h3>
<!-- -->
<div class="pb2">INNER</div>
<!-- -->
<div class="f7 bt pa1">I&apos;ve been sleeping for 1.0sec before appearing.</div>
</div>
</div>
<script>
$RC("B:6", "S:6")
</script>
<script>
{
window.SSR.push("6:[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"children\":[\"Inner Async Data\"],\"className\":\"ma0 pa0 pb2\"}],[\"$\",\"div\",null,{\"children\":[\"INNER\"],\"className\":\"pb2\"}],[\"$\",\"div\",null,{\"children\":[\"I've been sleeping for 1.0sec before appearing.\"],\"className\":\"f7 bt pa1\"}]],\"className\":\"ba pa2\"}]]\n")
}
</script>
<script>
{
window.SSR.close()
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment