add rendering paradigm

thinc-org · Jan 11, 2024 · d1ce50b · d1ce50b
1 parent ec982cc
commit d1ce50b
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 8 deletions.
diff --git a/docs/slidev/pages/rendering-paradigm/csr.md b/docs/slidev/pages/rendering-paradigm/csr.md
@@ -2,3 +2,26 @@
 ---
 
 # Client-side rendering
+
+![](/assets/csr.png){width=70%}
+
+```html {all|9,11}
+<!-- index.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="body"></div>
+  </body>
+  <script src="index.js"></script>
+</html>
+```
+
+```js
+// index.js
+React.render(<App />, document.getElementById('body'))s
+```
diff --git a/docs/slidev/pages/rendering-paradigm/curl-csr.md b/docs/slidev/pages/rendering-paradigm/curl-csr.md
@@ -0,0 +1,9 @@
+---
+---
+
+![](/assets/curl-csr.png){style="margin: auto;"}
+
+## Not good for SEO
+
+- Crawler don't wait for JS to load and don't execute JS
+- Crawler will know only content in '<meta\>'
diff --git a/docs/slidev/pages/rendering-paradigm/isr.md b/docs/slidev/pages/rendering-paradigm/isr.md
@@ -3,3 +3,4 @@
 
 # Incremental Static Regeneration (ISR)
 
+![](/assets/isr.png)
diff --git a/docs/slidev/pages/rendering-paradigm/outro.md b/docs/slidev/pages/rendering-paradigm/outro.md
@@ -0,0 +1,12 @@
+---
+---
+
+# Comparasion
+
+![](/assets/csr.png){width=55%}
+
+![](/assets/ssr.png){width=55%}
+
+![](/assets/ssg.png){width=55%}
+
+![](/assets/isr.png){width=55%}
diff --git a/docs/slidev/pages/rendering-paradigm/rsc.md b/docs/slidev/pages/rendering-paradigm/rsc.md
diff --git a/docs/slidev/pages/rendering-paradigm/ssg.md b/docs/slidev/pages/rendering-paradigm/ssg.md
@@ -1,4 +1,6 @@
 ---
 ---
 
-# Static Site Generation (SSG)
+# Static Site Generation (SSG)
+
+![](/assets/ssg.png)
diff --git a/docs/slidev/pages/rendering-paradigm/ssr.md b/docs/slidev/pages/rendering-paradigm/ssr.md
@@ -1,4 +1,6 @@
 ---
 ---
+
+# Server-side redering (SSR)
 
-# Server-side redering
+![](/assets/ssr.png)
diff --git a/docs/slidev/public/assets/csr.png b/docs/slidev/public/assets/csr.png
diff --git a/docs/slidev/public/assets/curl-csr.png b/docs/slidev/public/assets/curl-csr.png
diff --git a/docs/slidev/public/assets/isr.png b/docs/slidev/public/assets/isr.png
diff --git a/docs/slidev/public/assets/ssg.png b/docs/slidev/public/assets/ssg.png
diff --git a/docs/slidev/public/assets/ssr.png b/docs/slidev/public/assets/ssr.png
diff --git a/docs/slidev/slides.md b/docs/slidev/slides.md
@@ -201,6 +201,10 @@ src: ./pages/rendering-paradigm/ssr.md
 src: ./pages/rendering-paradigm/csr.md
 ---
 
+---
+src: ./pages/rendering-paradigm/curl-csr.md
+---
+
 ---
 src: ./pages/rendering-paradigm/ssg.md
 ---
@@ -210,7 +214,7 @@ src: ./pages/rendering-paradigm/isr.md
 ---
 
 ---
-src: ./pages/rendering-paradigm/rsc.md
+src: ./pages/rendering-paradigm/outro.md
 ---
 
 ---