Creating my own website Part 1
Picking a framework
Problem Statement: I want to be able to serve content that is static or dynamic. The site should be easy to maintain and add upon. I want to easily be able to do server side rendering or client side rendering. Pages should be viewable with no JavaScript on the client to enable seo and a wide range of devices.
Options I researched
- React
- Next.js
- Vue
- Angular
Pros and cons
| Framework | Pros | Cons |
| React |
Large ecosystem & community support Component-based architecture for reusability Fast virtual DOM rendering Strong third-party library integration |
Requires external libraries for routing & state management Frequent updates with breaking changes JSX syntax can be unintuitive for some |
| Angular | Full-featured framework with built-in tools Two-way data binding simplifies state management Strong TypeScript support Enterprise-level scalability |
Steep learning curve, especially for new developers Verbose and complex syntax Larger bundle sizes compared to other frameworks |
| Next.js | Server-side rendering & static generation for performance Built-in API routes & excellent SEO optimization Supports React out of the box Simplifies deployment with Vercel integration |
Dependent on React, limiting flexibility Can be overkill for simple projects Requires familiarity with backend concepts |
| Vue | Simple and intuitive API Reactive data binding Lightweight compared to Angular Great documentation & ease of adoption |
Smaller ecosystem compared to React Fewer enterprise-level integrations Can have inconsistencies between versions |
Next.js ended up being my choice . Here's why:
- Static & Dynamic Content: Next.js supports both static generation (SSG) and server-side rendering (SSR) out of the box, letting you balance performance and flexibility.
- Ease of Maintenance & Expansion: With a file-based routing system and built-in API routes, Next.js simplifies project organization and makes scaling straightforward.
- Server-side & Client-side Rendering: You can choose SSG for fast-loading static pages, SSR for dynamic content, and even client-side rendering when necessary.
- No JavaScript Required for Viewing: Since Next.js pre-renders pages as HTML when using SSG or SSR, content is accessible even without JavaScript, improving SEO and accessibility.
React alone wouldn’t offer built-in SSR/SSG support, and Angular is more suited for large-scale enterprise applications but may introduce more complexity. Vue is lightweight, but Next.js gives me stronger built-in SEO capabilities and better scaling potential.
Loading...