[chores] ✏️ Write down stuff about SSR, SSG in my project

steward379 · Mar 15, 2024 · 14bdab9 · 14bdab9 · vercel · Mar 15, 2024
1 parent da55ac2
commit 14bdab9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ Firestore
 
 * Index
 
-## Map 
+## Map
 
 `/map component `provides you a leafet map allow you to create, edit, delete places related to the marker.
 it also provides numberous plug-ins such as mini-map, search console and routing machine.
@@ -74,7 +74,7 @@ By using redux toolkit/zustand, I can easily manage the states of data.
 
 Since Clerk provide us with an intergration kit that saves any user data to the firebase firestore, there are muiltiple ways of logins and signups in my projects. Whether it's by Email or google provided by Firebase Auth, or it's clerk, useContext provides a solution to overall login states management.
 
-## i18N 
+## i18N
 
 I use i18N for users to browse my projects in either English or Mandarin (Taiwan). The module is **i18n-Next.**
 
@@ -90,6 +90,22 @@ I use i18N for users to browse my projects in either English or Mandarin (Taiwan
 
 ![1705785907150](image/README/1705785907150.png)
 
+### Server Components
+
+Since I used `Page Router` for me to support some old versions `Next.js` projects, and make me easier to create new pages, It's unevitable all pages are
+
+`React Client Components` by default, that causes poor efficiency and SEO. In order to solve these issues, I have made the following efforts:
+
+🌟 Change Landing Page to `SSG`, which is `Static Site Generation` to optimize SEO.
+
+🌟 Change `Explore` Page to `SSR`, which is `Server Side Rendering` to optimize SEO. Also, the page is to retrieve map data from FireStore (NoSQL DB), server side rendering might be suitable in such situations.
+
+🌟 Change `Member` Page to `SSR`. We don't need to update 'Member Data, followers and following to often, which will cause burdens to the servers.
+
+🌟 While we need to add the line `'use Clenet'` in `App Router`, `Page Router` is easier to build highly interative pages in my applications using a variety of hooks.
+
+⚠️ **Further Optimization:** For better efficientcy, RSC (React Server Components) might be a way to squeeze JS bundle size, lags caused by request Waterfall. It later become a serious issue in my app when the project turns bigger. By monitoring `LightHouse`, I realize it's  better to use `RSC` to improve its efficiency. 
+
 ### See the slides for a complete pitch here:
 
 [Slide Here](https://www.slideshare.net/slideshows/hiddengem-attraction-recording-platform-slide/266594257)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -54,7 +54,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             <GlobeProvider>
               <Head>
                   <title>Hidden Gem Spot 旅圓</title>
-                  <meta name="description" content="Hidden Gem 旅圓，讓你記錄每一趟生活冒險。" />
+                  <meta name="description" content="Hidden Gem is a platform leads you to create and find attractions 旅圓，讓你記錄每一趟生活冒險。" />
                   <meta property="og:title" content="Hidden Gem 旅圓" />
                   <meta property="og:description" content="Travel, Note & Discover the hidden gems around you."/>
                   <meta property="og:url" content="https://hidden-gem.xyz/" />