Forem: kartikey rawat

Server Components: A New Feature in Next.js That You Need to Know About

kartikey rawat — Sun, 30 Jul 2023 09:29:53 +0000

What are Server Components in Next.js?

Server Components are a new feature in Next.js that allow developers to write server-side code directly in their React components. This means that the components can be rendered on the server before being sent to the client, which can improve performance and SEO.

How do Server Components work?

When a user requests a page that contains a Server Component, Next.js will first render the component on the server. This process involves parsing the component's code, resolving its dependencies, and fetching any data that the component needs. Once the component has been rendered, Next.js will send the rendered HTML to the client.

What are the benefits of using Server Components?

There are several benefits to using Server Components, including:

Improved performance: Server Components can improve performance by rendering the components on the server before they are sent to the client. This can reduce the amount of JavaScript that needs to be downloaded by the client, which can improve the initial load time of the page.
Better SEO: Server Components can also improve SEO by rendering the components on the server. This means that the search engines will be able to see the rendered HTML, which can help your pages rank higher in search results.
More flexibility: Server Components give you more flexibility in how you build your applications. You can use them to move data fetching to the server, closer to your database. You can also use them to keep large dependencies that previously would impact the client JavaScript bundle size on the server, leading to improved performance.

When to use Server and Client Components?

To simplify the decision between Server and Client Components, we recommend using Server Components (default in the app directory) until you have a use case for a Client Component.

This table summarizes the different use cases for Server and Client Components:

What do you need to do?	Server Component	Client Component
Fetch data.	☑	☒
Access backend resources (directly)	☑	☒
Keep sensitive information on the server (access tokens, API keys, etc)	☑	☒
Keep large dependencies on the server / Reduce client-side JavaScript	☑	☒
Add interactivity and event listeners (`onClick()`, `onChange()`, etc)	☒	☑
Use State and Lifecycle Effects (`useState()`, `useReducer()`, `useEffect()`, etc)	☒	☑
Use browser-only APIs	☒	☑
Use custom hooks that depend on state, effects, or browser-only APIs	☒	☑
Use React Class components	☒	☑

How to use Server Components in Next.js

To use Server Components in Next.js, you need to add the export default keyword to the top of your component file. You also need to add the use server directive to the top of any asynchronous functions that you want to run on the server.

Here is an example of a Server Component:

import React from "react";

export default function ServerComponent() {
  const data = fetch("https://api.example.com/data").then((res) => res.json());

  return (
    <div>
      <h1>This is a Server Component</h1>
      <p>The data from the API is: {data.name}</p>
    </div>
  );
}

// This function will run on the server
use server async function fetchData() {
  const data = await fetch("https://api.example.com/data").then((res) => res.json());

  return data;
}

Conclusion

Server Components are a powerful new feature in Next.js that can improve the performance, SEO, and flexibility of your applications. If you are looking for ways to improve your Next.js application, I encourage you to try using Server Components.

Diagram of how Server Components work

Here is a diagram of how Server Components work in Next.js:

The diagram shows that when a user requests a page that contains a Server Component, Next.js will first render the component on the server. This process involves parsing the component's code, resolving its dependencies, and fetching any data that the component needs. Once the component has been rendered, Next.js will send the rendered HTML to the client.

The client will then receive the rendered HTML and display it in the browser. The client will not need to execute any JavaScript code to render the component, which can improve performance.

Sharing fetch requests between Server Components

When fetching data, you may want to share the result of a fetch between a page or layout and some of its children components. This is an unnecessary coupling between the components and can lead to passing props back and forth between components.

Instead, we recommend colocating data fetching alongside the component that consumes the data. fetch requests are automatically deduped in Server Components, so each route segment can request exactly the data it needs without worrying about duplicate requests. Next.js will read the same value from the fetch cache.

I hope this blog has helped you understand Server Components in Next.js. If you have any questions, please feel free to leave a comment below.

Credits-

Transcribe speech input to text on Azure Cloud

kartikey rawat — Sun, 11 Apr 2021 17:01:07 +0000

Introduction

The Speech-to-Text aspect of the Speech service transcribes audio streams into text. Your application can display this text to the user or act upon it as command input. You can use this service either with an SDK client library (for supported platforms and languages) or a representational state transfer (REST) API.

Overview of speech-to-text

The Speech-to-text aspect of the Speech services, in Azure Cognitive Services, provides a real-time transcription of audio streams based on machine learning and artificial intelligence. The Speech services APIs allow developers to add end-to-end, real-time speech transcription to their applications or services.
Speech services are designed to perform real-time speech-to-text for scenarios like:

Translation of live presentations
In-person or remote translated communications
Customer support
Business intelligence
Media subtitling
Multilingual AI interactions

Create a Speech Service

Before you can begin performing your speech-to-text translation, you need to create an Azure Speech resource. You can do this by using the Azure portal, the Azure CLI, or the Cloud Shell. This exercise will use the Azure portal.

Sign in to the Azure portal.
Select + Create a resource. In the Search the Marketplace box, type speech and press Enter.
In the Results list, select Speech. In the Speech pane, select Create.
Enter a unique name for your Speech Service resource.
Select an appropriate subscription.
Choose a location to host the resource. This is typically the region where the resource will be used.
For the Pricing tier, select a tier. The tiers may change but currently, you can selects F0 or S0. For testing, we selected F0.
Create a new resource group (RG) named mslearn-speechapi to hold your resources. You can also choose an existing RG if you wish
Select Create to create a subscription to the Speech Translation API.

My Hacktoberfest Journey

kartikey rawat — Thu, 29 Oct 2020 12:07:48 +0000

[✨This is my first hacktoberfest and this gave me the inspiration to do contribution to Open Source✨]

I am Kartikey Rawat, student of Bhilai Institue of Technology, Durg. I am studying Computer Science and 3rd CSE Undergrad.

I am completed my 4 Pull Request in Hacktoberfest and after making my first PR, I got goosebumps as I got the feeling to contribute in some big tech stacks but that it's fine

First Project is on Tensorflow.js Project where I just update the documentation and improve the model and after ones are the those which listed out in hacktoberfest label. This is the link to the project

https://github.com/hugozanini/realtime-semantic-segmentation/pull/4