From 189774def8ff2273131ba9b7c3b8da14fece6aeb Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Tue, 4 Jun 2024 18:49:43 -0700
Subject: [PATCH] Blog

---
 src/web/src/app/blog/_mdx-content/blog1.mdx   |  7 --
 .../app/blog/_mdx-content/ssg-renderring.mdx  | 74 +++++++++++++++++++
 2 files changed, 74 insertions(+), 7 deletions(-)
 delete mode 100644 src/web/src/app/blog/_mdx-content/blog1.mdx
 create mode 100644 src/web/src/app/blog/_mdx-content/ssg-renderring.mdx

diff --git a/src/web/src/app/blog/_mdx-content/blog1.mdx b/src/web/src/app/blog/_mdx-content/blog1.mdx
deleted file mode 100644
index 17a6a25..0000000
--- a/src/web/src/app/blog/_mdx-content/blog1.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: "Blog1"
-author: "Apestein"
-publishDate: "1/29/2024"
----
-
-# Blog1
diff --git a/src/web/src/app/blog/_mdx-content/ssg-renderring.mdx b/src/web/src/app/blog/_mdx-content/ssg-renderring.mdx
new file mode 100644
index 0000000..8276fcb
--- /dev/null
+++ b/src/web/src/app/blog/_mdx-content/ssg-renderring.mdx
@@ -0,0 +1,74 @@
+---
+title: 'When to Use Static Generation v.s. Server-side Rendering'
+author: "Timothy Pidashev"
+date: '2020-01-02'
+---
+
+We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
+
+You can use Static Generation for many types of pages, including:
+
+- Marketing pages
+- Blog posts
+- E-commerce product listings
+- Help and documentation
+
+```jsx
+import React, { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  const decrement = () => {
+    setCount(count - 1);
+  };
+
+  return (
+    <div>
+      <h1>Count: {count}</h1>
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+    </div>
+  );
+}
+
+export default Counter;
+```
+You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
+
+On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
+
+In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
+
+```jsx
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  const decrement = () => {
+    setCount(count - 1);
+  };
+
+  return (
+    <div>
+      <h1>Count: {count}</h1>
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+    </div>
+  );
+}
+
+export default Counter;
+```
+You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
+
+On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
+
+In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
+