diff --git a/client/src/components/new/CSR.jsx b/client/src/components/new/CSR.jsx new file mode 100644 index 00000000..2cdb13c7 --- /dev/null +++ b/client/src/components/new/CSR.jsx @@ -0,0 +1,40 @@ +import React from 'react'; + +const CSR = () => { + return ( +
+

1. Client-Side Rendering (CSR)

+

+ With CSR, the server sends a minimal HTML file along with a large JavaScript bundle. The browser downloads everything, and then the JavaScript takes over to render the page, fetch data, and handle routing. This is the classic model for a Single-Page Application (SPA). +

+

+ Analogy: It's like buying flat-pack furniture (like from IKEA). You get a box with all the pieces and instructions, but you have to build the final product yourself at home. +

+ +
+
+

Key Frameworks:

+

React (with Create React App), Angular, Vue.

+
+
+

Pros:

+
    +
  • Rich, fluid user interactions after the initial load.
    • +
  • Faster page-to-page navigation without full reloads.
    • +
  • Lighter load on the server.
    • +
+
+
+

Cons:

+
    +
  • Slow initial load time (Time to First Contentful Paint).
    • +
  • Can be detrimental to SEO if crawlers don't execute JS well.
    • +
  • Requires a powerful device for a smooth user experience.
    • +
+
+
+
+ ); +}; + +export default CSR; diff --git a/client/src/components/new/ISR.jsx b/client/src/components/new/ISR.jsx new file mode 100644 index 00000000..ff577fd9 --- /dev/null +++ b/client/src/components/new/ISR.jsx @@ -0,0 +1,40 @@ +import React from 'react'; + +const ISR = () => { + return ( +
+

4. Incremental Static Regeneration (ISR)

+

+ ISR is a powerful hybrid approach. Pages are generated statically at build time (like SSG), but they can be automatically re-generated in the background after a certain time interval. This allows content to be updated without needing a full site rebuild. +

+

+ Analogy: It's like that pre-built chair from the warehouse, but it magically rebuilds itself with a fresh coat of paint every hour, so it never looks old for the next customer. +

+ +
+
+

Key Frameworks:

+

Next.js (pioneered this technique).

+
+
+

Pros:

+
    +
  • Combines the speed of static sites with fresh content.
    • +
  • Reduces build times significantly.
    • +
  • Page revalidation is atomic and doesn't affect users.
    • +
+
+
+

Cons:

+
    +
  • Content can still be temporarily stale for some users.
    • +
  • More complex to set up and reason about than plain SSG.
    • +
  • Not supported by all hosting platforms.
    • +
+
+
+
+ ); +}; + +export default ISR; diff --git a/client/src/components/new/RenderingStrategiesPage.jsx b/client/src/components/new/RenderingStrategiesPage.jsx new file mode 100644 index 00000000..a4061202 --- /dev/null +++ b/client/src/components/new/RenderingStrategiesPage.jsx @@ -0,0 +1,27 @@ +// client/src/pages/RenderingStrategiesPage.jsx + +import React from 'react'; +// We will create these components in the next step +import CSR from '../components/RenderingStrategies/CSR'; +import SSR from '../components/RenderingStrategies/SSR'; +import SSG from '../components/RenderingStrategies/SSG'; +import ISR from '../components/RenderingStrategies/ISR'; + +const RenderingStrategiesPage = () => { + return ( +
+

Web Rendering Strategies

+

+ Understanding how web pages are rendered is crucial for building fast, scalable, and SEO-friendly applications. Let's explore the most common strategies. +

+ + + + + + +
+ ); +}; + +export default RenderingStrategiesPage; \ No newline at end of file diff --git a/client/src/components/new/SSG.jsx b/client/src/components/new/SSG.jsx new file mode 100644 index 00000000..94e62157 --- /dev/null +++ b/client/src/components/new/SSG.jsx @@ -0,0 +1,42 @@ + +import React from 'react'; + +const SSG = () => { + return ( +
+

3. Static Site Generation (SSG)

+

+ With SSG, all the HTML pages for a site are generated at build time (before anyone visits). These pre-built files are then deployed to a server or CDN. When a user requests a page, the server just sends back the already-made file. +

+

+ Analogy: It's like a furniture store having thousands of chairs already built and stored in a warehouse. When you order one, they just grab it and ship it instantly. +

+ +
+
+

Key Frameworks:

+

Astro, Next.js, Gatsby, Hugo, Jekyll.

+
+
+

Pros:

+
    +
  • Extremely fast and performant.
    • +
  • Highly secure, as there's no live server or database.
    • +
  • Very cheap to host, perfect for CDNs.
    • +
+
+
+

Cons:

+
    +
  • Long build times for large sites with many pages.
    • +
  • Content can become stale; a full rebuild is needed to update.
    • +
  • Not suitable for highly dynamic or personalized content.
    • +
+
+
+
+ ); +}; + +export default SSG; + diff --git a/client/src/components/new/SSR.JSX b/client/src/components/new/SSR.JSX new file mode 100644 index 00000000..302dffba --- /dev/null +++ b/client/src/components/new/SSR.JSX @@ -0,0 +1,40 @@ +import React from 'react'; + +const SSR = () => { + return ( +
+

2. Server-Side Rendering (SSR)

+

+ With SSR, when a user requests a page, the server generates the full HTML for that page and sends it to the browser. The browser can immediately display the content. JavaScript then loads in the background to make the page interactive (a process called "hydration"). +

+

+ Analogy: It's like ordering a pre-assembled piece of furniture. It arrives ready to use instantly, though you might need to plug it in (hydration) to get its interactive features working. +

+ +
+
+

Key Frameworks:

+

Next.js (for React), Nuxt.js (for Vue), SvelteKit.

+
+
+

Pros:

+
    +
  • Excellent for SEO as content is present in the initial HTML.
    • +
  • Fast initial page load (Time to First Contentful Paint).
    • +
  • Works well on less powerful devices.
    • +
+
+
+

Cons:

+
    +
  • Can have a slower Time to Interactive (TTI) while hydration occurs.
    • +
  • Higher server load and cost.
    • +
  • Full page reloads on navigation.
    • +
+
+
+
+ ); +}; + +export default SSR;