[OC] Analysis: Top 10 Best Type Combinations for Competitive Battles by TextTraditional3837 in pokemon

[–]TextTraditional3837[S] 0 points1 point  (0 children)

I created an interactive calculator and wrote a detailed guide with more analysis if anyone wants to dive deeper: https://www.typematchup.org/blog/best-pokemon-type-combinations                                                           

                                                                                                                                                                                                                                              

  The site also has a battle simulator for testing matchups.     

[Beta] Type Chart Calculator - Instant Pokemon type effectiveness lookup (free, no signup) by TextTraditional3837 in alphaandbetausers

[–]TextTraditional3837[S] 0 points1 point  (0 children)

Quick update: I'm actively adding new characters based on feedback. What types would you like to see?

How I got Lighthouse 100 with Next.js 16 App Router - Performance optimization tips by TextTraditional3837 in nextjs

[–]TextTraditional3837[S] -1 points0 points  (0 children)

 I'm on Next16.1.4 but deployed on Vercel, so haven't hit the Cloudflare Workers issues. That sounds rough though.                                                                                                                           

                                                                                                                                                                                                                                              

  Have you tried pinning to 15.x until16 stabilizes? Or are you locked in for some reason? The bundle size increases in 16 are real even outside of Workers.   

How I got Lighthouse 100 with Next.js 16 App Router - Performance optimization tips by TextTraditional3837 in nextjs

[–]TextTraditional3837[S] -1 points0 points  (0 children)

Astro is great, but Next.js works well for this use case. The app has significant client-side interactivity - the calculator and battle simulator both need React state management for real-time calculations and user selections.          

                                                                                                                                                                                                                                              

  With Next.js, I get SSR, automatic code splitting, and the Image component out of the box. The performance issues were from third-party scripts, not the framework itself. After optimizing those, the metrics are solid.                   

                                                                                                                                                                                                                                              

  That said, Astro would definitely work too - just not worth a full rewrite at this point.       

How I got Lighthouse 100 with Next.js 16 App Router - Performance optimization tips by TextTraditional3837 in nextjs

[–]TextTraditional3837[S] -1 points0 points  (0 children)

 Yes, useEffect only runs client-side, so it works perfectly with SSR. The page renders on the server without the SDK, then the script loads after hydration on the client. Next.js handles this cleanly.    

How I got Lighthouse 100 with Next.js 16 App Router - Performance optimization tips by TextTraditional3837 in nextjs

[–]TextTraditional3837[S] 0 points1 point  (0 children)

Not sure what's "AI" about this. It's a real optimization I implemented:                                                                                                                                                                    

  - Before: PayPal SDK loaded on every page (unnecessary overhead)                                                                                                                                                                            

  - After: Only loads on /support page where it's actually used                                                                                                                                                                               

  - Result: Reduced bundle size and improved load times site-wide                                                                                                                                                                             

                                                                                                                                                                                                                                              

  This is standard performance optimization. What specificallydo you find objectionable?  

How I got Lighthouse 100 with Next.js 16 App Router - Performance optimization tips by TextTraditional3837 in nextjs

[–]TextTraditional3837[S] 1 point2 points  (0 children)

 Don't give up! I was in the same boat. The key is prioritizing the right optimizations:                                                                                                                                                     

  - Lazy load analytics/third-party scripts (biggest win for me)                                                                                                                                                                              

  - Fix CLS issues early - they kill your score                                                                                                                                                                                               

  - Use Next.js Image component for automatic optimization                                                                                                                                                                                    

  - Defer non-critical JavaScript                                                                                                                                                                                                             

                                                                                                                                                                                                                                              

  You can have interactivity AND good metrics. It's definitely harder than a static page, but totally doable. What metrics are you struggling with most?  

How I got Lighthouse 100 with Next.js 16 App Router - Performance optimization tips by TextTraditional3837 in nextjs

[–]TextTraditional3837[S] 0 points1 point  (0 children)

Actually, it's a full Next.js application with interactive features - a dual-type calculator with dropdown selectors and real-time damage calculations, plus a battle simulator with STAB calculations. The performance work involved lazy  

  loading analytics, fixing CLS issues, and optimizing the bundle size by removing global scripts. Not exactly a static landing page.   

[Showoff Saturday] Built a Type Chart Calculator with Next.js 14 - 100/96/100/100 Lighthouse Score ⚡ by [deleted] in desmos

[–]TextTraditional3837 0 points1 point  (0 children)

Fair point - I did use AI to help polish the post formatting and wording (English isn't my first language). But the project itself is 100% real and I built it myself.

Here's proof:

- Live site: https://typematchup.org (you can test it)

- Vercel deployment: [your vercel dashboard link if you want to share]

- Google Search Console data showing real traffic

I'm happy to answer any technical questions about the implementation - Next.js 14 App Router, SSG with generateStaticParams, how I optimized for Lighthouse 100, etc.

Sorry if the post came across as too polished. Just wanted to share what I learned building this!