Overview
The article discusses Notion's migration of its marketing site to Next.js, focusing on the challenges faced with their previous client-rendered approach and the benefits gained from adopting a static site architecture. It highlights the technical decisions made, the implementation process, and the significant improvements in performance and user experience following the migration.
What You'll Learn
1
How to migrate a marketing site from a client-rendered to a static site architecture
2
Why using Next.js can improve performance and SEO for web applications
3
How to implement internationalized routing in a web application
Prerequisites & Requirements
- Familiarity with React and JavaScript frameworks
- Experience with static site generators like Next.js(optional)
Key Questions Answered
What were the main challenges faced with the original marketing site?
The original marketing site faced several challenges, including a large JavaScript bundle size of 9.1MB, poor SEO due to client-side rendering, excessive API calls to the content management system, and a low Google Lighthouse performance score of around 50/100. These issues prompted the need for a more scalable solution.
Why did Notion choose Next.js for their marketing site?
Notion chose Next.js because it is lightweight, supports full TypeScript, offers excellent documentation, and includes features like server-side rendering and internationalized routing. These capabilities aligned well with their technical goals and the need for a performant marketing site.
What were the results of migrating to Next.js?
After migrating to Next.js, Notion achieved a Google Lighthouse performance score of 97/100, reduced the initial JavaScript bundle size by 93% from 9.1MB to 847KB, and eliminated loading spinners across the marketing site. This significantly improved user experience and SEO.
Key Statistics & Figures
Initial JavaScript bundle size
9.1MB
This was the size before migrating to Next.js, which was reduced to 847KB.
Google Lighthouse score
50/100
This was the score before migration, which improved to 97/100 after implementing Next.js.
Reduction in total file size
75%
The total file size of the marketing site decreased from 12.5MB to 3.1MB.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Next.js
Used to rebuild the marketing site with a static site architecture.
Programming Language
Typescript
Implemented for type safety and better developer experience.
Cms
Contentful
Integrated for content management within the marketing site.
Key Actionable Insights
1Consider adopting a static site generator like Next.js for marketing sites to enhance performance and SEO.Static site generators pre-render content, which improves load times and allows for better indexing by search engines, making them ideal for marketing purposes.
2Implement internationalized routing to cater to a global audience effectively.By using built-in features of frameworks like Next.js, you can streamline the process of serving localized content, which is crucial for user engagement in diverse markets.
3Regularly assess the performance of your web applications using tools like Google Lighthouse.Monitoring performance metrics helps identify bottlenecks and areas for improvement, ensuring your site remains competitive and user-friendly.
Common Pitfalls
1
Overcomplicating the codebase by mixing marketing and application components.
This can lead to increased complexity and maintenance challenges, making it harder to implement changes without affecting the entire system.
Related Concepts
Static Site Generation
Performance Optimization Techniques
Internationalization In Web Applications