[Feature] Update project to be statically built at compile time
- 主要語言
- 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