Skip to content

added ssr csr files #355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added ssr csr files #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions client/src/components/new/CSR.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';

const CSR = () => {
return (
<div className="p-6 my-4 bg-white border border-gray-200 rounded-lg shadow-sm">
<h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">1. Client-Side Rendering (CSR)</h2>
<p className="mb-4 font-normal text-gray-700">
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).
</p>
<p className="mb-4 font-normal text-gray-700">
<strong>Analogy:</strong> 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.
</p>

<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<div>
<h4 className="font-semibold text-gray-800">Key Frameworks:</h4>
<p className="text-gray-600">React (with Create React App), Angular, Vue.</p>
</div>
<div>
<h4 className="font-semibold text-green-700">Pros:</h4>
<ul className="pl-5 text-green-600 list-disc">
<li>Rich, fluid user interactions after the initial load.</li>
<li>Faster page-to-page navigation without full reloads.</li>
<li>Lighter load on the server.</li>
</ul>
</div>
<div>
<h4 className="font-semibold text-red-700">Cons:</h4>
<ul className="pl-5 text-red-600 list-disc">
<li>Slow initial load time (Time to First Contentful Paint).</li>
<li>Can be detrimental to SEO if crawlers don't execute JS well.</li>
<li>Requires a powerful device for a smooth user experience.</li>
</ul>
</div>
</div>
</div>
);
};

export default CSR;
40 changes: 40 additions & 0 deletions client/src/components/new/ISR.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';

const ISR = () => {
return (
<div className="p-6 my-4 bg-white border border-gray-200 rounded-lg shadow-sm">
<h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">4. Incremental Static Regeneration (ISR)</h2>
<p className="mb-4 font-normal text-gray-700">
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.
</p>
<p className="mb-4 font-normal text-gray-700">
<strong>Analogy:</strong> 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.
</p>

<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<div>
<h4 className="font-semibold text-gray-800">Key Frameworks:</h4>
<p className="text-gray-600">Next.js (pioneered this technique).</p>
</div>
<div>
<h4 className="font-semibold text-green-700">Pros:</h4>
<ul className="pl-5 text-green-600 list-disc">
<li>Combines the speed of static sites with fresh content.</li>
<li>Reduces build times significantly.</li>
<li>Page revalidation is atomic and doesn't affect users.</li>
</ul>
</div>
<div>
<h4 className="font-semibold text-red-700">Cons:</h4>
<ul className="pl-5 text-red-600 list-disc">
<li>Content can still be temporarily stale for some users.</li>
<li>More complex to set up and reason about than plain SSG.</li>
<li>Not supported by all hosting platforms.</li>
</ul>
</div>
</div>
</div>
);
};

export default ISR;
27 changes: 27 additions & 0 deletions client/src/components/new/RenderingStrategiesPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="page-container">
<h1>Web Rendering Strategies</h1>
<p className="intro-text">
Understanding how web pages are rendered is crucial for building fast, scalable, and SEO-friendly applications. Let's explore the most common strategies.
</p>

<CSR />
<SSR />
<SSG />
<ISR />

</div>
);
};

export default RenderingStrategiesPage;
42 changes: 42 additions & 0 deletions client/src/components/new/SSG.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

import React from 'react';

const SSG = () => {
return (
<div className="p-6 my-4 bg-white border border-gray-200 rounded-lg shadow-sm">
<h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">3. Static Site Generation (SSG)</h2>
<p className="mb-4 font-normal text-gray-700">
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.
</p>
<p className="mb-4 font-normal text-gray-700">
<strong>Analogy:</strong> 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.
</p>

<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<div>
<h4 className="font-semibold text-gray-800">Key Frameworks:</h4>
<p className="text-gray-600">Astro, Next.js, Gatsby, Hugo, Jekyll.</p>
</div>
<div>
<h4 className="font-semibold text-green-700">Pros:</h4>
<ul className="pl-5 text-green-600 list-disc">
<li>Extremely fast and performant.</li>
<li>Highly secure, as there's no live server or database.</li>
<li>Very cheap to host, perfect for CDNs.</li>
</ul>
</div>
<div>
<h4 className="font-semibold text-red-700">Cons:</h4>
<ul className="pl-5 text-red-600 list-disc">
<li>Long build times for large sites with many pages.</li>
<li>Content can become stale; a full rebuild is needed to update.</li>
<li>Not suitable for highly dynamic or personalized content.</li>
</ul>
</div>
</div>
</div>
);
};

export default SSG;

40 changes: 40 additions & 0 deletions client/src/components/new/SSR.JSX
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';

const SSR = () => {
return (
<div className="p-6 my-4 bg-white border border-gray-200 rounded-lg shadow-sm">
<h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">2. Server-Side Rendering (SSR)</h2>
<p className="mb-4 font-normal text-gray-700">
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").
</p>
<p className="mb-4 font-normal text-gray-700">
<strong>Analogy:</strong> 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.
</p>

<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<div>
<h4 className="font-semibold text-gray-800">Key Frameworks:</h4>
<p className="text-gray-600">Next.js (for React), Nuxt.js (for Vue), SvelteKit.</p>
</div>
<div>
<h4 className="font-semibold text-green-700">Pros:</h4>
<ul className="pl-5 text-green-600 list-disc">
<li>Excellent for SEO as content is present in the initial HTML.</li>
<li>Fast initial page load (Time to First Contentful Paint).</li>
<li>Works well on less powerful devices.</li>
</ul>
</div>
<div>
<h4 className="font-semibold text-red-700">Cons:</h4>
<ul className="pl-5 text-red-600 list-disc">
<li>Can have a slower Time to Interactive (TTI) while hydration occurs.</li>
<li>Higher server load and cost.</li>
<li>Full page reloads on navigation.</li>
</ul>
</div>
</div>
</div>
);
};

export default SSR;