#CodeWeekly #4: Partial Pre-rendering in Next.js, RESTful APIs in one-go!

Hey, what's sup everyone! Hope you guys enjoyed the last release. As mentioned in the last one, I'm picking up from where I left off in the last blog about Strapi, and introducing the desi-jugaad section for learning System Design.

Partial Pre-rendering in Next.js Explained! [Still experimental]

Partial pre-rendering is a new feature in Next.js that allows for a faster loading experience by pre-rendering static parts of a page while streaming in dynamic content. This means that the page doesn't have to wait for all of the content to be loaded before it starts to display, which can make it feel much snappier.

Let's take a look at an example in simple terms:

Imagine you're making a hot cup of chai. The pre-boiled water and ginger-milk base are the static content, forming the foundation of the flavor. The dynamic content is the masala blend and any added spices you choose, creating a personalized touch. With partial pre-rendering, the pre-boiled water and ginger-milk base are prepared first, providing a warm and comforting foundation. While the masala simmers and releases its aroma, the pre-heated cup is presented.

This way, you can start enjoying the warmth and initial flavor of the chai (the page) even before the full masala experience (with all the dynamic content loaded) is ready.

How to Enable Partial Pre-rendering in Next.js?

Partial Pre-rending is currently available in the canary release of Next.js 14 as it's still an experimental feature. So first you'll need to install the canary release:

npm install next@canary

You can enable Partial Prerendering by setting the experimental ppr flag in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: true,
  },
}

module.exports = nextConfig

Some points that you need to remember when using Partial Pre-rendering:

• It's still an experimental feature, so it's not perfect yet.

• It only works on the Node.js runtime, so it won't work if you're using the Edge runtime.

• It doesn't apply to client-side navigations yet, but the Next.js team is working on it.

RESTful APIs: Powering the Backend of Internet

Ever wondered how Zomato & Swiggy delivers in real-time? The secret sauce behind these lightning-fast ⚡ delivery lies in the technology called, RESTful APIs. But what exactly are they, and how do they work behind the scenes?

RESTful APIs, or Representational State Transfer APIs, are a type of web service architecture that follows the principles and constraints of REST.

Think of REST as a set of guidelines for building APIs, like the spices that add flavor to your chai. These guidelines ensure APIs are consistent, easy to use, and scalable, just like a good restaurant that caters to everyone's taste.

Learn More: https://www.codecademy.com/article/what-is-rest

Working on RESTful API over HTTP

Let's jump into another example 😂 (If I'm using too many examples do let me know in the comments). Imagine you're at a restaurant with a digital menu and a robot waiter. You (the client) want to order food (data). Here's how a RESTful API works like that:

1. HTTP Methods: These are like the verbs in your chai order - GET for fetching data (like your menu), POST for creating new data (your order), PUT for updating (extra sugar!), and DELETE for removing (leftovers?).

• • GET: Just want to see the dish details (read data).

    * POST: Want to order the dish for the first time (create new data).

    * PUT: Want to change your order (update data, e.g., extra spice).

    * DELETE: Oops, changed your mind and want to cancel (delete data).

2. Robot & Kitchen:

• The robot waiter (client software) sends your order (request) to the kitchen (server) using a specific language (HTTP protocol).

• The kitchen prepares your food (processes the request) and sends it back to the waiter (returns a response).

3. Delivery & Enjoyment:

• The robot delivers your food (the response), which could be the dish itself (data) or a message like "Sorry, out of stock!" (error message).

• You enjoy your meal (use the data)!

Key points:

• Simple verbs: Easy to understand actions like GET, POST, PUT, DELETE.

• Clear structure: Organized like a menu with unique IDs for resources.

• Flexible communication: Works across different devices and platforms.

• Efficient exchange: Uses less data, making it internet friendly.

Conclusion

This is just the beginning of your desi jugaad concepts of system design journey! Next week, I'll introduce some more concepts of System Design and APIs with our signature jugaad twist.

Stay tuned and get ready to build something truly incredible!