-
Notifications
You must be signed in to change notification settings - Fork 0
Feat: landing page ssr + seo optimization #6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
79c6461
adjusted i18n settings to path based + moved files
Alessandro100 74e4036
cleanup
Alessandro100 84c3fae
seo changes for landing and about
Alessandro100 c6943be
styling adjustments
Alessandro100 33356ab
allows content to display without waiting for redux
Alessandro100 bfd13cf
SSR theme safe settings
Alessandro100 345e700
SSR: Header safety
Alessandro100 b7416cf
lint fix
Alessandro100 8218a5d
routing updated to nextjs
Alessandro100 7b3cbe9
typing change
Alessandro100 adc51ef
cleanup
Alessandro100 2ab721c
linting
Alessandro100 b52bcc3
adjusted Cypress tests
Alessandro100 5e7ce5c
enable router coordination between nextjs and legacy
Alessandro100 b597da1
redux store separation from root layout
Alessandro100 2f0b887
header state independent
Alessandro100 9f2cb7a
lint
Alessandro100 070fbd0
ssg initial flow documentation
Alessandro100 c20de07
github adjust mermaid doc
Alessandro100 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| ```mermaid | ||
| sequenceDiagram | ||
| autonumber | ||
| actor U as User | ||
| participant B as Browser | ||
| participant CDN as CDN/Edge Cache | ||
| participant Next as Next.js Build (CI) | ||
| participant I18N as next-intl (generateStaticParams) | ||
| participant RC as Firebase Remote Config (build-time) | ||
| participant JS as Client JS (Header component) | ||
|
|
||
| rect rgb(235, 245, 255) | ||
| note over Next,RC: BUILD TIME (SSG) | ||
| Next->>I18N: generateStaticParams() → all locales | ||
| I18N-->>Next: locale list | ||
| Next->>I18N: Build locale message bundles (baked) | ||
| Next->>RC: Fetch Remote Config snapshot (baked) | ||
| RC-->>Next: Remote Config values | ||
| Next->>Next: Render pages to static HTML | ||
| Next->>Next: Extract critical MUI styles (Emotion) | ||
| note over Next: <style data-emotion="mui-*"> inlined in HTML | ||
| Next->>Next: Emit JS/CSS assets (Header client bundle) | ||
| Next->>CDN: Deploy static HTML + assets | ||
| end | ||
|
|
||
| rect rgb(245, 245, 245) | ||
| note over U,CDN: RUNTIME (User request) | ||
| U->>B: Navigate to /{locale}/page | ||
| B->>CDN: GET /{locale}/page | ||
| CDN-->>B: 200 Static HTML (SSG + inline MUI styles) | ||
|
|
||
| note over B: ✅ Styled content is painted\n(LCP occurs here) | ||
|
|
||
| B->>CDN: GET external CSS (non-critical) | ||
| CDN-->>B: CSS files | ||
| B->>CDN: GET JS bundle(s) | ||
| CDN-->>B: JS | ||
|
|
||
| note over B: React hydration begins | ||
| B->>JS: Hydrate client components | ||
| note over JS: ✅ Header hydration completes\n(interactivity enabled) | ||
| end | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,20 +2,44 @@ | |
|
|
||
| import './App.css'; | ||
| import AppRouter from './router/Router'; | ||
| import { BrowserRouter } from 'react-router-dom'; | ||
| import { MemoryRouter } from 'react-router-dom'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { anonymousLogin } from './store/profile-reducer'; | ||
| import { app } from '../firebase'; | ||
| import { Suspense, useEffect, useState } from 'react'; | ||
| import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; | ||
| import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; | ||
| import AppContainer from './AppContainer'; | ||
| import { Helmet, HelmetProvider } from 'react-helmet-async'; | ||
| import { usePathname, useSearchParams } from 'next/navigation'; | ||
|
|
||
| function App(): React.ReactElement { | ||
| interface AppProps { | ||
| locale?: string; | ||
| } | ||
|
|
||
| // Helper function to construct the full path from Next.js routing | ||
| function buildPathFromNextRouter( | ||
| pathname: string, | ||
| searchParams: URLSearchParams, | ||
| locale?: string, | ||
| ): string { | ||
| const cleanPath = | ||
| locale != null && locale !== 'en' | ||
| ? (pathname.replace(`/${locale}`, '') ?? '/') | ||
| : pathname; | ||
|
|
||
| const searchString = searchParams.toString(); | ||
| return searchString !== '' ? `${cleanPath}?${searchString}` : cleanPath; | ||
| } | ||
|
|
||
| function App({ locale }: AppProps): React.ReactElement { | ||
| const dispatch = useDispatch(); | ||
| const [isAppReady, setIsAppReady] = useState(false); | ||
|
|
||
| const pathname = usePathname(); | ||
| const searchParams = useSearchParams(); | ||
|
|
||
| const initialPath = buildPathFromNextRouter(pathname, searchParams, locale); | ||
|
Comment on lines
+38
to
+41
|
||
|
|
||
| useEffect(() => { | ||
| app.auth().onAuthStateChanged((user) => { | ||
| if (user != null) { | ||
|
|
@@ -29,24 +53,15 @@ function App(): React.ReactElement { | |
| }, [dispatch]); | ||
|
|
||
| return ( | ||
| <HelmetProvider> | ||
| <Helmet> | ||
| <meta | ||
| name='description' | ||
| content={ | ||
| "Access GTFS, GTFS Realtime, GBFS transit data with over 4,000 feeds from 70+ countries on the web's leading transit data platform." | ||
| } | ||
| /> | ||
| </Helmet> | ||
| <Suspense> | ||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | ||
| {/* BrowserRouter will be deprecated in favor of Next AppRouter */} | ||
| <BrowserRouter> | ||
| <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer> | ||
| </BrowserRouter> | ||
| </LocalizationProvider> | ||
| </Suspense> | ||
| </HelmetProvider> | ||
| <Suspense> | ||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | ||
| {/* MemoryRouter will be deprecated in favor of Next AppRouter */} | ||
| {/* MemoryRouter synced with Next.js routing via RouterSync component */} | ||
| <MemoryRouter initialEntries={[initialPath]}> | ||
| <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer> | ||
| </MemoryRouter> | ||
| </LocalizationProvider> | ||
| </Suspense> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| 'use client'; | ||
|
|
||
| // This page is temporary to ease the migration to Next.js App Router | ||
| // It will be deprecated once the migration is fully complete | ||
| import { type ReactNode, use, useEffect } from 'react'; | ||
| import dynamic from 'next/dynamic'; | ||
| import { PersistGate } from 'redux-persist/integration/react'; | ||
| import { persistStore } from 'redux-persist'; | ||
| import { store } from '../../store/store'; | ||
| import { useAppDispatch } from '../../hooks'; | ||
| import { resetProfileErrors } from '../../store/profile-reducer'; | ||
|
|
||
| const App = dynamic(async () => await import('../../App'), { ssr: false }); | ||
|
|
||
| const persistor = persistStore(store); | ||
|
|
||
| interface PageProps { | ||
| params: Promise<{ | ||
| locale: string; | ||
| slug: string[]; | ||
| }>; | ||
| } | ||
|
|
||
| export default function Page({ params }: PageProps): ReactNode { | ||
| const { locale } = use(params); | ||
| const pathKey = use(params).slug?.join('/') ?? '/'; | ||
|
Comment on lines
+24
to
+26
|
||
| const dispatch = useAppDispatch(); | ||
|
|
||
| useEffect(() => { | ||
| // Clean errors from previous session | ||
| dispatch(resetProfileErrors()); | ||
| }, [dispatch]); | ||
|
|
||
| // Pass locale to App so BrowserRouter can use correct basename | ||
| return ( | ||
| <PersistGate loading={null} persistor={persistor}> | ||
| <App locale={locale} key={pathKey} />; | ||
| </PersistGate> | ||
| ); | ||
| } | ||
|
Comment on lines
+35
to
+40
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useSearchParams()fromnext/navigationreturnsReadonlyURLSearchParams, notURLSearchParams, so this call is likely a TypeScript error. Also,pathname.replace(\/${locale}`, '')will replace the first occurrence anywhere in the string rather than only stripping a leading locale segment; using a prefix check (e.g.,pathname.startsWith(...)`) avoids accidental replacements.