From 14bdab9e9f16719bef29f9c6b02eb9008125e403 Mon Sep 17 00:00:00 2001 From: steward379 Date: Fri, 15 Mar 2024 09:59:33 +0800 Subject: [PATCH] =?UTF-8?q?[chores]=20=E2=9C=8F=EF=B8=8F=20Write=20down=20?= =?UTF-8?q?stuff=20about=20SSR,=20SSG=20in=20my=20project?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 20 ++++++++++++++++++-- src/pages/_app.tsx | 2 +- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 23b27ac..e9e7033 100644 --- 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 index 2971e4c..c4e6bc1 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -54,7 +54,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => { Hidden Gem Spot æ—…ćœ“ - +