acmutd / acmutd/leadership

[Feature] Update project to be statically built at compile time

未關閉
#46 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
enhancement
主要語言
TypeScript
星號
3
分支
2
PR 合併指標
30 天內沒有已合併 PR

描述

**Describe new addition**
The entire project relies on data that does not change very often. Currently, the `getServerSideProps()` on all the pages that display information (the landing pages & the individual profile pages) take a couple of seconds to load which diminishes the user experience. It would be possible to use `getStaticProps()` or other strategies to make the entire project to be prebuilt and lead to much faster load times.

**Task List**
- [ ] Change all `getServerSideProps()` to a [static option](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) instead
- [ ] Use [getStaticPaths()](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths) to build all the profile pages for each officer, participant, team, etc
- [ ] Appropriately choose how to handle situations like `next-auth` session (either keep it in `getServerSideProps()` or use the React Hook option instead). Make any relevant changes to accommodate these refactors.
- [ ] Handle filters using an `useEffect` to maintain existing features

**Additional context**
For those wondering why the initial concept used `getServerSideProps()` it was to accommodate one very specific feature --> sharing URLs for filtered searches. For example when filtering for the list of all officers to find just people who used to be `President` the URL itself gets modified and becomes `https://leadership.acmutd.co/profile?q=President`. This URL can then be shared between different people to directly land on a view that consists of just people who hold that role. Since URL parameters only exist during runtime, it was easy to implement this via `getServerSideProps()`. It is possible to make this static as well but requires some additional code overhead.

**Optional Task List**

- [ ] Convert all filtering actions to be handled at build time statically
- [ ] At build time, create a function that will wipe out the cached copy of all the filters
- [ ] At build time, re-calculate all the cached values for each filter operation
- [ ] At build time, use `getStaticPaths()` to create the views for all filter operations to maintain existing functionality

貢獻指南

這個儲存庫沒有索引到貢獻指南

研究方向

Start by locating all page components that currently use `getServerSideProps()` (landing and profile pages) and identify where each can be migrated to `getStaticProps()`/`getStaticPaths()`. Next inspect where URL query filters and `next-auth` session data are wired to understand how to preserve existing behavior with static rendering. Then decide the client-side pattern (such as `useEffect`-driven filter state) and complete the route and path prebuild changes. Validate by running a production build and checking that filtered/profile URLs still resolve with the expected content.

由索引模型根據 Issue 內容生成。

評估

技術堆疊
next.js, typescript
領域
build-system, frontend, performance
Issue 類型
功能
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。