Understanding Static Site Generation (SSG), Server-Side Rendering (SSR), and Server Components in Next.js

Kawsar Ahamed — Sun, 13 Oct 2024 18:16:37 +0000

When building websites and apps with Next.js, you can choose different ways to handle how pages are generated and displayed. Today, we’ll break down three important terms: Static Site Generation (SSG), Server-Side Rendering (SSR), and Server Components. Don’t worry, I’ll explain everything in simple terms so you can easily follow along!

1. Static Site Generation (SSG) — Pre-building Pages
Imagine you're running a bakery. Every night, you bake bread and put it out on the shelves in the morning for people to pick up instantly. This is kind of like Static Site Generation (SSG).

In SSG, the website’s pages are pre-built at the time you deploy (publish) your site. Once they’re built, they sit there ready to be served to users as soon as they visit the page. It’s super fast because the pages are already created and stored.

When to use SSG?
When your content doesn’t change often, like blog posts, documentation, or marketing pages. Since the pages are pre-built, visitors get them instantly!

Example:
If you have a blog post that you won’t change often, you can use SSG to generate the page at build time. When someone visits the blog, the server just sends the ready-made page, which makes it super fast.
Pros:
- Fast since pages are pre-made.
- SEO-friendly because search engines can easily index your pages.
- Great for content that doesn't change often.
Cons:
- Not great for data that changes frequently, like a real-time dashboard.

2. Server-Side Rendering (SSR) — Building Pages on Request
Now, imagine you run a restaurant where you prepare fresh meals whenever someone orders them. It takes a little longer than picking something off the shelf, but the food is made fresh for each customer. This is like Server-Side Rendering (SSR).

In SSR, when a user visits your website, the server builds the page on the spot based on the user’s request. This means the page is fresh and up-to-date with the latest information every time someone visits it, but it takes a little longer to load because the server has to build it on the fly.

When to use SSR?
When your content changes often or depends on user-specific data, like a personalized dashboard or product listings that change frequently.

Example:
Let’s say you have an online store. When someone visits the product page, SSR will build the page at that moment, showing the most up-to-date product info, like price and availability.
Pros:
- Pages always show up-to-date data.
- Great for content that changes often, like user-specific pages.
Cons:
- Takes longer to load because the server is building the page on request.
- Can put more strai

3. Server Components — Mixing Server and Client
Lastly, imagine you have a restaurant where some dishes are pre-prepared (like appetizers) and some are cooked fresh (like the main course). This way, you get the best of both worlds: some food is ready quickly, and some is made fresh when needed. This is how Server Components work.

Server Components are a new feature in Next.js that let you mix server-rendered parts with client-rendered parts. Some components of your page can be rendered on the server, while others can be handled on the user’s device (the browser). This can speed up the loading of parts of your page that don’t change often, while still allowing dynamic content where needed.

When to use Server Components?
When you want to combine the speed of server-rendered content with the interactivity of client-rendered content. It’s great for large applications where you need flexibility.

Example:
Imagine a product page where the product details (title, description, price) can be rendered on the server (since they don’t change frequently), but the shopping cart and reviews are handled on the client for more interactivity.

Pros:
Combines the best of both worlds (static speed + dynamic freshness).
Optimizes both loading speed and interactivity.
Cons:
Can be more complex to implement since you’re managing both server and client rendering.

27. Remove Element Problem Solved using JavaScript.

Kawsar Ahamed — Tue, 02 Jan 2024 10:43:08 +0000

Here's a step-by-step explanation of the code:

1. Function Definition:

let removeElement = function (nums, val) { ... }

This line defines a function named removeElement that takes two arguments:
nums: An array of numbers.
val: The value to be removed from the array.

2. Initializing Variables:

let i = 0;

This line initializes a variable i to 0. This variable will be used as a pointer to keep track of the position where the next non-val element should be placed in the array.

3. Iterating Through the Array:

for (let j = 0; j < nums.length; j++) { ... }

This for loop iterates through each element of the nums array using a variable j as the index.

4. Checking for Elements to Keep:

if (nums[j] !== val) { ... }

Inside the loop, this if statement checks if the current element at index j is not equal to the target value val.

5. Shifting Elements and Incrementing Pointer:

nums[i] = nums[j];

If the element is not equal to val, it means we need to keep it in the array. So, this line copies the element at index j to the position at index i, effectively shifting non-val elements to the left.

i++;

This line increments i to point to the next available position for a non-val element.

6. Returning the New Length:

return i;

After the loop completes, the function returns the value of i, which represents the new length of the array after removing all occurrences of val. The original array is modified in place.

7. Calling the Function and Output:

let result = removeElement([0, 1, 2, 2, 3, 0, 4, 2], 2);

This line calls the removeElement function with the array [0, 1, 2, 2, 3, 0, 4, 2] and the value 2 to remove.
console.log(result);
This line prints the value returned by the function, which will be 5 in this case, indicating the new length of the array with the 2's removed.

DEV Community: Kawsar Ahamed

Understanding Static Site Generation (SSG), Server-Side Rendering (SSR), and Server Components in Next.js

27. Remove Element Problem Solved using JavaScript.