illustration of computer with email graphics

My Next Post

Image with a keyboard with floating text that says website 

Creating my own website Part 1

<h2>Picking a framework&nbsp;</h2>
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&nbsp;on the client to enable seo and a wide range of devices.
Options I researched
<ul>
<li>React</li>
<li>Next.js</li>
<li>Vue</li>
<li>Angular&nbsp; </li>
</ul>
Pros and cons&nbsp;
 
<div data-hs-responsive-table="true" style="overflow-x: auto; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto;">
<table style="width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #99acc2; height: 1149.45px;">
<tbody>
<tr style="height: 36.8984px;">
<td style="width: 33.2896%; padding: 4px; height: 36.8984px;">Framework</td>
<td style="width: 33.2896%; padding: 4px; height: 36.8984px;">Pros&nbsp;</td>
<td style="width: 33.2906%; padding: 4px; height: 36.8984px;">Cons</td>
</tr>
<tr style="height: 292.086px;">
<td style="width: 33.2896%; padding: 4px; height: 292.086px;">React </td>
<td style="width: 33.2896%; padding: 4px; height: 292.086px;">&nbsp;Large ecosystem &amp; community support &nbsp; &nbsp;Component-based architecture for reusability &nbsp;Fast virtual DOM rendering Strong third-party library integration </td>
<td style="width: 33.2906%; padding: 4px; height: 292.086px;">Requires external libraries for routing &amp; state management &nbsp;Frequent updates with breaking changes &nbsp;JSX syntax can be unintuitive for some </td>
</tr>
<tr style="height: 292.086px;">
<td style="width: 33.2896%; padding: 4px; height: 292.086px;">Angular&nbsp;</td>
<td style="width: 33.2896%; padding: 4px; height: 292.086px;">Full-featured framework with built-in tools Two-way data binding simplifies state management Strong TypeScript support &nbsp; Enterprise-level scalability </td>
<td style="width: 33.2906%; padding: 4px; height: 292.086px;">Steep learning curve, especially for new developers Verbose and complex syntax Larger bundle sizes compared to other frameworks </td>
</tr>
<tr style="height: 292.086px;">
<td style="width: 33.2896%; padding: 4px; height: 292.086px;">Next.js</td>
<td style="width: 33.2896%; padding: 4px; height: 292.086px;">&nbsp;Server-side rendering &amp; static generation for performance Built-in API routes &amp; excellent SEO optimization Supports React out of the box Simplifies deployment with Vercel integration </td>
<td style="width: 33.2906%; padding: 4px; height: 292.086px;">&nbsp;Dependent on React, limiting flexibility &nbsp;Can be overkill for simple projects Requires familiarity with backend concepts </td>
</tr>
<tr style="height: 236.289px;">
<td style="width: 33.2896%; padding: 4px; height: 236.289px;">Vue</td>
<td style="width: 33.2896%; padding: 4px; height: 236.289px;">Simple and intuitive API Reactive data binding Lightweight compared to Angular &nbsp;Great documentation &amp; ease of adoption </td>
<td style="width: 33.2906%; padding: 4px; height: 236.289px;">Smaller ecosystem compared to React &nbsp;Fewer enterprise-level integrations Can have inconsistencies between versions </td>
</tr>
</tbody>
</table>
</div>
&nbsp;

Next.js ended up being my choice . Here's why:
<ul>
<li>Static &amp; Dynamic Content: Next.js supports both static generation (SSG) and server-side rendering (SSR) out of the box, letting you balance performance and flexibility.</li>
<li>Ease of Maintenance &amp; Expansion: With a file-based routing system and built-in API routes, Next.js simplifies project organization and makes scaling straightforward.</li>
<li>Server-side &amp; Client-side Rendering: You can choose SSG for fast-loading static pages, SSR for dynamic content, and even client-side rendering when necessary.</li>
<li>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.</li>
</ul>
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.

<h2>Picking a framework&nbsp;</h2>
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&nbsp;on the client to enable seo and a wide range of devices.

My Blog

My Next Post

Creating my own website Part 1

Back to home