[feat]: Server-Side Rendering implementation #924
Conversation
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
…meddelande som sammanfattar ändringarna: ``` feat: lägg till server-side rendering (SSR) med Vite ``` Några viktiga saker att tänka på: 1. Se till att du har installerat alla nödvändiga dependencies: ```bash npm install express react-dom/server react-router-dom/server npm install -D @types/express ``` 2. Uppdatera `.gitignore` för att exkludera SSR-relaterade build-mappar: ``` dist/ dist-ssr/ ``` 3. Kontrollera att dina befintliga komponenter och routes fungerar med både client-side och server-side rendering. 4. Testa SSR genom att köra: ```bash npm run dev ``` Några potentiella utmaningar du kan stöta på: - Hantering av asynkrona data-fetching - Routing med StaticRouter - Hydration av komponenter Vill du att jag ska hjälpa dig att felsöka eller optimera SSR-implementationen ytterligare? Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
…ring Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
refactor: justera manuella chunks för att stödja SSR-bygge Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
feat: förbättra metadata och SEO för webbplatsen Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <[email protected]>
kaylawoodbury
added
enhancement
There was a problem hiding this comment.
Pull Request Overview
This PR implements Server-Side Rendering (SSR) for the Klimatkollen frontend to improve initial page load performance and SEO. The implementation includes a complete migration from client-only rendering to SSR with Express.js, hydration support, and proper error handling.
Key changes:
- Added SSR infrastructure with Express.js server and dual entry points (client/server)
- Converted to lazy loading for all pages except LandingPage to optimize bundle size
- Fixed hydration mismatches by adding proper client-side checks for browser-only APIs
- Updated routing to explicit language-prefixed paths instead of dynamic routing
Reviewed Changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Added SSR configuration, external dependencies, and build optimizations |
| src/routes.tsx | Converted to lazy loading and explicit language-prefixed routes |
| src/entry-server.tsx | New SSR entry point for server-side rendering |
| src/entry-client.tsx | New client entry point with hydration support |
| src/main.tsx | Converted to compatibility stub |
| server.js | Express.js SSR server with error handling and fallback |
| package.json | Updated build scripts and added Express dependency |
| Dockerfile | Migrated from nginx to Node.js production setup |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
…nd SEO content (excluding translations)
|
I removed the previous PageSEO and replaced with the newPageSEO previously created for this PR. Updated all previous uses and started expanding SEO content (not all translations are set up with the current commit) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
✨ What's Changed?
This PR implements Server-Side Rendering (SSR) for the Klimatkollen frontend,
significantly improving initial page load performance and SEO. The changes include:
• SSR Implementation: Added complete server-side rendering with Express.js server
• Hydration Fixes: Resolved hydration mismatches between server and client rendering
• Route Updates: Updated wildcard route syntax to use named parameters (*catchAll)
• Performance Optimizations: Added proper CSS loading and font-display optimizations
• Error Handling: Improved SSR error handling with graceful fallback to client-side
rendering
Key technical improvements:
• Eliminated white flash during page loads by ensuring CSS is available during SSR
• Fixed localStorage access issues during server-side rendering
• Added proper Helmet integration for dynamic meta tags and titles
• Implemented language redirection for non-prefixed insight routes
📸 Screenshots (if applicable)
📋 Checklist
• [x] PR title starts with [feat]: Server-Side Rendering implementation
• [x] I've verified the change runs locally
• [x] I've set the labels, issue, and milestone for the PR
• [x] I've created sub-tasks or follow-up issues as needed
🛠 Related Issue
None yet